/* =========================================================
   CORREIO JUNDIAÍ — Design Tokens (CSS Custom Properties)
   v1.0 · maio/2026
   Cole este arquivo em qualquer projeto (WordPress, React,
   Vue, HTML puro). Use as variáveis em vez de hex soltos.
   ========================================================= */

:root {
  /* ---------- BRAND COLORS ---------- */
  --cj-verde-mata:        #0E5C2C;  /* primária — fundo institucional */
  --cj-verde-floresta:    #0A4321;  /* hover / states escuros */
  --cj-verde-folha:       #1F7A3F;  /* links em cinza, badges sucesso */
  --cj-verde-musgo:       #06321A;  /* fundo profundo, footer */

  --cj-ambar:             #F5A623;  /* acento — CTAs, destaques */
  --cj-ambar-claro:       #F8C062;  /* hover claro, ícones inativos */
  --cj-ambar-escuro:      #C7811A;  /* hover do botão âmbar */

  --cj-creme:             #F6F1E1;  /* fundo claro, papel-jornal */
  --cj-creme-suave:       #FBF8EE;
  --cj-areia:             #E7E0CB;  /* divisores em fundo creme */

  --cj-tinta:             #131A14;  /* texto principal (dark) */
  --cj-tinta-suave:       #2A332C;
  --cj-cinza-pedra:       #5E6660;  /* texto secundário */
  --cj-cinza-claro:       #B7BBB6;  /* divisores, placeholders */

  --cj-branco:            #FFFFFF;
  --cj-vermelho-urgente:  #D1372C;  /* tag "URGENTE" — uso raro */

  /* ---------- SEMANTIC TOKENS ---------- */
  --color-bg:             var(--cj-creme);
  --color-bg-elevated:    var(--cj-branco);
  --color-bg-inverse:     var(--cj-verde-mata);
  --color-bg-deep:        var(--cj-verde-musgo);

  --color-fg:             var(--cj-tinta);
  --color-fg-muted:       var(--cj-cinza-pedra);
  --color-fg-inverse:     var(--cj-creme);

  --color-accent:         var(--cj-ambar);
  --color-accent-hover:   var(--cj-ambar-escuro);
  --color-link:           var(--cj-verde-folha);
  --color-link-hover:     var(--cj-verde-floresta);

  --color-border:         var(--cj-areia);
  --color-border-strong:  var(--cj-tinta);
  --color-divider:        rgba(19, 26, 20, 0.12);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Anton", "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:   "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Escala tipográfica (fluida, base 16px) */
  --text-xs:    0.75rem;   /* 12 */
  --text-sm:    0.875rem;  /* 14 */
  --text-base:  1rem;      /* 16 */
  --text-md:    1.125rem;  /* 18 */
  --text-lg:    1.25rem;   /* 20 */
  --text-xl:    1.5rem;    /* 24 */
  --text-2xl:   1.875rem;  /* 30 */
  --text-3xl:   2.25rem;   /* 36 */
  --text-4xl:   3rem;      /* 48 */
  --text-5xl:   clamp(2.5rem, 4vw + 1rem, 4.5rem);  /* hero */
  --text-6xl:   clamp(3.5rem, 6vw + 1rem, 7rem);    /* manchete */

  /* Pesos */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* Line-heights */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-headline: -0.02em;
  --tracking-eyebrow:  0.14em;

  /* ---------- SPACING (escala 4px) ---------- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---------- LAYOUT ---------- */
  --max-w-prose:   68ch;
  --max-w-content: 1120px;
  --max-w-wide:    1320px;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  /* O "balão" da marca tem cantos arredondados com um "rabicho" */
  --radius-balao: 18px 18px 18px 4px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 67, 33, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 67, 33, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 67, 33, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 67, 33, 0.14);
  --shadow-focus: 0 0 0 3px rgba(245, 166, 35, 0.45);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast: 140ms;
  --duration-med:  240ms;
  --duration-slow: 420ms;

  /* ---------- Z-INDEX ---------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* Modo escuro institucional — invertendo bg/fg sem perder a marca */
[data-theme="dark"] {
  --color-bg:          var(--cj-verde-musgo);
  --color-bg-elevated: var(--cj-verde-mata);
  --color-fg:          var(--cj-creme);
  --color-fg-muted:    rgba(246, 241, 225, 0.7);
  --color-border:      rgba(246, 241, 225, 0.14);
  --color-link:        var(--cj-ambar);
  --color-link-hover:  var(--cj-ambar-claro);
}