/* ============================================================
   EVER UI — 02 SEMANTIC · v1.0.0 · 2026-07-09 · @dev-designer
   ============================================================
   Camada 2 de 3. É O CONTRATO com os componentes: componente
   consome ESTES tokens (ou os component-tokens de 03), nunca
   primitives direto.

   3 escopos de superfície (arquitetura dos criativos-uelicon):
     :root                  → CONSOLE (admin/painel B2B, LIGHT)
     [data-surface="stage"] → palco público branded (dark)
     [data-surface="dark"]  → dark mode DE APP (console escuro)

   Dark ≠ inversão (gotcha D12): cada escopo recalibra L/C.
   Pares WCAG validados no rodapé (D5, metodologia F36).
   ============================================================ */

/* ==========================================================
   CONSOLE — light, default
   ==========================================================
   Separação de luminância (redesign M2): canvas L96.8 rebaixado
   + card branco puro → o card FLUTUA por luminância + elevação,
   não só pela borda.

   [data-surface="console"] re-declara os MESMOS tokens (fix F3 2.5):
   um custom property assado em :root fica preso ao escopo do
   documento. Declarar TAMBÉM em [data-surface="console"] permite
   uma "ilha clara" autocontida — <div data-surface="console"> — DENTRO
   de um palco (stage/dark) re-resolver superfícies/texto de volta pro
   console (card claro legível na página pública /assinar, sem depender
   só de disciplina de uso). No topo, console = :root: computa idêntico,
   zero regressão. Pareado com o mesmo escopo no 03 (component-tokens). */
:root,
[data-surface="console"] {
  color-scheme: light;

  /* Superfícies */
  --surface-page:   oklch(96.8% 0.004 var(--neutral-h));  /* canvas rebaixado */
  --surface-card:   var(--neutral-0);                     /* branco puro — flutua */
  --surface-subtle: var(--neutral-100);                   /* faixas, headers de grupo */
  --surface-inset:  var(--neutral-150);                   /* poços: input readonly, trilho */

  /* Texto */
  --text-primary:   var(--neutral-900);  /* 18.57:1 */
  --text-body:      var(--neutral-800);  /* 15.67:1 */
  --text-secondary: var(--neutral-600);  /*  6.77:1 */
  --text-tertiary:  var(--neutral-500);  /*  4.62:1 — piso AA; meta/placeholder */
  --text-disabled:  var(--neutral-400);  /* NUNCA pra conteúdo essencial */
  --text-on-action: var(--neutral-0);

  /* Bordas — hairlines discretos (a geometria trabalha) */
  --border-subtle:  oklch(93.5% 0.006 var(--neutral-h));
  --border-default: oklch(89.5% 0.008 var(--neutral-h));
  --border-strong:  oklch(82.0% 0.012 var(--neutral-h));
  --hairline:       oklch(91.0% 0.007 var(--neutral-h) / 0.9); /* separador de linha */

  /* AÇÃO primária (CTA, botão default) — deriva da marca.
     Produto pode sobrescrever no tema (ex.: contrato → navy). */
  --action:           var(--brand-600);   /* 5.53:1 c/ branco no jade */
  --action-hover:     var(--brand-650);
  --action-active:    var(--brand-700);
  --action-soft:      var(--brand-100);
  --action-soft-text: var(--brand-700);

  /* ACCENT secundário — tab ativa, link, realce. Uso SOFT ou
     texto escuro; NUNCA branco sobre accent médio. */
  --accent:           var(--brand-500);
  --accent-soft:      var(--brand-100);
  --accent-soft-text: var(--brand-700);
  --link:             var(--brand-700);   /* 7.88:1 sobre branco */

  /* Feedback semântico (fixo, nunca branded) */
  --success:      var(--green-700);
  --success-bg:   var(--green-50);
  --danger:       var(--red-600);
  --danger-strong: var(--red-700);
  --danger-bg:    var(--red-50);
  /* AÇÃO destrutiva (fundo do botão danger) — par PRÓPRIO recalibrado
     por superfície, espelhando --action/--text-on-action. NUNCA usar
     --danger (calibrado pra TEXTO de feedback) como fundo de botão
     (achado audit F2b: no dark dava 2.67:1). */
  --danger-action:       var(--red-600);   /* 6.08:1 c/ #fff */
  --danger-action-hover: var(--red-700);   /* 9.19:1 c/ #fff */
  --text-on-danger:      var(--neutral-0);
  --warning:      var(--amber-700);
  --warning-bg:   var(--amber-50);
  --info:         var(--blue-700);
  --info-bg:      var(--blue-50);

  /* Foco (desenhado, nunca o do browser) */
  --focus-ring:       0 0 0 3px var(--brand-ring);
  --focus-outline:    var(--action);

  /* Títulos fortes do console (produto pode apontar pra outra cor) */
  --text-strong: var(--brand-700);
}

/* ==========================================================
   STAGE — palco público branded (dark). Página /assinar,
   /agendar, link-in-bio… A cor do TENANT entra via
   --brand-h/--brand-c (branding.ts) escopada no elemento .stage
   ou [data-surface="stage"]. NÃO é dark mode do console.
   ========================================================== */
