/**
 * Design Tokens — Sistema de Roteiros de Criativos (Uélicon)
 * @dev-designer · 2026-06-12 · v1.0
 *
 * Arquitetura: 3 camadas (primitives → semantic → component).
 * Componentes consomem APENAS tokens semantic/component — nunca primitives.
 *
 * 3 escopos de superfície:
 *   :root                            → admin Ever (desktop, LIGHT — único regime do admin v1)
 *   [data-surface="gravador"]        → app do gravador (mobile, DARK sempre)
 *   [data-surface="teleprompter"]    → tela de leitura (DARK máximo contraste)
 *
 * Hue da marca: 150 (verde Uélicon #22c55e ≈ oklch(0.723 0.192 149.6)).
 * Contraste: 21 pares validados WCAG AA via OKLCH→Oklab→linear sRGB (gotcha F36).
 * Primary light oklch(0.530 0.155 145) = 4.94:1 vs branco (calibração herdada F37).
 */

@layer tokens, base, components, utilities;

@layer tokens {
  /* ==========================================================
     PRIMITIVES — paleta crua. NÃO consumir em componentes.
     ========================================================== */
  :root {
    /* Verde Uélicon (hue 145-150) */
    --green-50:  oklch(0.970 0.018 150);
    --green-100: oklch(0.945 0.035 150);
    --green-200: oklch(0.900 0.070 150);
    --green-300: oklch(0.840 0.155 150);
    --green-400: oklch(0.780 0.165 150);
    --green-500: oklch(0.723 0.192 150); /* #22c55e — marca pública */
    --green-600: oklch(0.530 0.155 145); /* primary light — 4.94:1 vs branco */
    --green-700: oklch(0.470 0.140 145);
    --green-800: oklch(0.380 0.100 150);
    --green-900: oklch(0.280 0.060 150);

    /* Neutros quentes (hue 150, chroma quase nulo) */
    --neutral-0:   oklch(1 0 0);
    --neutral-50:  oklch(0.985 0.003 150);
    --neutral-100: oklch(0.965 0.004 150);
    --neutral-150: oklch(0.940 0.005 150);
    --neutral-200: oklch(0.920 0.006 150);
    --neutral-300: oklch(0.860 0.008 150);
    --neutral-400: oklch(0.700 0.012 150);
    --neutral-500: oklch(0.530 0.015 150);
    --neutral-600: oklch(0.460 0.015 150);
    --neutral-700: oklch(0.400 0.012 150);
    --neutral-800: oklch(0.260 0.015 150);
    --neutral-850: oklch(0.210 0.012 150);
    --neutral-900: oklch(0.170 0.010 150);
    --neutral-950: oklch(0.135 0.008 150);

    /* Estados não-verdes */
    --blue-700:  oklch(0.400 0.100 235);  /* na_fila texto (light) */
    --blue-100:  oklch(0.945 0.030 235);  /* na_fila fundo (light) */
    --blue-400:  oklch(0.740 0.110 235);  /* na_fila no dark */
    --amber-700: oklch(0.420 0.100 75);   /* pulado texto (light) */
    --amber-100: oklch(0.955 0.045 85);   /* pulado fundo (light) */
    --amber-400: oklch(0.780 0.130 80);   /* pulado/alerta no dark */
    --orange-700: oklch(0.420 0.110 55);  /* editado-após-enviado texto */
    --orange-100: oklch(0.955 0.035 65);  /* editado-após-enviado fundo */
    --red-600:   oklch(0.520 0.190 27);   /* danger light */
    --red-400:   oklch(0.720 0.170 25);   /* danger dark */

    /* Dots de TEMA — categóricos, L/C uniformes (uniformidade perceptual OKLCH).
       Decorativos: SEMPRE acompanhados do nome do tema em texto. Seed dos 7 temas
       (a tabela `temas.cor` guarda o valor oklch; CRUD pode criar novos). */
    --tema-1: oklch(0.60 0.14 25);   /* Trava Invisível */
    --tema-2: oklch(0.60 0.14 55);   /* Limite Baixo */
    --tema-3: oklch(0.60 0.14 85);   /* Score Alto Negado */
    --tema-4: oklch(0.60 0.14 175);  /* Empresário/Pronampe */
    --tema-5: oklch(0.60 0.14 205);  /* MEI */
    --tema-6: oklch(0.60 0.14 250);  /* Financiamento+Banco Digital */
    --tema-7: oklch(0.60 0.14 300);  /* Geral/Amplo */
    --tema-8: oklch(0.60 0.14 335);  /* reserva p/ próximo tema */

    /* ----- Tipografia ----- */
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-leitura: "Atkinson Hyperlegible", "Inter", system-ui, sans-serif; /* só teleprompter */

    --text-xs: 0.75rem;    /* 12 — metadados, eyebrow */
    --text-sm: 0.8125rem;  /* 13 — células de tabela, badges */
    --text-base: 0.875rem; /* 14 — corpo admin */
    --text-md: 1rem;       /* 16 — corpo gravador (fila) */
    --text-lg: 1.125rem;   /* 18 — título de card */
    --text-xl: 1.375rem;   /* 22 — título de página */
    --text-2xl: 1.75rem;   /* 28 — número grande do dashboard */

    --leading-tight: 1.25;
    --leading-base: 1.5;

    /* ----- Espaçamento (escala 4px) ----- */
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
    --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;

    /* ----- Radius (DNA suporte-bio: 14px) ----- */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* ----- Sombras ----- */
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
    --shadow-md: 0 1px 2px oklch(0 0 0 / 0.06), 0 8px 24px -8px oklch(0 0 0 / 0.12);
    --shadow-sheet: 0 -8px 32px -8px oklch(0 0 0 / 0.45); /* bottom-sheet dark */

    /* ----- Motion (prefers-reduced-motion zera — ver base) ----- */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* ----- Touch targets (F27 / WCAG 2.5.5) ----- */
    --tap-min: 44px;   /* mínimo universal */
    --tap-cta: 56px;   /* CTA primário do gravador ("✓ Gravei") */
  }

  /* ==========================================================
     SEMANTIC — ADMIN (light, default)
     ========================================================== */
  :root {
    color-scheme: light;

    --color-bg:          var(--neutral-50);   /* fundo de página */
    --color-bg-subtle:   var(--neutral-100);  /* faixas zebradas, headers de grupo */
    --color-surface:     var(--neutral-0);    /* cards, tabela, drawer */
    --color-border:        var(--neutral-200);
    --color-border-strong: var(--neutral-300);

    --color-text:        var(--neutral-800);  /* 15.7:1 */
    --color-text-muted:  var(--neutral-600);  /* 6.78:1 */
    --color-text-subtle: var(--neutral-500);  /* 5.02:1 — mínimo permitido */

    --color-primary:        var(--green-600); /* 4.94:1 c/ texto branco */
    --color-primary-hover:  oklch(0.480 0.150 145);
    --color-primary-active: oklch(0.440 0.140 145);
    --color-on-primary:     var(--neutral-0);
    --color-link:           var(--green-700); /* 6.16:1 sobre bg */

    --color-danger:     var(--red-600);
    --color-warning:    var(--amber-700);
    --color-focus-ring: oklch(0.530 0.155 145 / 0.45);
  }

  /* ==========================================================
     SEMANTIC — GRAVADOR (dark sempre; aplicar no <html> da
     superfície /g/* — NÃO depende de prefers-color-scheme)
     ========================================================== */
  [data-surface="gravador"] {
    color-scheme: dark;

    --color-bg:          var(--neutral-900);  /* 0.17 — “estúdio” */
    --color-bg-subtle:   var(--neutral-850);
    --color-surface:     var(--neutral-850);  /* cards da fila */
    --color-border:        oklch(1 0 0 / 0.10);
    --color-border-strong: oklch(1 0 0 / 0.18);

    --color-text:        oklch(0.960 0.005 150); /* 17.0:1 */
    --color-text-muted:  oklch(0.720 0.015 150); /* 7.74:1 */
    --color-text-subtle: oklch(0.680 0.015 150);

    --color-primary:        var(--green-400);    /* accent dark — 10.15:1 */
    --color-primary-hover:  var(--green-300);
    --color-primary-active: oklch(0.730 0.160 150);
    --color-on-primary:     var(--neutral-900);  /* texto ESCURO sobre verde claro */
    --color-link:           var(--green-300);

    --color-danger:     var(--red-400);
    --color-warning:    var(--amber-400);
    --color-focus-ring: oklch(0.780 0.165 150 / 0.55);
  }

  /* ==========================================================
     SEMANTIC — TELEPROMPTER (dentro do gravador; contraste máximo)
     ========================================================== */
  [data-surface="teleprompter"] {
    --tp-bg:        var(--neutral-950);          /* 0.135 — quase preto */
    --tp-text:      oklch(0.985 0.002 150);      /* 19.2:1 */
    --tp-gancho:    var(--green-300);            /* 12.9:1 — gancho destacado */
    --tp-muted:     oklch(0.700 0.012 150);      /* 7.5:1 — metadados/header */
    --tp-pausa-text: oklch(0.800 0.020 150);     /* pill [ pausa ] — 8.3:1 */
    --tp-pausa-bg:   var(--neutral-800);
    --tp-cta-border: var(--green-400);           /* moldura do bloco CTA final */

    /* Tipografia de leitura (50-70cm de distância) */
    --tp-font:        var(--font-leitura);
    --tp-size-min:    28px;                      /* piso do stepper A- */
    --tp-size:        32px;                      /* default (~30-40pt convencional) */
    --tp-size-max:    44px;                      /* teto do stepper A+ */
    --tp-size-step:   4px;
    --tp-leading:     1.45;                      /* anti line-skipping (1.2-1.6) */
    --tp-gancho-scale: 1.2;                      /* gancho 20% maior que o corpo */
    --tp-measure:     34ch;                      /* largura máx. de linha (tablet) */
    --tp-bullet-gap:  0.9em;                     /* respiro entre falas-guia (compacto) */
  }

  /* ==========================================================
     COMPONENT — badges de ESTADO (vocabulário ubíquo do
     domain-model: NÃO renomear)
     ========================================================== */
  :root {
    /* Roteiro (estado editorial) */
    --badge-rascunho-text: var(--neutral-700);  --badge-rascunho-bg: var(--neutral-150);
    --badge-disponivel-text: var(--green-800);  --badge-disponivel-bg: var(--green-100);
    --badge-arquivado-text: var(--neutral-700); --badge-arquivado-bg: transparent;
    --badge-arquivado-border: var(--neutral-300); /* arquivado = outline, sem fill */

    /* Item de Fila (ciclo de gravação) */
    --badge-na-fila-text: var(--blue-700);      --badge-na-fila-bg: var(--blue-100);
    --badge-gravado-text: var(--green-800);     --badge-gravado-bg: var(--green-100);
    --badge-pulado-text: var(--amber-700);      --badge-pulado-bg: var(--amber-100);

    /* Alerta G1 — "Editado após enviado" */
    --badge-editado-text: var(--orange-700);    --badge-editado-bg: var(--orange-100);

    /* Barras do dashboard de cobertura (cores de estado, fixas e globais) */
    --bar-gravado:    var(--green-600);
    --bar-na-fila:    oklch(0.620 0.110 235);
    --bar-disponivel: var(--neutral-300);
  }

  [data-surface="gravador"] {
    /* No dark, badges viram texto claro + fill translúcido do mesmo hue */
    --badge-na-fila-text: var(--blue-400);   --badge-na-fila-bg: oklch(0.740 0.110 235 / 0.14);
    --badge-gravado-text: var(--green-300);  --badge-gravado-bg: oklch(0.840 0.155 150 / 0.14);
    --badge-pulado-text: var(--amber-400);   --badge-pulado-bg: oklch(0.780 0.130 80 / 0.14);
    --badge-editado-text: var(--amber-400);  --badge-editado-bg: oklch(0.780 0.130 80 / 0.14);
  }
}

@layer base {
  /* Flash de template Alpine (gotcha F4) */
  [x-cloak] { display: none !important; }

  html { font-family: var(--font-ui); }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    -webkit-font-smoothing: antialiased;
  }

  /* Números de roteiro (#001) e contadores: sempre tabulares */
  .num, td.num, .contador { font-variant-numeric: tabular-nums; }

  /* Foco visível universal (teclado) */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-focus-ring);
  }

  /* Viewport mobile (gotcha F9) + safe areas iOS */
  [data-surface="gravador"] .tela-cheia,
  [data-surface="teleprompter"] .tela-cheia {
    min-height: 100vh;
    min-height: 100svh;
  }
  .barra-acao-fixa {
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }

  /* Motion: redução obrigatória (D6 / WCAG 2.3.3) */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}