/*
  IBT — Instituto Brasileiro de Teatro
  Design System — Tokens Base

  FONTES SUBSTITUTAS (fontes privadas → Google Fonts):
  - "Basis Grotesque Pro"   → "DM Sans"
  - "PTP-NuevoEspiritu"     → "Barlow Condensed"
  - "AB-NuevoEspiritu D"    → "Barlow Condensed"
*/

/* ─── FONTES PRIVADAS ───────────────────────────────────── */

@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('./fonts/basis/BasisGrotesquePro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('./fonts/basis/BasisGrotesquePro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('./fonts/basis/BasisGrotesquePro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nuevo Espiritu';
  src: url('./fonts/nuevo/PTP-NuevoEspiritu-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ─── CORES ─────────────────────────────────────────────── */

  --color-off-white:  #E7E7DD;  /* fundo principal */
  --color-brown:      #572C00;  /* texto e fundos escuros */
  --color-orange:     #FF4D02;  /* CTA, destaques, navbar */
  --color-white:      #FFFFFF;  /* fundo alternativo */
  /* Aliases semânticos */
  --color-bg-primary:     var(--color-off-white);
  --color-bg-dark:        var(--color-brown);
  --color-bg-accent:      var(--color-orange);
  --color-bg-light:       var(--color-white);

  --color-text-primary:   var(--color-brown);
  --color-text-light:     var(--color-off-white);
  --color-text-accent:    var(--color-orange);

  --color-border:         var(--color-brown);


  /* ─── TIPOGRAFIA — FAMÍLIAS ──────────────────────────────── */

  /* Fontes privadas */
  --font-body:    'Basis Grotesque Pro', sans-serif;
  --font-display: 'Nuevo Espiritu', sans-serif;

  /* Pesos */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   800;


  /* ─── TIPOGRAFIA — ESCALA ────────────────────────────────── */

  /* Body Medium — mesmo tamanho que body-lg (padrão 16px) */
  --text-body-md-size:        16px;
  --text-body-md-line-height: 20px;
  --text-body-md-tracking:    0.20px;

  /* Body Large — parágrafos principais */
  --text-body-lg-size:        16px;
  --text-body-lg-line-height: 20px;
  --text-body-lg-tracking:    0.20px;

  /* Label / Botões */
  --text-label-size:          16px;
  --text-label-line-height:   1;
  --text-label-tracking:      0.5px;

  /* Nota de rodapé / subtítulos */
  --text-footnote-size:       20px;
  --text-footnote-line-height:1.05;
  --text-footnote-tracking:   0;

  /* Chancela / patrocínio */
  --text-chancela-size:       30px;
  --text-chancela-line-height:1.05;
  --text-chancela-tracking:   0;

  /* Título XP — menor display */
  --text-title-xp-size:       32px;
  --text-title-xp-line-height:1;
  --text-title-xp-tracking:   0;

  /* Texto de tags circulares / headings médios */
  --text-tag-size:            40px;
  --text-tag-line-height:     1;
  --text-tag-tracking:        0;

  /* Descrição de serviço */
  --text-service-size:        64px;
  --text-service-line-height: 1;
  --text-service-tracking:    0;

  /* Título PP */
  --text-title-pp-size:       100px;
  --text-title-pp-line-height:1;
  --text-title-pp-tracking:   0;

  /* Título GG — hero principal */
  --text-title-gg-size:       180px;
  --text-title-gg-line-height:1;
  --text-title-gg-tracking:   0;


  /* ─── ESPAÇAMENTO ────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* Espaçamentos de seção (extraídos do layout) */
  --section-padding-x:  76px;
  --section-padding-y:  96px;

  /* Espaçamento de formulário */
  --form-gap:       24px;
  --form-input-h:   50px;
  --form-label-h:   20px;


  /* ─── LAYOUT ─────────────────────────────────────────────── */

  --container-width: 1280px;
  --section-height:  867px;   /* altura padrão das seções */


  /* ─── BORDAS ─────────────────────────────────────────────── */

  --border-width:   1px;
  --border-style:   solid;
  --border-color:   var(--color-brown);
  --border:         var(--border-width) var(--border-style) var(--border-color);

  /* Border radius (design usa formas retas; pill apenas em ícones de infraestrutura) */
  --radius-none: 0;
  --radius-pill: 200px;  /* ícones circulares de infraestrutura */


  /* ─── NAVBAR ─────────────────────────────────────────────── */

  --navbar-h:       34px;
  --navbar-bg:      var(--color-orange);
  --navbar-text:    var(--color-off-white);


  /* ─── BOTÃO PRIMARY ──────────────────────────────────────── */

  --btn-bg:         var(--color-orange);
  --btn-text:       var(--color-brown);
  --btn-h:          35px;
  --btn-padding-x:  14px;
  --btn-padding-y:  10px;
  --btn-font-size:  var(--text-label-size);
  --btn-tracking:   0.08px;

  /* Variante de botão grande (form) */
  --btn-lg-h:       51px;


  /* ─── CARDS DE ESPAÇO ────────────────────────────────────── */

  --card-w:         272px;
  --card-h:         436px;
  --card-img-h:     282px;
  --card-gap:       52px;

  /* Cores dos cards (alternância orange / brown) */
  --card-orange-bg: var(--color-orange);
  --card-brown-bg:  var(--color-brown);
  --card-tag-bg:    var(--color-off-white);


  /* ─── FOOTER ─────────────────────────────────────────────── */

  --footer-bg:      var(--color-orange);
  --footer-text:    var(--color-brown);
  --footer-padding-x: 76px;
  --footer-padding-y: 24px;
  --footer-gap:     91px;
}