/* ============================================================
   RATING 2.0 (Uélicon) — Design Tokens
   ============================================================
   DERIVADO da FAMÍLIA de painéis Uélicon:
     • base primária: projects/uelicon/ksi-5/design/tokens-painel.css (v1.0, 2026-07-06)
       — mesmo tipo de uso (painel operacional denso, 1 HTML servido por FastAPI),
         mesma operação (Uélicon), mesmo dia. É o parente mais próximo.
     • coerente com projects/uelicon/metricas + Agenda 360 (navy #0A2E57 / verde 145).
   NÃO herda a linhagem PÚBLICA dark+verde-150 (site-institucional, suporte-bio,
   criativos): aquela é marketing/marca pública; ESTE é ferramenta operacional.
   Briefing do Jean: "priorize o mais recente/painel (ksi-5)". Feito.

   Light mode único (1 regime = metade da superfície de teste — lição criativos).
   OKLCH sempre (gotcha D1). WCAG 2.2 AA validado (pares no rodapé).
   Frontend: Alpine.js + Tailwind, HTML servido/estático (sem build obrigatório) —
   por isso é CSS custom properties consumíveis direto; bloco @theme opcional no fim.

   v1.0 — 2026-07-06 · @dev-designer
   ------------------------------------------------------------
   ASSINATURA (não mudar sem voltar pro designer):
   • navy #0A2E57 (hue 250) = MARCA (header, botão primário, links, foco)
   • verde 145 = PROGRESSO / AVANÇO / CONCLUÍDO — protagonista da barra de fase
     e do estado "finalizado". Quanto mais perto do fim, mais verde (ramp de fases).
   • âmbar 75 = PENDÊNCIA / documento pendente / atenção
   • vermelho 25 = SÓ anotação PENDÊNCIA crítica e erro real — nunca decorativo
   • Fase = cor configurável (fases.cor no domain-model) escolhida de uma PALETA
     curada (ramp cool→verde). Cor de fase é ACENTO (borda 3px + dot), NUNCA fundo
     de card inteiro (anti "arco-íris ilegível" — princípio herdado do criativos).
   • Sora (títulos/números/fase amigável) + Inter (corpo/tabela) + JetBrains Mono
     (CPF/CNPJ e ids). Raio 10/14/18. Sombra tinta navy. Off-white de fundo.
   ============================================================ */

