/*
  MazeLabs — design tokens (direção "claude-design")
  Fonte única de cor, tipografia, raio, sombra, textura e movimento do site.
  Documentação: design-system/DESIGN_SYSTEM.md. Guardrail: `npm run check` falha se
  houver cor literal (#hex, rgb) fora de uma declaração de custom property.

  Linguagem visual:
    • Chumbo azulado (nunca preto puro) alternando com branco gelo.
    • Azul é a cor de ação. Dourado é o ponto de chegada ("ação", resultado).
    • Frio → quente: degradês vão do azul/cinza frio ao dourado/cinza quente.
    • Textura de pontos bem discreta nas superfícies escuras.
    • O rosa fica só no logotipo.

  Camadas:
    1. Primitivos   (--ink-900, --blue-600…) → a paleta.
    2. Semânticos   (--text, --surface, --accent…) → o que cada cor faz.
       --accent-text muda em superfícies escuras (ver site.css, "Contexto escuro").
    3. Aliases      (--ink, --pink, --paper…) → nomes legados do CSS existente.
*/
:root{
  /* ── 1. Primitivos de cor ─────────────────────────────── */

  /* Ink: chumbo azulado, do mais profundo ao mais claro */
  --ink-950:#1f2228;
  --ink-900:#262a31;   /* base: header, hero, seções escuras */
  --ink-850:#2a2e36;
  --ink-800:#30353e;   /* cartões sobre chumbo */
  --ink-700:#3a3f49;
  --ink-600:#414753;   /* divisórias opacas sobre chumbo */

  /* Gray frio: texto e ícones */
  --gray-900:#1d1e22;  /* texto principal sobre gelo */
  --gray-800:#33363d;
  --gray-700:#444851;
  --gray-600:#555962;
  --gray-500:#666a73;  /* texto secundário sobre gelo */
  --gray-450:#8a8e97;
  --gray-400:#a9adb5;
  --gray-300:#c3c5cc;  /* texto secundário sobre chumbo */
  --gray-200:#d6d8dd;

  /* Branco gelo */
  --line-200:#dfe3e7;  /* bordas sobre gelo */
  --paper-200:#e9edf2; /* superfície rebaixada, seção do método */
  --paper-100:#f3f5f7; /* fundo do site */
  --white:#fff;

  /* Azul: ação */
  --blue-100:#e6ecfb;
  --blue-200:#cddcfa;
  --blue-300:#8fb4ff;  /* texto de destaque sobre chumbo */
  --blue-400:#4f7fe8;  /* hover sobre claro */
  --blue-600:#2456d6;  /* AÇÃO: botões, seleção, links */
  --blue-700:#1f4fc2;  /* texto de destaque sobre gelo */
  --blue-950:#13233f;  /* fundos escuros tingidos */

  /* Dourado: chegada */
  --gold-300:#f3c95a;
  --gold-500:#e0a92b;
  --gold-700:#8a6400;  /* dourado como texto sobre gelo */

  /* Cinzas de temperatura (degradê frio → quente) */
  --cool-gray:#23272e;
  --warm-gray:#35302b;

  /* Marca */
  --brand-pink:#ee159d; /* só o logotipo usa esta cor */

  /* Acentos de páginas específicas */
  --yellow-400:#ffd24f; /* anel de foco */
  --lime-400:#c9f35f;   /* destaques de Produtos */
  --lime-600:#9edc62;
  --violet-500:#7765ff; /* variação de placeholder */
  --amber-400:#ffcc12;  /* fundo da arte do Game Saúde */
  --amber-500:#f3a900;
  --blue-900:#102b4a;
  --cyan-400:#58d0ff;
  --red-700:#a4003f;    /* erro de formulário */
  --stage-3d:#b8b8b6;   /* fundo neutro do visualizador 3D */

  /* Transparências */
  --white-a04:#ffffff08;
  --white-a07:#ffffff0b; /* pontos da textura (bem discreta) */
  --white-a15:#ffffff26; /* divisórias sobre chumbo */
  --white-a24:#ffffff3d; /* bordas de controles sobre chumbo */
  --white-a33:#ffffff55; /* bordas fortes sobre chumbo */
  --white-a92:#ffffffeb; /* etiquetas sobre imagem */
  --ink-a96:rgba(38,42,49,.96); /* header fixo */
  --ink-a85:#262a31d9;   /* scrim: rótulos sobre mídia */
  --ink-a90:#262a31e8;
  --ink-a55:#262a318a;
  --ink-a00:#262a3100;
  --shadow-color:#1d1e2240;
  --shadow-soft-color:#1d1e2214;

  /* ── 2. Semânticos ────────────────────────────────────── */
  --text:var(--gray-900);
  --text-muted:var(--gray-500);
  --text-on-dark:var(--white);
  --text-on-dark-muted:var(--gray-300);
  --surface:var(--paper-100);
  --surface-raised:var(--white);
  --surface-sunken:var(--paper-200);
  --surface-dark:var(--ink-900);
  --surface-dark-raised:var(--ink-800);
  --border:var(--line-200);
  --border-on-dark:var(--white-a15);
  --accent:var(--blue-600);          /* preenchimento: botão, chip ativo */
  --accent-hover:var(--blue-400);
  --on-accent:var(--white);
  --accent-text:var(--blue-700);     /* texto de destaque; vira blue-300 no escuro */
  --accent-ring:color-mix(in srgb,var(--blue-600) 18%,transparent);
  --arrival:var(--gold-500);         /* chegada: último degrau, "Ação" */
  --arrival-text:var(--gold-700);
  --focus-ring:var(--yellow-400);
  --danger:var(--red-700);
  --gradient-cool-warm:linear-gradient(0deg,var(--cool-gray) 0%,color-mix(in srgb,var(--cool-gray),var(--warm-gray)) 55%,var(--warm-gray) 100%);
  --gradient-info-action:linear-gradient(90deg,var(--line-200),var(--blue-600) 55%,var(--gold-500));
  --texture-dots:radial-gradient(var(--white-a07) 1px,transparent 1.4px);
  --texture-dots-light:radial-gradient(color-mix(in srgb,var(--gray-900) 8%,transparent) 1px,transparent 1.4px);
  --texture-size:6px 6px;

  /* ── Tipografia ───────────────────────────────────────── */
  --font-display:"Schibsted Grotesk",Arial,sans-serif;
  --font-body:"Figtree",Arial,sans-serif;
  --tracking-display:-.02em;
  --tracking-kicker:.08em;
  --text-h1:clamp(2rem,3.4vw,3rem);
  --text-h2:clamp(1.6rem,2.3vw,1.875rem);
  --text-h3:1.25rem;
  --text-lead:1.0625rem;
  --text-body:1rem;
  --text-small:.875rem;
  --text-label:.8125rem;

  /* ── Forma ────────────────────────────────────────────── */
  --radius-xs:8px;
  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-pill:999px;
  --shadow-pop:0 24px 65px var(--shadow-color);
  --shadow-soft:0 10px 24px var(--shadow-soft-color);
  --shadow-lift:0 14px 30px var(--shadow-soft-color);

  /* ── Layout ───────────────────────────────────────────── */
  --shell-max:1200px;
  --shell-gutter:48px;
  /* Breakpoints (media queries não aceitam var): 900px tablet, 620px celular */

  /* ── Movimento ────────────────────────────────────────── */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --duration-fast:.2s;
  --duration-base:.35s;
  --rotator-interval:8000; /* ms entre slides da vitrine (lido por site.js) */

  /* ── 3. Aliases legados (não remover sem migrar o CSS) ── */
  --ink:var(--ink-900);
  --ink2:var(--ink-800);
  --paper:var(--paper-100);
  --muted:var(--gray-500);
  --line:var(--line-200);
  --pink:var(--accent);      /* legado: o antigo rosa agora é a cor de ação */
  --yellow:var(--yellow-400);
  --lime:var(--lime-400);
  --radius:var(--radius-lg);
}