/* ==========================================================================
   PCJ — Design tokens
   Fonte única da identidade visual. Os 5 HEX oficiais NÃO devem ser alterados.
   ========================================================================== */

:root {
  /* --- Cores oficiais da PCJ (obrigatórias) --- */
  --pcj-blue-primary: #1d6a9d;        /* cor-mãe: botões, links, títulos de destaque */
  --pcj-blue-secondary: #2f9de7;      /* realces, links em fundo escuro, gradientes */
  --pcj-green-primary: #1c9463;       /* verde sóbrio: ícones, checks, marcadores */
  --pcj-green-vibrant: #2dea9d;       /* acento vibrante em fundos escuros, CTAs de destaque */
  --pcj-green-complementary: #2ceb9d; /* par do vibrante: brilhos e fim de gradientes */

  /* --- Neutros (complementam, não substituem a paleta oficial) ---
     --ink é um azul-marinho neutro derivado do matiz do azul principal,
     usado em superfícies escuras e texto de alto contraste. */
  --ink: #0b2a40;
  --ink-2: #0f3550;
  --text: #22323e;
  --text-muted: #556673;   /* 5,9:1 sobre branco */
  --line: #dde6ec;
  --surface: #ffffff;
  --surface-2: #f4f8fa;
  --surface-3: #eaf1f5;

  /* Tons suaves das cores oficiais (para fundos de chips e cartões) */
  --blue-soft: color-mix(in srgb, var(--pcj-blue-primary) 10%, white);
  --green-soft: color-mix(in srgb, var(--pcj-green-primary) 11%, white);
  --green-tint: color-mix(in srgb, var(--pcj-green-vibrant) 9%, white);

  /* --- Papéis semânticos (mudam com o tema) --- */
  --heading: var(--ink);                     /* títulos e textos fortes */
  --accent-text: var(--pcj-blue-primary);    /* rótulos, números e links em azul */
  --color-primary: var(--pcj-blue-primary);
  --color-link: var(--pcj-blue-primary);
  --color-focus: var(--pcj-blue-primary);
  --color-accent: var(--pcj-green-vibrant);
  color-scheme: light;

  /* --- Gradientes de marca --- */
  --grad-brand: linear-gradient(100deg, var(--pcj-green-primary) 0%, var(--pcj-blue-primary) 100%);
  --grad-vibrant: linear-gradient(100deg, var(--pcj-green-vibrant) 0%, var(--pcj-green-complementary) 45%, var(--pcj-blue-secondary) 100%);
  --grad-dark: linear-gradient(150deg, var(--pcj-blue-primary) -20%, var(--ink) 65%);

  /* --- Tipografia --- */
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --fs-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --fs-hero: clamp(2.375rem, 1.5rem + 3.8vw, 4.25rem);

  /* --- Espaço, forma, sombra --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);

  --container: 74rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(11 42 64 / 0.06), 0 2px 8px rgb(11 42 64 / 0.05);
  --shadow: 0 10px 30px -12px rgb(11 42 64 / 0.18);
  --shadow-lg: 0 30px 60px -24px rgb(11 42 64 / 0.28);

  --header-h: 5.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* ==========================================================================
   Modo escuro — ativado por [data-theme="dark"] no <html>
   (definido antes da pintura por um script no <head>; ver theme.js)
   Os 5 HEX oficiais permanecem; mudam apenas neutros e tons suaves.
   ========================================================================== */
:root[data-theme="dark"] {
  --surface: #0e1c27;
  --surface-2: #0a151e;
  --surface-3: #132634;
  --text: #d3dee6;
  --text-muted: #9cb0be;   /* 8:1 sobre --surface */
  --line: #223848;

  --blue-soft: color-mix(in srgb, var(--pcj-blue-primary) 26%, #0e1c27);
  --green-soft: color-mix(in srgb, var(--pcj-green-primary) 24%, #0e1c27);
  --green-tint: color-mix(in srgb, var(--pcj-green-vibrant) 7%, #0e1c27);

  --heading: #f1f6f9;
  --accent-text: var(--pcj-blue-secondary);   /* #2f9de7: 6:1 sobre o fundo escuro */
  --color-link: var(--pcj-blue-secondary);
  --color-focus: var(--pcj-green-vibrant);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.2);
  --shadow: 0 10px 30px -12px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 30px 60px -24px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}