/* Odara Design System — colors & type tokens
 * Tipografia da marca: URBANE + URBANE CONDENSED (licenciada, ainda sem os
 * arquivos). Rodando nas substitutas open-source, ver bloco abaixo.
 * Pesos disponíveis (upright + italic + condensed): Thin · Extra Light · Light ·
 * Medium · Demi Bold · Bold · Heavy.
 *
 * Cores conferidas com o manual oficial "CORES INSTITUCIONAIS - ODARA" (Vermelho,
 * Amarelo, Preto, Areia + 6 acentos de produto).
 */

/* ============================================================================
 * SUBSTITUICAO DE FONTE (agosto/2026)
 * ----------------------------------------------------------------------------
 * A Urbane e licenciada e ainda nao temos os arquivos. Enquanto isso rodamos
 * nas irmas open-source mais proximas, servidas pelo Google Fonts:
 *
 *   Urbane            -> Urbanist          (geometrica monolinha, o circular,
 *                        pesos 100 a 900 com italico, mesma familia de desenho)
 *   Urbane Condensed  -> Barlow Condensed  (condensada monolinha, 100 a 900,
 *                        tem o Heavy que os numerais grandes pedem)
 *
 * 'Urbane' segue em primeiro na pilha: no dia que os .woff2 entrarem em
 * arquitetura/marca/fonts/, basta reativar o bloco @font-face (ver
 * odara-tokens-urbane.css) e tudo passa a usar a fonte oficial sem tocar em
 * nenhum componente.
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&family=Barlow+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  /* ---------- Color :: Institucional (verificado em CORES INSTITUCIONAIS - ODARA) ---------- */
  --od-vermelho: #EE2737;   /* Pantone 1788 C  · CMYK 0/91/74/0 */
  --od-amarelo:  #FFB81C;   /* Pantone 1235 C  · CMYK 0/33/88/0 */
  --od-preto:    #000000;   /* Pantone Preto C · CMYK 0/0/0/100 */
  --od-areia:    #FFF7EB;   /* Pantone 1235 C @10% · CMYK 0/3/9/0 */
  --od-branco:   #FFFFFF;

  /* ---------- Color :: Produtos (verificado no manual) ---------- */
  --od-tradicional:    #7D4016;  /* Alfajor Tradicional   · 725 C */
  --od-branco-alfa:    #F4EEE2;  /* Alfajor Branco        · 468 C @30% */
  --od-dark:           #211E16;  /* Alfajor Escuro        · Process Black C */
  --od-crocante-avela: #8759B3;  /* Crocante Avelã        · 2076 C */
  --od-crocante-milk:  #008FDA;  /* Crocante Leite        · 2192 C */
  --od-crocante-pacoca:#E75301;  /* Crocante Paçoca       · 166 C */
  --od-zero:           #82CEE6;  /* Linha Zero (zero acucar, sem lactose).
                                    NAO esta no manual: medido da fotografia
                                    oficial da embalagem, 9.669 pixels, com a
                                    foto calibrada pelo creme (#FDF2E5 medido
                                    contra #FFF7EB oficial). Confirmar. */

  /* Aliases PT-BR (o design system manda escrever Escuro e Leite, não Dark/Milk).
     Os nomes acima ficam por compatibilidade com o que já existe no Claude Design. */
  --od-escuro:         var(--od-dark);
  --od-crocante-leite: var(--od-crocante-milk);

  /* ---------- Semantic ---------- */
  --bg:           var(--od-areia);
  --bg-alt:       #FFF1DA;
  --bg-loud:      var(--od-vermelho);
  --bg-sun:       var(--od-amarelo);
  --bg-dark:      var(--od-preto);
  --fg1:          var(--od-preto);
  --fg2:          #3A3328;
  --fg3:          #6F6557;
  --fg-on-loud:   var(--od-areia);
  --fg-on-sun:    var(--od-preto);
  --fg-on-dark:   var(--od-areia);
  --line:         rgba(0,0,0,0.12);
  --line-strong:  rgba(0,0,0,0.85);

  /* ---------- Estados de sistema (ferramenta interna, ver design.md secao 8) ---------- */
  --st-erro:     var(--od-vermelho);
  --st-atencao:  var(--od-amarelo);
  --st-sucesso:  #2E7D5C;  /* PROVISORIO: nao existe verde no manual institucional */

  /* ---------- Type families ---------- */
  --font-display:    'Urbane', 'Urbanist', 'Manrope', system-ui, sans-serif;
  --font-body:       'Urbane', 'Urbanist', 'Manrope', system-ui, sans-serif;
  --font-condensed:  'Urbane Condensed', 'Barlow Condensed', 'Urbane', 'Urbanist', system-ui, sans-serif;
  --font-mono:       ui-monospace, 'JetBrains Mono', 'SFMono-Regular', monospace;

  /* ---------- Pesos Urbane ---------- */
  --w-thin:        100; /* @kind font */
  --w-extralight:  200; /* @kind font */
  --w-light:       300; /* @kind font */
  --w-regular:     400; /* @kind font — NAO existe peso 400 oficial na Urbane. Cai no fallback. Evitar. */
  --w-medium:      500; /* @kind font */
  --w-demibold:    600; /* @kind font */
  --w-bold:        700; /* @kind font */
  --w-heavy:       900; /* @kind font */

  /* ---------- Type scale ---------- */
  --fs-display-xl: clamp(64px, 8vw, 128px); /* @kind font */
  --fs-display-l:  clamp(48px, 6vw, 88px); /* @kind font */
  --fs-display-m:  clamp(36px, 4.4vw, 64px); /* @kind font */
  --fs-h1: 48px; /* @kind font */
  --fs-h2: 36px; /* @kind font */
  --fs-h3: 28px; /* @kind font */
  --fs-h4: 22px; /* @kind font */
  --fs-body-l: 18px; /* @kind font */
  --fs-body:   16px; /* @kind font */
  --fs-body-s: 14px; /* @kind font */
  --fs-caption:12px; /* @kind font */
  --fs-eyebrow:11px; /* @kind font */

  --lh-display: 0.95; /* @kind font */
  --lh-heading: 1.1; /* @kind font */
  --lh-body:    1.45; /* @kind font */

  --tracking-display: -0.02em; /* @kind font */
  --tracking-heading: -0.01em; /* @kind font */
  --tracking-body:    0; /* @kind font */
  --tracking-eyebrow: 0.12em; /* @kind font */

  /* ---------- Spacing (4/8 grid) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- Radii ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(125,64,22,0.08);
  --shadow-md: 0 4px 20px -8px rgba(125,64,22,0.18);
  --shadow-lg: 0 16px 48px -16px rgba(125,64,22,0.28);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-1: 160ms; /* @kind other */
  --dur-2: 240ms; /* @kind other */
  --dur-3: 360ms; /* @kind other */

  /* ---------- The "O" module ---------- */
  --o-module: 1em; /* @kind spacing */
}

/* ---------- Semantic element styles ---------- */
.od-h1, h1.od { font-family: var(--font-display); font-weight: var(--w-heavy); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--fg1); }
.od-h2, h2.od { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--fg1); }
.od-h3, h3.od { font-family: var(--font-display); font-weight: var(--w-demibold); font-size: var(--fs-h3); line-height: 1.15; color: var(--fg1); }
.od-display       { font-family: var(--font-display); font-weight: var(--w-heavy); font-size: var(--fs-display-l); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--fg1); }
.od-display-light { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--fs-display-l); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--fg1); }
.od-body          { font-family: var(--font-body); font-weight: var(--w-light); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); }
.od-body-medium   { font-family: var(--font-body); font-weight: var(--w-medium); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); }
.od-eyebrow       { font-family: var(--font-body); font-weight: var(--w-demibold); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg3); }
.od-caption       { font-family: var(--font-body); font-weight: var(--w-light); font-size: var(--fs-caption); color: var(--fg3); }

/* A wordmark e monocromatica e nao tem fill declarado no SVG (renderiza preto).
   Pra recolorir, aplique esta regra e defina color no container. */
.od-wordmark path { fill: currentColor; }