/* =========================================================
   tokens.css — variáveis de design da EB Webstudio
   Toda cor, fonte, espaçamento e tempo do site sai daqui.
   ========================================================= */

:root {
  /* ---------- Paleta ---------- */
  --carvao:  #0E0E0C;  /* fundo */
  --grafite: #171715;  /* superfícies, cards */
  --painel:  #141412;  /* painéis tipo terminal */
  --linha:   #2A2A27;  /* bordas e divisórias */
  --pedra:   #8A8A85;  /* texto secundário, labels */
  --nevoa:   #B4B3AD;  /* parágrafos */
  --papel:   #F2F1EC;  /* texto principal */
  --fosforo: #B8F25C;  /* destaque */

  /* Cor de destaque — troque SÓ esta linha para testar alternativas:
     ciano #5CF2D6 · âmbar #F2B85C · coral #FF7A59 */
  --accent: var(--fosforo);
  --on-accent: var(--carvao);      /* texto sobre botão de destaque */
  --danger: #FF7A59;               /* erros de formulário (coral) */

  /* Grid técnico do fundo */
  --grid-line: #181816;
  --grid-size: 64px;

  /* Papéis semânticos (use estes nos componentes) */
  --bg: var(--carvao);
  --surface: var(--grafite);
  --surface-terminal: var(--painel);
  --border: var(--linha);
  --text: var(--papel);
  --text-body: var(--nevoa);
  --text-muted: var(--pedra);

  /* ---------- Tipografia ---------- */
  --font-sans:  "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --tracking-title: -0.035em;   /* títulos */
  --tracking-mono: 0.01em;      /* labels mono */

  /* Escala fluida (mínimo em 390px → máximo em 1440px) */
  --fs-xs:   0.75rem;                                   /* 12px — labels pequenas */
  --fs-sm:   0.8125rem;                                 /* 13px — menu, terminal */
  --fs-base: 1rem;                                      /* 16px */
  --fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* parágrafo do hero */
  --fs-h2:   clamp(2rem, 1.2rem + 3.2vw, 4rem);
  --fs-hero: clamp(2.6rem, 1.1rem + 6.4vw, 6.25rem);    /* título principal (~42px → 100px) */

  --lh-tight: 1.02;
  --lh-body: 1.6;

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

  /* Layout */
  --container: 1280px;
  --gutter: clamp(16px, 5vw, 72px);   /* margem lateral (16px no celular) */
  --nav-h: 72px;

  /* ---------- Formas ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --blink: 1.05s;     /* piscar do cursor */
}