:root {
  /* ==========================================================
     PRIMITIVES (subset idêntico ao ksi-5/Métricas — NÃO recalibrar)
     ========================================================== */

  /* Navy — marca (hue 250, #0A2E57) */
  --navy-50:  oklch(96.5% 0.012 250);
  --navy-100: oklch(92.5% 0.024 250);
  --navy-500: oklch(42.0% 0.068 250);
  --navy-600: oklch(36.0% 0.070 250);   /* hover header/botão */
  --navy-700: oklch(32.0% 0.070 250);   /* === #0A2E57 BRAND */
  --navy-800: oklch(26.0% 0.062 250);

  /* Neutros cinza-azulado (hue 250) */
  --neutral-50:  oklch(99.0% 0.001 250);
  --neutral-100: oklch(97.5% 0.002 250);
  --neutral-200: oklch(94.0% 0.004 250);
  --neutral-300: oklch(88.0% 0.006 250);
  --neutral-400: oklch(72.0% 0.009 250);
  --neutral-500: oklch(52.5% 0.013 250);  /* text-tertiary — escurecido p/ AA (≥4.5:1 sobre branco; era 58% = 4.26:1, F30/F36) */
  --neutral-600: oklch(48.0% 0.013 250);
  --neutral-700: oklch(35.0% 0.014 250);
  --neutral-800: oklch(25.0% 0.014 250);

  /* Verde 145 — progresso / avanço / concluído (protagonista) */
  --green-50:  oklch(96.5% 0.025 145);
  --green-100: oklch(92.0% 0.055 145);
  --green-vivo:oklch(66.0% 0.170 145);  /* SÓ fundo de botão/dot/barra, nunca texto fino */
  --green-500: oklch(58.0% 0.155 145);  /* fill da barra de progresso */
  --green-600: oklch(50.0% 0.150 145);
  --green-700: oklch(45.0% 0.140 145);  /* texto verde AA sobre branco/soft */

  /* Vermelho 25 — falha real + anotação PENDÊNCIA */
  --red-50:  oklch(96.5% 0.020 25);
  --red-100: oklch(92.0% 0.050 25);
  --red-500: oklch(60.0% 0.210 25);
  --red-700: oklch(42.0% 0.160 25);

  /* Âmbar 75 — pendência / documento pendente / atenção */
  --amber-50:  oklch(97.0% 0.025 75);
  --amber-100: oklch(93.0% 0.060 75);
  --amber-500: oklch(75.0% 0.160 75);
  --amber-700: oklch(50.0% 0.130 75);

  /* ==========================================================
     PALETA DE FASES (NOVA — específica do Rating 2.0)
     ----------------------------------------------------------
     Cada Fase tem fases.cor (domain-model §4.5). O admin escolhe de
     ESTA paleta curada ao criar/editar uma fase. Todos os stops têm
     L/C calibrados iguais → nenhuma fase domina a outra visualmente.
     RAMP COOL→VERDE: quanto mais perto do fim, mais verde (metáfora
     de "progresso rumo ao concluído"). is_final SEMPRE usa --phase-final
     (verde), independentemente do que o admin escolher.
     Uso: dot no header da coluna Kanban + borda-esquerda 3px do card +
     dot na célula de fase da Tabela. NUNCA como fundo de card inteiro.
     Versão -fg (L45, AA sobre branco) só se precisar de texto colorido.
     ========================================================== */
  --phase-1:    oklch(58% 0.13 265);  --phase-1-fg:  oklch(45% 0.14 265);  --phase-1-soft:  oklch(96% 0.03 265);
  --phase-2:    oklch(58% 0.13 235);  --phase-2-fg:  oklch(45% 0.14 235);  --phase-2-soft:  oklch(96% 0.03 235);
  --phase-3:    oklch(60% 0.12 205);  --phase-3-fg:  oklch(45% 0.13 205);  --phase-3-soft:  oklch(96% 0.03 205);
  --phase-4:    oklch(62% 0.12 175);  --phase-4-fg:  oklch(45% 0.13 175);  --phase-4-soft:  oklch(96% 0.03 175);
  --phase-final:oklch(58% 0.155 145); --phase-final-fg:oklch(45% 0.14 145);--phase-final-soft:oklch(96% 0.025 145);
  /* Stops extras pra serviços com +fases (ex: Limpa Nome) ou reuso */
  --phase-a:    oklch(58% 0.13 290);  --phase-a-fg:  oklch(45% 0.14 290);  --phase-a-soft:  oklch(96% 0.03 290);
  --phase-b:    oklch(60% 0.13 320);  --phase-b-fg:  oklch(45% 0.15 320);  --phase-b-soft:  oklch(96% 0.03 320);

  /* ==========================================================
     SEMANTIC (mesmos nomes/intenções da família)
     ========================================================== */
  --brand:            var(--navy-700);
  --brand-hover:      var(--navy-600);
  --brand-active:     var(--navy-800);
  --brand-soft:       var(--navy-50);
  --text-on-brand:    #ffffff;

  --surface-page:     var(--neutral-50);   /* off-white de fundo */
  --surface-card:     #ffffff;
  --surface-subtle:   var(--neutral-100);   /* header tabela, hover linha, input, coluna Kanban */
  --surface-inset:    var(--neutral-100);
  --surface-drawer:   #ffffff;
  --surface-scrim:    oklch(26% 0.062 250 / 0.42);  /* backdrop do drawer/bottom-sheet */

  --text-primary:     var(--neutral-800);
  --text-body:        var(--neutral-700);
  --text-secondary:   var(--neutral-600);
  --text-tertiary:    var(--neutral-500);
  --text-disabled:    var(--neutral-400);
  --text-link:        var(--navy-600);

  --border-subtle:    var(--neutral-200);
  --border-default:   var(--neutral-300);
  --border-strong:    var(--neutral-400);
  --border-focus:     var(--brand);

  --accent:           var(--green-700);     /* texto verde (progresso concluído) */
  --accent-cta:       var(--green-vivo);    /* fundo de barra/dot de progresso */
  --accent-cta-hover: var(--green-600);
  --accent-soft:      var(--green-100);

  /* ==========================================================
     ESTADO DO PROCESSO — badges (mapeiam badge_status do domain-model §4.4)
     ----------------------------------------------------------
     Badge = SEMPRE cor + dot + label (nunca cor sozinha — daltonismo).
       em_andamento → navy/azul (neutro-ativo)
       finalizado   → verde (is_final)
       pendencia    → âmbar (documento_pendente) — sinal GENÉRICO
     ========================================================== */
  --status-andamento-bg:  var(--navy-50);  --status-andamento-fg:  var(--navy-700); --status-andamento-dot: var(--navy-500);
  --status-final-bg:      var(--green-100); --status-final-fg:     var(--green-700); --status-final-dot:     var(--green-500);
  --status-pendencia-bg:  var(--amber-100); --status-pendencia-fg: var(--amber-700); --status-pendencia-dot: var(--amber-500);

  /* Badge "Doc" (documento pendente) no card Kanban / linha da Tabela */
  --badge-doc-bg:  var(--amber-100);  --badge-doc-fg:  var(--amber-700);

  /* Anotações tipadas (domain-model: pendencia | correto) */
  --anota-pendencia-bg: var(--red-50);   --anota-pendencia-border: var(--red-500);   --anota-pendencia-fg: var(--red-700);
  --anota-correto-bg:   var(--green-50); --anota-correto-border:   var(--green-500); --anota-correto-fg:   var(--green-700);

  /* Barra de progresso (consulta pública + vendedor) */
  --progress-track: var(--neutral-200);
  --progress-fill:  var(--green-500);
  --progress-fill-final: var(--green-vivo);   /* 100% / is_final = mais vivo */

  /* KPI cards (dashboard) */
  --kpi-fg:          var(--text-primary);
  --kpi-label-fg:    var(--text-secondary);
  --kpi-money-bg:    var(--green-50);
  --kpi-money-fg:    var(--green-700);
  --kpi-alert-bg:    var(--amber-50);
  --kpi-alert-fg:    var(--amber-700);

  /* Faixa de alerta inline (ex: erro de save, offline) */
  --alerta-critico-bg: var(--red-50);   --alerta-critico-border: var(--red-500);   --alerta-critico-fg: var(--red-700);
  --alerta-warn-bg:    var(--amber-50); --alerta-warn-border:    var(--amber-500); --alerta-warn-fg:    var(--amber-700);
  --alerta-ok-bg:      var(--green-50); --alerta-ok-border:      var(--green-500); --alerta-ok-fg:      var(--green-700);

  /* WhatsApp (botão "Chamar no WhatsApp" — verde de marca WA, distinto do verde-progresso) */
  --whatsapp:       oklch(50% 0.135 150);  /* escurecido: branco AA em texto 12px (era 62% = 3.42:1, F30) */
  --whatsapp-hover: oklch(44% 0.130 150);

  /* ==========================================================
     GRADIENTE DA CONSULTA PÚBLICA / VENDEDOR (hero suave, client-facing)
     ----------------------------------------------------------
     Client-facing = a única superfície que pode ser um pouco mais "premium".
     Fundo navy-tint suave + card branco flutuando. Puro CSS (0 KB, LCP intocado).
     ========================================================== */
  --bg-consulta:
    radial-gradient(at 15% 0%,  oklch(94% 0.035 250 / 0.60) 0%, transparent 48%),
    radial-gradient(at 85% 6%,  oklch(95% 0.030 145 / 0.45) 0%, transparent 52%),
    linear-gradient(180deg, oklch(99% 0.002 250) 0%, oklch(97.5% 0.006 250) 100%);

  /* ==========================================================
     TIPOGRAFIA — Sora + Inter + JetBrains Mono (idêntico à família)
     ========================================================== */
  --font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.75rem;    /* 12 — labels uppercase, meta, badge */
  --text-sm:   0.8125rem;  /* 13 — célula tabela, chip */
  --text-base: 0.875rem;   /* 14 — body/UI */
  --text-md:   1rem;       /* 16 — input, botão, nome cliente na lista vendedor */
  --text-lg:   1.125rem;   /* 18 — H2 seção / título drawer (Sora) */
  --text-xl:   1.375rem;   /* 22 — fase amigável na consulta/vendedor (Sora) */
  --text-2xl:  1.5rem;     /* 24 — H1 painel (Sora) */
  --text-3xl:  1.75rem;    /* 28 — KPI number (Sora) */
  --text-4xl:  2.25rem;    /* 36 — herói consulta pública mobile (Sora) */
  --text-5xl:  2.75rem;    /* 44 — herói consulta pública desktop (Sora 700) */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --tracking-tight: -0.015em;
  --tracking-wide:   0.04em;

  /* ==========================================================
     SPACING / RAIO / SOMBRA / LAYOUT / MOTION (idêntico à família)
     ========================================================== */
  --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-sm:   6px;      /* badge, chip */
  --radius:      10px;     /* input, botão secundário, card Kanban */
  --radius-md:   14px;     /* cards, botão primário, KPI */
  --radius-lg:   18px;     /* painéis grandes, card da consulta pública */
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px 0 oklch(32% 0.068 250 / 0.05);
  --shadow:    0 2px 6px -1px oklch(32% 0.068 250 / 0.08), 0 1px 3px -1px oklch(32% 0.068 250 / 0.05);
  --shadow-md: 0 6px 16px -4px oklch(32% 0.068 250 / 0.10), 0 2px 6px -2px oklch(32% 0.068 250 / 0.06);
  --shadow-lg: 0 12px 32px -8px oklch(32% 0.068 250 / 0.14), 0 4px 12px -4px oklch(32% 0.068 250 / 0.08);
  --shadow-drawer: -12px 0 36px -12px oklch(26% 0.062 250 / 0.22);   /* drawer lateral direito */
  --shadow-focus: 0 0 0 3px oklch(32% 0.07 250 / 0.22);
  --shadow-drag:  0 14px 34px -8px oklch(32% 0.068 250 / 0.28);      /* card sendo arrastado no Kanban */

  --header-height:     56px;
  --sidebar-width:     236px;
  --container-max:     1360px;   /* painel operacional largo (tabela/kanban) */
  --consulta-max:      560px;    /* card único da consulta pública */
  --drawer-w:          clamp(320px, 42vw, 560px);  /* drawer master-detail desktop */
  --container-padding: var(--space-6);
  --table-row-height:  44px;     /* densidade da casa + tap-target */
  --kanban-col-width:  296px;
  --tap-min:           44px;

  --motion-fast: 80ms;
  --motion-base: 150ms;
  --motion-slow: 220ms;
  --motion-drawer: 260ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --z-header:   10;
  --z-sticky:   20;
  --z-scrim:    100;
  --z-drawer:   110;
  --z-toast:    130;
}

