/* ============================================================
   EGBÉ YPÒ ÒRUN — Design Tokens v2
   Light-first · DM Sans dominant · WCAG 2.1 AA
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     CORES — Paleta Base
     ---------------------------------------------------------- */
  --color-brown-dark:    #481C05;
  --color-brown:         #7A431F;
  --color-green:         #AFCF1E;   /* acentos, botões, ícones */
  --color-green-dark:    #2F942E;   /* texto grande sobre claro (3:1+) */
  --color-green-text:    #1A6519;   /* texto pequeno sobre claro (6.5:1) */
  --color-cream:         #F6F0D8;
  --color-white:         #FFFFFF;

  /* Destaques — usar com muita moderação */
  --color-yellow:        #F8EF1B;
  --color-purple:        #740682;

  /* ----------------------------------------------------------
     SUPERFÍCIES — Sistema light-first
     Hero e footer: escuro.
     Tudo o mais: branco ou off-white quente.
     ---------------------------------------------------------- */
  --bg-page:       #FFFFFF;          /* fundo padrão de página */
  --bg-subtle:     #F9F7F2;          /* seção de quebra — off-white quente */
  --bg-cream:      #F6F0D8;          /* editorial: citações, callouts, CTA */
  --bg-dark:       #481C05;          /* hero, footer, máx. 1 CTA por página */
  --bg-mid:        #7A431F;          /* bordas, elementos de apoio */

  /* ----------------------------------------------------------
     TEXTO
     ---------------------------------------------------------- */
  --text-on-light:    #1C1008;       /* quase-preto quente — máx. contraste */
  --text-secondary:   #5A3A25;       /* texto de suporte, legendas */
  --text-muted:       #8B6045;       /* texto desabilitado, placeholders */
  --text-on-dark:     #F6F0D8;       /* texto sobre fundo escuro */

  /* ----------------------------------------------------------
     BORDAS
     ---------------------------------------------------------- */
  --border-light:     rgba(72, 28, 5, 0.10);
  --border-mid:       rgba(72, 28, 5, 0.20);
  --border-dark:      rgba(246, 240, 216, 0.15);
  --border-green:     rgba(175, 207, 30, 0.40);

  /* ----------------------------------------------------------
     ACENTOS — Papéis semânticos
     ---------------------------------------------------------- */
  --accent:           var(--color-green);       /* botão primário, CTA */
  --accent-dark:      var(--color-green-dark);  /* texto grande sobre claro */
  --accent-text:      var(--color-green-text);  /* texto/ícone sobre claro */
  --accent-on-dark:   var(--color-green);       /* ícone/label sobre escuro */

  /* ----------------------------------------------------------
     TIPOGRAFIA — DM Sans como fonte de interface
     Cormorant Garamond: apenas editorial (citações, destaques)
     ---------------------------------------------------------- */
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;

  /* Compat. com código existente */
  --font-body:    var(--font-ui);
  --font-heading: var(--font-ui);
  --font-display: var(--font-ui);

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Escala fluida de tipo */
  --text-xs:    clamp(0.75rem,  1.5vw,  0.8125rem);
  --text-sm:    clamp(0.875rem, 2vw,    0.9375rem);
  --text-base:  clamp(1rem,     2.5vw,  1.0625rem);
  --text-lg:    clamp(1.125rem, 3vw,    1.25rem);
  --text-xl:    clamp(1.25rem,  3.5vw,  1.5rem);
  --text-2xl:   clamp(1.5rem,   4vw,    2rem);
  --text-3xl:   clamp(2rem,     5vw,    2.75rem);
  --text-4xl:   clamp(2.5rem,   6vw,    3.5rem);
  --text-hero:  clamp(3rem,     8vw,    5.5rem);

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.65;
  --leading-loose:  1.85;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ----------------------------------------------------------
     ESPAÇAMENTO
     ---------------------------------------------------------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  --section-gap:   clamp(5rem, 10vw, 8rem);
  --content-gap:   clamp(2rem, 4vw,  4rem);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --max-width:       1200px;
  --max-width-text:  680px;
  --max-width-wide:  1400px;
  --container-px:    clamp(1.5rem, 5vw, 4rem);

  /* ----------------------------------------------------------
     BORDAS E SOMBRAS
     ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  --shadow-xs:  0 1px 2px rgba(28, 16, 8, 0.06);
  --shadow-sm:  0 2px 8px rgba(28, 16, 8, 0.08);
  --shadow-md:  0 4px 16px rgba(28, 16, 8, 0.10);
  --shadow-lg:  0 8px 32px rgba(28, 16, 8, 0.12);
  --shadow-xl:  0 16px 48px rgba(28, 16, 8, 0.14);

  /* ----------------------------------------------------------
     TRANSIÇÕES
     ---------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-slower: 600ms ease;

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}