[data-surface="stage"] {
  color-scheme: dark;

  --surface-page:   var(--stage-ink-1000);
  --surface-card:   var(--neutral-0);          /* cards inline continuam claros */
  --surface-subtle: var(--stage-ink-950);
  --surface-inset:  var(--stage-ink-950);

  --text-primary:   var(--stage-haze-100);  /* 18.44:1 */
  --text-body:      var(--stage-haze-100);
  --text-secondary: var(--stage-haze-300);  /* 11.22:1 */
  --text-tertiary:  var(--stage-haze-500);  /*  6.30:1 — legal/meta */
  --text-on-action: var(--text-on-brand);

  --border-subtle:  oklch(100% 0 0 / 0.08);
  --border-default: oklch(100% 0 0 / 0.12);
  --border-strong:  oklch(100% 0 0 / 0.18);
  --hairline:       var(--stage-ink-900);

  --action:        var(--brand-500);   /* CTA branded — rótulo BOLD ≥16px (AA-large 4.00:1) */
  --action-hover:  oklch(52% var(--brand-c) var(--brand-h));
  --action-active: var(--brand-600);
  --accent:        var(--brand-neon);  /* título/dot — 10.35:1 */
  --link:          var(--brand-neon);
  --text-strong:   var(--brand-neon);

  /* Ação destrutiva sobre fundo escuro: mesmo padrão do dark
     (bg clareia, texto sobre ele escurece — D12) */
  --danger-action:       oklch(72% 0.170 25);  /* 6.95:1 c/ on-danger n900 */
  --danger-action-hover: oklch(78% 0.150 25);  /* 8.37:1 */
  --text-on-danger:      var(--neutral-900);

  --focus-ring:    0 0 0 3px oklch(78% var(--brand-c) var(--brand-h) / 0.45);
  --focus-outline: var(--brand-neon);

  /* Peças próprias do palco */
  --stage-glow:        oklch(78% var(--brand-c) var(--brand-h) / 0.10);
  --stage-selo-bg:     oklch(100% 0 0 / 0.05);
  --stage-selo-border: oklch(100% 0 0 / 0.10);
}

/* ==========================================================
   DARK — dark mode DE APP (console escuro). Calibração dos
   criativos-uelicon (superfície "gravador"): fundo n900,
   surface n850, primary CLAREIA (brand-300) com texto ESCURO
   por cima, croma contido. NÃO é inversão (D12).
   ========================================================== */
[data-surface="dark"] {
  color-scheme: dark;

  --surface-page:   var(--neutral-900);
  --surface-card:   var(--neutral-850);
  --surface-subtle: var(--neutral-850);
  --surface-inset:  oklch(16.5% 0.014 var(--neutral-h));

  --text-primary:   oklch(96.0% 0.005 var(--neutral-h));  /* 16.56:1 */
  --text-body:      oklch(96.0% 0.005 var(--neutral-h));
  --text-secondary: oklch(72.0% 0.015 var(--neutral-h));  /* 7.53:1 */
  --text-tertiary:  oklch(66.0% 0.015 var(--neutral-h));
  --text-disabled:  oklch(50.0% 0.012 var(--neutral-h));
  --text-on-action: var(--neutral-900);   /* texto ESCURO sobre primary claro */

  --border-subtle:  oklch(100% 0 0 / 0.08);
  --border-default: oklch(100% 0 0 / 0.10);
  --border-strong:  oklch(100% 0 0 / 0.18);
  --hairline:       oklch(100% 0 0 / 0.08);

  --action:           var(--brand-300);   /* 9.77:1 c/ n900 */
  --action-hover:     var(--brand-200);
  --action-active:    oklch(73% calc(var(--brand-c) * 0.90) var(--brand-h));
  --action-soft:      oklch(78% calc(var(--brand-c) * 0.85) var(--brand-h) / 0.14);
  --action-soft-text: var(--brand-300);
  --accent:           var(--brand-300);
  --accent-soft:      oklch(78% calc(var(--brand-c) * 0.85) var(--brand-h) / 0.14);
  --accent-soft-text: var(--brand-300);
  --link:             var(--brand-200);
  --text-strong:      var(--brand-300);

  /* Feedback no dark: texto claro + fill translúcido do mesmo hue */
  --success:    oklch(84% 0.155 145);
  --success-bg: oklch(84% 0.155 145 / 0.14);
  --danger:     oklch(72% 0.170 25);
  --danger-strong: oklch(72% 0.170 25);
  --danger-bg:  oklch(72% 0.170 25 / 0.14);
  --warning:    oklch(78% 0.130 80);
  --warning-bg: oklch(78% 0.130 80 / 0.14);
  --info:       oklch(74% 0.110 245);
  --info-bg:    oklch(74% 0.110 245 / 0.14);

  /* Ação destrutiva: como o primary do dark — bg CLAREIA e o texto
     sobre ele ESCURECE (D12). --danger (L72) é só TEXTO de feedback;
     aqui vira fundo com fg n900 (fix do audit F2b: era #fff = 2.67:1) */
  --danger-action:       oklch(72% 0.170 25);  /* 6.95:1 c/ on-danger n900 */
  --danger-action-hover: oklch(78% 0.150 25);  /* 8.37:1 */
  --text-on-danger:      var(--neutral-900);

  --focus-ring:    0 0 0 3px oklch(78% calc(var(--brand-c) * 0.85) var(--brand-h) / 0.55);
  --focus-outline: var(--brand-300);

  /* Sombra perde protagonismo no dark — elevação por luminância */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.30);
  --shadow:    0 1px 2px oklch(0% 0 0 / 0.30), 0 6px 16px -4px oklch(0% 0 0 / 0.40);
  --shadow-md: 0 2px 4px oklch(0% 0 0 / 0.30), 0 12px 28px -6px oklch(0% 0 0 / 0.45);
}

