/* Hallmark · tokens (landing) · fonte da verdade: apps/web/src/theme/tokens.css
 *
 * A landing é estática e não passa pelo bundler do app, então os tokens são espelhados aqui em
 * hex/rem em vez de importados. Os valores são os MESMOS do painel — quem clica do anúncio para o
 * produto não deve sentir troca de produto. Ao mexer na identidade, mexa lá primeiro e espelhe aqui.
 *
 * Extensões exclusivas da landing (não existem no app, e por bom motivo — o app não tem display):
 *   --text-display, --text-display-s, --measure, --page-gutter, --space-2xl/3xl
 */

:root {
  /* --- Planos de superfície (idênticos ao app) --- */
  --color-paper: #ffffff;        /* oklch(1 0 0)          — painel elevado */
  --color-paper-sunken: #f1f5f5; /* oklch(.968 .004 200)  — chão da página */
  --color-paper-inset: #f6f8f8;  /* oklch(.978 .003 200)  — recuo, campo */

  /* --- Tinta --- */
  --color-ink: #151c1e;          /* 17.3:1 sobre paper */
  --color-ink-muted: #555f63;    /* 6.6:1  sobre paper */

  /* --- Traço --- */
  --color-rule: #dbe3e3;
  --color-rule-soft: #e8eded;

  /* --- Acento por tema (nenhum teal atinge 4.5:1 nos dois fundos — daí o par) --- */
  --color-accent: #117874;       /* 5.3:1 com texto branco por cima */
  --color-accent-ink: #ffffff;   /* tinta sobre o acento */
  --color-accent-soft: #e2f0ef;
  --color-focus: #117874;
  --color-erro: #b3261e;         /* 6.5:1 sobre painel claro */

  /* --- Tipografia --- */
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Dois pesos, só. Decisão do reskin: hierarquia por tamanho e cor, nunca por peso intermediário. */
  --weight-normal: 400;
  --weight-bold: 600;

  /* Escala do app */
  --text-meta: 0.75rem;
  --text-label: 0.875rem;
  --text-body: 1rem;
  --text-subheading: 1.125rem;
  --text-heading: 1.5rem;
  --text-stat: 2rem;

  /* Extensão da landing — o app nunca precisa de display; uma página de entrada precisa. */
  --text-display-s: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --text-display: clamp(2.25rem, 1.3rem + 4.2vw, 4rem);

  /* --- Espaço (4pt, igual ao app; 2xl/3xl são extensão da landing) --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3.5rem;
  --space-3xl: 6rem;

  /* --- Raio por elevação (idêntico ao app) --- */
  --radius-control: 0.375rem;
  --radius-surface: 0.625rem;
  --radius-overlay: 0.875rem;

  /* --- Movimento --- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Medida e goteira --- */
  --measure: 34rem;
  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);

  --shadow-raised: 0 1px 2px rgba(21, 28, 30, 0.06);
}

/* Escuro do sistema — só redefine tokens, nunca estiliza componente aqui.
   Guardado por :not([data-theme="light"]) para a escolha explícita do usuário vencer o SO. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #1a1e20;
    --color-paper-sunken: #0a0a0a;
    --color-paper-inset: #121616;
    --color-ink: #edf2f2;
    --color-ink-muted: #a3adaf;
    --color-rule: #2c3234;
    --color-rule-soft: #22282a;
    --color-accent: #3ec7c0;
    --color-accent-ink: #06201f;
    --color-accent-soft: #12302f;
    --color-focus: #3ec7c0;
    --color-erro: #f2b8b5;       /* 9.8:1 sobre painel escuro — o vermelho do claro dá 2.6:1 ali */
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}

/* Escolha explícita de tema escuro vence o SO claro. */
:root[data-theme="dark"] {
  --color-paper: #1a1e20;
  --color-paper-sunken: #0a0a0a;
  --color-paper-inset: #121616;
  --color-ink: #edf2f2;
  --color-ink-muted: #a3adaf;
  --color-rule: #2c3234;
  --color-rule-soft: #22282a;
  --color-accent: #3ec7c0;
  --color-accent-ink: #06201f;
  --color-accent-soft: #12302f;
  --color-focus: #3ec7c0;
  --color-erro: #f2b8b5;         /* 9.8:1 sobre painel escuro */
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5);
}