/* ============================================================
   prefers-reduced-motion (D6 obrigatório)
   ============================================================ */
@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;
  }
  /* barra de progresso não "cresce": aparece já no valor final */
  .progress-fill { transition: none !important; }
}

/* ============================================================
   UTILITIES
   ============================================================ */

/* TODO número (contagem, R$, %, dias) → coluna alinha pixel-a-pixel */
.num-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

.label-tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

/* CPF/CNPJ e ids → mono, tabular */
.doc-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* x-cloak obrigatório com Alpine (gotcha F4) — evita flash de template cru */
[x-cloak] { display: none !important; }

/* ============================================================
   CONTRASTE WCAG 2.2 AA — pares em uso (validados via OKLCH→sRGB→luminância)
   ------------------------------------------------------------
   #fff / navy-700 (texto header)               → 12.7:1 ✓ AAA
   text-primary neutral-800 / white             → 16.0:1 ✓ AAA
   text-secondary neutral-600 / white           →  6.5:1 ✓ AA
   green-700 / green-100 (badge finalizado)     →  5.6:1 ✓ AA
   amber-700 / amber-100 (badge pendência)      →  4.9:1 ✓ AA
   navy-700 / navy-50 (badge em andamento)      → 11.5:1 ✓ AAA
   phase-*-fg (L45) / white (texto de fase)     →  6.4–7.6:1 ✓ AA
   green-500 fill / white (barra, gráfico)      →  4.0:1 ✓ (componente gráfico ≥3:1)
   red-700 / red-50 (anotação pendência)        →  ~7:1 ✓ AA
   ⚠ green-vivo & phase-* (L58-62): SÓ fundo de dot/barra/borda, NUNCA texto fino.
     Texto verde fino sobre branco = SEMPRE green-700; texto de fase = *-fg (L45).
   ============================================================ */

/* ============================================================
   (OPCIONAL) Ponte pro Tailwind v4 — só se o frontend usar build @theme.
   Se servir Tailwind via CDN, ignore este bloco e use as custom props direto
   com valores arbitrários: bg-[var(--brand)], text-[var(--text-primary)] etc.
   ============================================================ */
@theme inline {
  --color-brand: var(--brand);
  --color-brand-hover: var(--brand-hover);
  --color-surface-page: var(--surface-page);
  --color-surface-card: var(--surface-card);
  --color-surface-subtle: var(--surface-subtle);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-accent: var(--accent);
  --color-progress-fill: var(--progress-fill);
  --font-display: var(--font-display);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --radius-card: var(--radius-md);
}