/* ============================================================
   CONTRASTE WCAG 2.2 AA — pares validados (D5)
   ============================================================
   Metodologia F36: OKLCH → Oklab → linear sRGB → luminância
   relativa → ratio. Script: tools/validar-contraste.py.
   Validado em 2026-07-09 com tema default (jade h145 c0.17).
   Tema novo DEVE rodar o script de novo.

   ── CONSOLE (light) ──
   text-primary(n900)  / card #fff        → 18.57:1 ✓ AAA
   text-primary(n900)  / page L96.8       → 16.95:1 ✓ AAA
   text-body(n800)     / card             → 15.67:1 ✓ AAA
   text-secondary(n600)/ card             →  6.77:1 ✓ AA
   text-secondary(n600)/ page             →  6.18:1 ✓ AA
   text-secondary(n600)/ inset L95.4      →  5.93:1 ✓ AA
   text-tertiary(n500) / card             →  4.62:1 ✓ AA (piso — nunca <14px essencial)
   #fff / action(brand-600 L50)           →  5.53:1 ✓ AA (botão primário)
   #fff / action-hover(brand-650 L46)     →  6.56:1 ✓ AA
   link(brand-700 L42) / card             →  7.88:1 ✓ AAA
   #fff / danger-action(red-600 L52)      →  6.08:1 ✓ AA  (botão danger)
   #fff / danger-action-hover(red-700)    →  9.19:1 ✓ AAA
   brand-700 / brand-50 (soft)            →  7.27:1 ✓ AAA
   green-700 / green-100 (badge success)  →  5.63:1 ✓ AA
   blue-700  / blue-100  (badge info)     →  5.52:1 ✓ AA
   amber-700 / amber-100 (badge warning)  →  4.94:1 ✓ AA
   amber-700 / amber-50                   →  5.59:1 ✓ AA
   red-700   / red-50   (badge danger)    →  8.22:1 ✓ AAA
   red-700   / red-100                    →  7.04:1 ✓ AAA
   n700 / n200 (badge neutral)            →  9.28:1 ✓ AAA
   n600 / n200 (badge muted)              →  5.72:1 ✓ AA
   green-700 / green-50 (feedback ok)     →  6.38:1 ✓ AA

   ── STAGE (dark branded) ──
   haze-100 / ink-1000                    → 18.44:1 ✓ AAA
   haze-300 / ink-1000                    → 11.22:1 ✓ AAA
   haze-500 / ink-1000                    →  6.30:1 ✓ AA
   brand-neon(L78) / ink-1000             → 10.35:1 ✓ AAA
   #fff / brand-500(L58) CTA              →  4.00:1 ✓ AA-large (rótulo BOLD ≥16px)

   ── DARK APP ──
   text(L96) / bg(n900)                   → 16.56:1 ✓ AAA
   text(L96) / surface(n850)              → 15.75:1 ✓ AAA
   muted(L72) / bg(n900)                  →  7.53:1 ✓ AAA
   action(brand-300 L78) / bg(n900)       →  9.77:1 ✓ AAA
   on-action(n900) / brand-300            →  9.77:1 ✓ AAA
   on-danger(n900) / danger-action(L72)   →  6.95:1 ✓ AA  (botão danger dark — fix F2b)
   on-danger(n900) / danger-hover(L78)    →  8.37:1 ✓ AAA
   badge success(L84) / n900 (fill 0.14)  → 11.98:1 ✓ AAA (fix F3 2.2/3.3)
   badge info(L74)    / n900              →  8.14:1 ✓ AAA
   badge warning(L78) / n900              →  9.16:1 ✓ AAA
   badge danger(L72)  / n900              →  6.95:1 ✓ AA
   badge neutral(text-sec L72) / n900     →  7.53:1 ✓ AAA

   ── TEMA contrato-consultor (navy) ──
   #fff / navy-600 L30                    → 13.71:1 ✓ AAA
   #fff / navy-700 L25                    → 16.10:1 ✓ AAA
   #fff / navy-900 L24 (aside login)      → 16.52:1 ✓ AAA

   42 pares · 0 falhas · 2026-07-09 (danger-action adicionado
   pós-audit F2b — botão danger dark reprovava com 2.67:1;
   5 pares de badge dark adicionados pós-audit F3 2.2/3.3)
   ============================================================ */