/* CaisLab ID 0.3 — GERADO por infra/scripts/build-tokens.mjs a partir de src/data/tokens.json.
 * Não edite à mão: altere o JSON e rode `npm run tokens`. */
:root {
  /* Primitivas */
  --cl-mar-profundo: #070a0d;
  --cl-carta-nautica: #f5f2e8;
  --cl-casco: #34404c;
  --cl-farol: #22c55e;
  --cl-horizonte: #2ccfff;

  /* Tons de apoio (OKLCH, mesmo matiz) */
  --cl-mar-profundo-100: #e7ecf1;
  --cl-mar-profundo-300: #b3b8bd;
  --cl-mar-profundo-500: #6e7276;
  --cl-mar-profundo-700: #2f3337;
  --cl-mar-profundo-900: #070a0d;
  --cl-carta-nautica-100: #f5f2e8;
  --cl-carta-nautica-300: #e1ded3;
  --cl-carta-nautica-500: #c1beb3;
  --cl-carta-nautica-700: #89867d;
  --cl-carta-nautica-900: #57554e;
  --cl-casco-100: #e1e9f0;
  --cl-casco-300: #95a0ab;
  --cl-casco-500: #34404c;
  --cl-casco-700: #242f3b;
  --cl-casco-900: #131e29;
  --cl-farol-100: #dcfce1;
  --cl-farol-300: #a0edaf;
  --cl-farol-500: #22c55e;
  --cl-farol-700: #0a7e38;
  --cl-farol-900: #065e28;
  --cl-horizonte-100: #e0f6ff;
  --cl-horizonte-300: #9de4ff;
  --cl-horizonte-500: #2ccfff;
  --cl-horizonte-700: #057695;
  --cl-horizonte-900: #045870;
  --cl-erro-100: #ffedec;
  --cl-erro-300: #ffc8c4;
  --cl-erro-500: #e5484d;
  --cl-erro-700: #cd2f3a;
  --cl-erro-900: #a50420;
  --cl-aviso-100: #ffefdc;
  --cl-aviso-300: #fece90;
  --cl-aviso-500: #f5a623;
  --cl-aviso-700: #966205;
  --cl-aviso-900: #704803;

  /* Espaçamento (base 8px) */
  --cl-space-1: 4px;
  --cl-space-2: 8px;
  --cl-space-3: 12px;
  --cl-space-4: 16px;
  --cl-space-5: 24px;
  --cl-space-6: 32px;
  --cl-space-7: 48px;
  --cl-space-8: 64px;

  /* Forma */
  --cl-grid: 8px;
  --cl-radius-pill: 999px;
  --cl-radius-card: 16px;
  --cl-radius-input: 12px;

  /* Layout */
  --cl-container: 1400px;
  --cl-gutter-base: 24px;
  --cl-gutter-sm: 40px;
  --cl-gutter-lg: 64px;
  --cl-measure: 68ch;
  /* Breakpoints (referência; media queries não leem variáveis): sm 640px · lg 1024px */

  /* Controles */
  --cl-control-sm: 32px;
  --cl-control-md: 40px;
  --cl-control-lg: 48px;
  --cl-touch-min: 44px;

  /* Movimento */
  --cl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cl-dur-fast: 150ms;
  --cl-dur-base: 400ms;
  --cl-dur-reveal: 900ms;
  --cl-dur-line: 1100ms;

  /* Escala tipográfica (peso tamanho/entrelinha família) */
  --cl-type-display: 700 48px/52px "Bricolage Grotesque", sans-serif;
  --cl-type-h1: 700 40px/44px "Bricolage Grotesque", sans-serif;
  --cl-type-h2: 700 32px/38px "Bricolage Grotesque", sans-serif;
  --cl-type-h3: 500 24px/30px "Bricolage Grotesque", sans-serif;
  --cl-type-body-lg: 400 18px/28px "Bricolage Grotesque", sans-serif;
  --cl-type-body: 400 16px/24px "Bricolage Grotesque", sans-serif;
  --cl-type-small: 400 14px/20px "Bricolage Grotesque", sans-serif;
  --cl-type-caption: 500 12px/16px "Bricolage Grotesque", sans-serif;
  --cl-type-label: 500 12px/16px "Bricolage Grotesque", sans-serif;
  --cl-track-display: -0.02em;
  --cl-track-h1: -0.01em;
  --cl-track-label: 0.24em;

  /* Semântica — modo claro (Carta Náutica) */
  --cl-bg: var(--cl-carta-nautica);
  --cl-text: var(--cl-mar-profundo);
  --cl-text-100: var(--cl-text);
  --cl-text-70: color-mix(in oklab, var(--cl-text) 70%, transparent);
  --cl-text-60: color-mix(in oklab, var(--cl-text) 60%, transparent);
  --cl-line: color-mix(in oklab, var(--cl-text) 14%, transparent);
  --cl-border: color-mix(in oklab, var(--cl-text) 50%, transparent);
  --cl-soft: color-mix(in oklab, var(--cl-text) 5%, var(--cl-bg));
  --cl-elevated: color-mix(in oklab, var(--cl-carta-nautica) 50%, #ffffff);
  --cl-structure: var(--cl-casco);
  --cl-on-accent: var(--cl-mar-profundo);
  --cl-accent-acao: var(--cl-farol);
  --cl-accent-tech: var(--cl-horizonte);
  --cl-acao-hover: color-mix(in oklab, var(--cl-farol) 88%, var(--cl-text));
  --cl-acao-pressed: color-mix(in oklab, var(--cl-farol) 76%, var(--cl-text));
  --cl-estrutura-hover: color-mix(in oklab, var(--cl-casco) 88%, var(--cl-text));
  --cl-estrutura-pressed: color-mix(in oklab, var(--cl-casco) 76%, var(--cl-text));
  --cl-focus: var(--cl-horizonte-700);
  --cl-sucesso: var(--cl-farol);
  --cl-info: var(--cl-horizonte);
  --cl-erro: var(--cl-erro-500);
  --cl-aviso: var(--cl-aviso-500);
  --cl-sucesso-texto: var(--cl-farol-900);
  --cl-info-texto: var(--cl-horizonte-900);
  --cl-erro-texto: var(--cl-erro-900);
  --cl-aviso-texto: var(--cl-aviso-900);
  --cl-shadow: 0 1px 2px rgb(7 10 13 / 0.06), 0 8px 24px -12px rgb(7 10 13 / 0.18);

  /* Apelidos mantidos por compatibilidade — prefira o nome novo */
  --cl-surface: var(--cl-structure);
  --cl-text-45: var(--cl-text-60);
}

/* Modo escuro (Mar Profundo) — escolhido no alternador */
[data-theme="dark"] {
  --cl-bg: var(--cl-mar-profundo);
  --cl-text: var(--cl-carta-nautica);
  --cl-soft: var(--cl-casco);
  --cl-elevated: var(--cl-casco);
  --cl-focus: var(--cl-horizonte);
  --cl-sucesso-texto: var(--cl-farol-300);
  --cl-info-texto: var(--cl-horizonte-300);
  --cl-erro-texto: var(--cl-erro-300);
  --cl-aviso-texto: var(--cl-aviso-300);
  --cl-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
}

/* Modo escuro pelo sistema, enquanto ninguém escolheu no alternador */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cl-bg: var(--cl-mar-profundo);
    --cl-text: var(--cl-carta-nautica);
    --cl-soft: var(--cl-casco);
    --cl-elevated: var(--cl-casco);
    --cl-focus: var(--cl-horizonte);
    --cl-sucesso-texto: var(--cl-farol-300);
    --cl-info-texto: var(--cl-horizonte-300);
    --cl-erro-texto: var(--cl-erro-300);
    --cl-aviso-texto: var(--cl-aviso-300);
    --cl-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
  }
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cl-dur-fast: 0ms;
    --cl-dur-base: 0ms;
    --cl-dur-reveal: 0ms;
    --cl-dur-line: 0ms;
  }
}