/* =====================================================================
   tokens.css · Agência 24por7 · Sistema visual v3
   ---------------------------------------------------------------------
   Única fonte de verdade para cor, luz, vidro, tipografia, espaço, raio,
   sombra e movimento. ÚNICO arquivo onde pode existir px, hex ou ms.
   Regras: docs/design/SISTEMA.md · Teste: scripts/design-check.mjs

   O material da 24por7 é VIDRO sobre LUZ. A página inteira fica sobre
   uma atmosfera (luz em movimento lento + grão), e todo painel é vidro
   com a mesma receita. A foto existe só no hero.
   ===================================================================== */

/* ---------- 1. COR E LUZ · tema dia (padrão) ---------- */
:root,
[data-tema="dia"] {
  color-scheme: dark;

  /* Atmosfera v3: gradiente verde-água → petróleo, três luzes, névoas brancas, formas de vidro */
  --fundo:        #1d4f4a;                                                     /* cor sólida de apoio (scrollbar, fallback) */
  --atmosfera:    linear-gradient(160deg, #22494f 0%, #1d4f4a 48%, #14564c 100%);
  --luz-1:        rgba(139, 255, 169, .16);   /* menta, alto à esquerda */
  --luz-2:        rgba(255, 226, 180, .30);   /* areia quente, alto à direita (o contraponto do verde) */
  --luz-3:        rgba(44, 232, 196, .18);    /* água, embaixo */
  --nevoa-1:      rgba(255, 255, 255, .16);   /* branco entre os tons: o "ar" */
  --nevoa-2:      rgba(255, 255, 255, .10);
  --nevoa-3:      rgba(255, 255, 255, .06);
  --nevoa-quente: rgba(255, 226, 180, .12);
  --grao:         .045;
  --veu:          rgba(13, 20, 17, .28);      /* véu escuro: UMA seção por página */
  --respiro-a:    rgba(255, 240, 215, .07);   /* faixa de respiro clara e quente: UMA por página */
  --respiro-b:    rgba(255, 255, 255, .06);
  --forma-a:      rgba(255, 255, 255, .045);  /* formas orgânicas de vidro */
  --forma-b:      rgba(255, 255, 255, .025);
  --forma-borda:  rgba(255, 255, 255, .10);
  --forma-luz:    rgba(255, 255, 255, .18);
  --forma-sombra: 0 30px 80px -40px rgba(0, 0, 0, .6);

  /* Vidro: a receita única de todo painel */
  --vidro:         rgba(22, 32, 28, .18);
  --vidro-forte:   rgba(18, 26, 23, .36);
  --vidro-borda:   rgba(255, 255, 255, .22);
  --vidro-luz:     rgba(255, 255, 255, .5);   /* linha de luz no topo */
  --vidro-reflexo: rgba(255, 255, 255, .09);   /* reflexo no canto */
  --vidro-blur:    28px;
  --vidro-sat:     160%;

  /* Linha e texto */
  --linha:   rgba(255, 255, 255, .12);
  --texto:   #f4f7f5;
  --texto-2: rgba(244, 247, 245, .78);
  --texto-3: rgba(244, 247, 245, .56);

  /* Acento único */
  --acento:       #8BFFA9;
  --acento-texto: #062a1c;
  --acento-brilho: 0 0 24px -4px rgba(139, 255, 169, .55);

  /* CTA primário */
  --cta-fundo:  #f4f7f5;
  --cta-texto:  #0b1f1a;
  --cta-sombra: 0 14px 30px -14px rgba(0, 0, 0, .7);

  /* Estado "exemplo" (números fictícios). Rosa não é acento. */
  --exemplo:       #FF4F9A;
  --exemplo-suave: #FFD6E8;
  --exemplo-texto: #3b0b22;

  --erro: #ff7a7a;
  --foco: var(--acento);
  --sombra-card: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

/* ---------- 1b. COR E LUZ · tema noite ---------- */
[data-tema="noite"] {
  --fundo:        #0a1430;
  --atmosfera:    linear-gradient(160deg, #060b1f 0%, #0a1430 55%, #0b1d2e 100%);
  --luz-1:        rgba(0, 255, 157, .18);
  --luz-2:        rgba(175, 140, 255, .16);   /* lilás: o quente do tema noite */
  --luz-3:        rgba(44, 120, 232, .30);
  --nevoa-1:      rgba(255, 255, 255, .10);
  --nevoa-2:      rgba(255, 255, 255, .07);
  --nevoa-3:      rgba(255, 255, 255, .04);
  --nevoa-quente: rgba(175, 140, 255, .10);
  --grao:         .045;
  --veu:          rgba(3, 7, 20, .3);
  --respiro-a:    rgba(200, 190, 255, .06);
  --respiro-b:    rgba(255, 255, 255, .05);
  --forma-a:      rgba(255, 255, 255, .04);
  --forma-b:      rgba(255, 255, 255, .02);
  --forma-borda:  rgba(255, 255, 255, .09);
  --forma-luz:    rgba(255, 255, 255, .16);
  --forma-sombra: 0 30px 80px -40px rgba(0, 0, 0, .8);

  --vidro:         rgba(8, 16, 40, .2);
  --vidro-forte:   rgba(6, 12, 32, .4);
  --vidro-borda:   rgba(255, 255, 255, .2);
  --vidro-luz:     rgba(255, 255, 255, .4);
  --vidro-reflexo: rgba(0, 255, 157, .08);
  --vidro-blur:    28px;
  --vidro-sat:     160%;

  --linha:   rgba(255, 255, 255, .12);
  --texto:   #eef1f6;
  --texto-2: rgba(238, 241, 246, .78);
  --texto-3: rgba(238, 241, 246, .56);

  --acento:        #00ff9d;
  --acento-texto:  #062a1c;
  --acento-brilho: 0 0 28px -4px rgba(0, 255, 157, .6);

  --cta-fundo:  linear-gradient(90deg, #00ff9d, #2CE8C4);
  --cta-texto:  #062a1c;
  --cta-sombra: 0 0 30px -6px rgba(0, 255, 157, .7);

  --exemplo:       #FF4F9A;
  --exemplo-suave: #FFD6E8;
  --exemplo-texto: #3b0b22;

  --erro: #ff7a7a;
  --foco: var(--acento);
  --sombra-card: 0 30px 60px -30px rgba(0, 0, 0, .8);
}

/* ---------- 2. TIPOGRAFIA · 2 famílias, 6 tamanhos, 3 pesos ---------- */
:root {
  --fonte-texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono:  "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);  /* H1 · 40 → 68 */
  --t-titulo:  clamp(1.875rem, 1.3rem + 2vw, 2.75rem);  /* H2 · 30 → 44 */
  --t-sub:     1.25rem;      /* H3 · 20 */
  --t-corpo:   1.0625rem;    /* parágrafo · 17 */
  --t-pequeno: 0.9375rem;    /* nav, botão · 15 */
  --t-legenda: 0.8125rem;    /* tag, rodapé, feed mono · 13 */
  --t-menu:    1.25rem;      /* menu celular · 20 */

  --peso-regular: 400;
  --peso-forte:   700;
  --peso-titulo:  800;

  --lh-titulo: 1.04;
  --lh-sub:    1.25;
  --lh-corpo:  1.55;
  --tracking-titulo: -0.025em;
  --medida: 58ch;
}

/* ---------- 3. ESPAÇO · múltiplos de 8, o nome é o px ---------- */
:root {
  --esp-4: 4px;  --esp-8: 8px;  --esp-12: 12px; --esp-16: 16px; --esp-24: 24px;
  --esp-32: 32px; --esp-48: 48px; --esp-64: 64px; --esp-96: 96px; --esp-128: 128px;

  --largura-max: 1200px;
  --margem:      20px;
  --secao-y:     80px;            /* vão ENTRE duas seções; cada .s-secao leva metade em cima e metade embaixo */
  --grade-gap:   var(--esp-16);
  --nav-altura:  64px;
  --alvo-toque:  48px;
  --marca-altura: 46px;        /* logotipo na nav (nome com 22 px) */
  --marca-altura-mobile: 40px;
  /* roteiro "Como funciona": palco de 1200 × 790; coordenadas são números sem unidade × --unidade-palco */
  --roteiro-largura: 1200px;
  --roteiro-altura:  790px;
  --roteiro-cartao:  260px;
  --unidade-palco:   1px;
}
@media (min-width: 768px)  { :root { --margem: 32px; --secao-y: 112px;  --grade-gap: var(--esp-24); } }
@media (min-width: 1024px) { :root { --margem: 48px; --secao-y: 160px; } }

/* ---------- 4. RAIO, BORDA, FOCO ---------- */
:root {
  --raio-s:      10px;    /* input, tag, miniatura */
  --raio-m:      24px;    /* card, painel */
  --raio-pilula: 999px;   /* botão, nav, status */
  --borda:       1px;
  --foco-largura: 2px;
  --foco-offset:  3px;
}

/* ---------- 5. MOVIMENTO · duas durações, uma curva, uma deriva ---------- */
:root {
  --dur-curta: 160ms;
  --dur-media: 320ms;
  --dur-deriva: 48s;      /* a luz da atmosfera */
  --dur-forma:  144s;     /* uma volta das formas de vidro */
  --suave: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-curta: 0ms; --dur-media: 0ms; --dur-deriva: 0s; }
}

/* ---------- 6. CAMADAS ---------- */
:root { --z-atmosfera: 0; --z-conteudo: 1; --z-nav: 50; --z-widget: 60; --z-modal: 100; }