/* ============================================================
   Grandal — Design Tokens + Temas (claro/escuro)
   Espelha docs/site-grandal/DESIGN_SYSTEM.md
   ============================================================ */

/* --- Fonte de display: Utendo (marca).
   PENDÊNCIA: validar licença @font-face antes de publicar (INVENTARIO_MARCA §5).
   Corpo usa system stack (0 download). */
@font-face{font-family:"Utendo";src:url("../fonts/Utendo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Utendo";src:url("../fonts/Utendo-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Utendo";src:url("../fonts/Utendo-Semibold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Utendo";src:url("../fonts/Utendo-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Utendo";src:url("../fonts/Utendo-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Utendo";src:url("../fonts/Utendo-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* ---- Primitivas da marca (constantes nos dois temas) ---- */
  --navy-950:#0B1526; --navy-900:#101F34; --navy-800:#0A2350; --navy-700:#061D4F;
  --cyan-400:#26E5DE; --teal-500:#18C6B9; --white:#fff; --gray-300:#D3D3D3;
  --gray-400:#9FB0C4; --gray-500:#70839B; --gray-600:#4B5C73;
  --accent-grad:linear-gradient(120deg,#26E5DE,#18C6B9);
  --success:#18C6B9; --warning:#F5B14C; --error:#F0655B;

  /* ---- Tipografia ---- */
  --font-display:"Utendo","Sora","Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  --fs-display:clamp(2.6rem,1.8rem + 4vw,5rem);
  --fs-h1:clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
  --fs-h2:clamp(1.7rem,1.4rem + 1.6vw,2.5rem);
  --fs-h3:clamp(1.3rem,1.15rem + .7vw,1.6rem);
  --fs-lead:clamp(1.05rem,1rem + .4vw,1.3rem);
  --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.6; --tracking-label:.14em;

  /* ---- Espaçamento / layout ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --container:1200px; --container-narrow:820px; --gutter:clamp(16px,4vw,32px);
  --section-pad:clamp(64px,10vw,128px);
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px; --radius-card:18px;
  --shadow-1:0 1px 2px rgba(11,21,38,.14);
  --shadow-2:0 10px 34px rgba(11,21,38,.14);
  --shadow-glow:0 0 0 1px rgba(38,229,222,.35),0 8px 40px rgba(38,229,222,.15);
  --dur-fast:150ms; --dur:300ms; --dur-slow:600ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --stagger:80ms;

  /* ==================== TEMA CLARO (padrão) ==================== */
  color-scheme:light;
  --color-bg:#F4F7FC; --color-bg-deep:#E9F0F8;
  --surface-1:#FFFFFF; --surface-2:#EFF4FA; --surface-3:#E4EDF7; --surface-light:#FFFFFF;
  --color-text:#0F1E33; --color-text-muted:#4B5C73; --color-text-on-light:#101F34;
  --color-border:rgba(16,31,52,.12); --color-border-strong:rgba(16,31,52,.20);
  --accent:#0A8F86;                 /* teal escuro: contraste em superfície clara */
  --focus-ring:#0A8F86;
  --hero-bg:radial-gradient(1100px 620px at 82% -6%,rgba(38,229,222,.16),transparent 58%),radial-gradient(760px 560px at 6% 100%,rgba(16,31,52,.05),transparent 62%),linear-gradient(180deg,#FFFFFF,#F4F7FC);
  --header-bg:rgba(244,247,252,.85);
  --topbar-bg:#0B1526;              /* topbar institucional permanece escura (âncora de marca) */
  --split-before:#EEF2F8;
  --cta-bg:linear-gradient(155deg,#EAF2FB,#FFFFFF 72%);
  --shadow-2:0 12px 36px rgba(16,31,52,.10);
  --theme-meta:#F4F7FC;
}

/* ==================== TEMA ESCURO ==================== */
@media (prefers-color-scheme:dark){ :root:not([data-theme]){
  color-scheme:dark;
  --color-bg:#101F34; --color-bg-deep:#0B1526;
  --surface-1:#12233D; --surface-2:#16294A; --surface-3:#061D4F; --surface-light:#F4F7FB;
  --color-text:#EAF1F8; --color-text-muted:#9FB0C4;
  --color-border:rgba(255,255,255,.10); --color-border-strong:rgba(255,255,255,.18);
  --accent:#26E5DE; --focus-ring:#26E5DE;
  --hero-bg:radial-gradient(1100px 620px at 82% -6%,rgba(38,229,222,.14),transparent 58%),radial-gradient(760px 560px at 6% 100%,rgba(6,29,79,.85),transparent 62%),linear-gradient(180deg,#0B1526,#101F34);
  --header-bg:rgba(11,21,38,.82);
  --topbar-bg:#081020;
  --split-before:#0d1626;
  --cta-bg:linear-gradient(155deg,#061D4F,#101F34 70%);
  --shadow-2:0 10px 30px rgba(0,0,0,.35);
  --theme-meta:#0B1526;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#101F34; --color-bg-deep:#0B1526;
  --surface-1:#12233D; --surface-2:#16294A; --surface-3:#061D4F; --surface-light:#F4F7FB;
  --color-text:#EAF1F8; --color-text-muted:#9FB0C4;
  --color-border:rgba(255,255,255,.10); --color-border-strong:rgba(255,255,255,.18);
  --accent:#26E5DE; --focus-ring:#26E5DE;
  --hero-bg:radial-gradient(1100px 620px at 82% -6%,rgba(38,229,222,.14),transparent 58%),radial-gradient(760px 560px at 6% 100%,rgba(6,29,79,.85),transparent 62%),linear-gradient(180deg,#0B1526,#101F34);
  --header-bg:rgba(11,21,38,.82);
  --topbar-bg:#081020;
  --split-before:#0d1626;
  --cta-bg:linear-gradient(155deg,#061D4F,#101F34 70%);
  --shadow-2:0 10px 30px rgba(0,0,0,.35);
  --theme-meta:#0B1526;
}