/* ============================================================
   Aureon Suporte — Design Tokens
   ============================================================
   Brand Aureon (violeta #7B2FF7). OKLCH. WCAG 2.2 AA validado.
   Fork independente — NÃO compartilha tokens com o ecossistema Uélicon.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     PRIMITIVES — escala bruta (não consumir direto em componente)
     ---------------------------------------------------------- */

  /* Neutros (cinza ligeiramente azul, hue 250 — frio sutil = "fintech") */
  --neutral-50:  oklch(99.0% 0.001 250);   /* superfície principal */
  --neutral-100: oklch(97.5% 0.002 250);   /* hover sutil de linha, surface alt */
  --neutral-200: oklch(94.0% 0.003 250);   /* divisor hairline */
  --neutral-300: oklch(88.0% 0.005 250);   /* border padrão */
  --neutral-400: oklch(72.0% 0.008 250);   /* placeholder, ícone disabled */
  --neutral-500: oklch(58.0% 0.010 250);   /* texto secundário forte */
  --neutral-600: oklch(48.0% 0.012 250);   /* texto secundário */
  --neutral-700: oklch(35.0% 0.014 250);   /* texto body */
  --neutral-800: oklch(25.0% 0.014 250);   /* texto headings */
  --neutral-900: oklch(18.0% 0.012 250);   /* texto enfático, números KPI */

  /* Violeta Aureon (matiz 294, brand #7B2FF7) — accent/brand/foco */
  --violet-50:  oklch(96.5% 0.022 294);   /* accent-soft bg */
  --violet-100: oklch(92.5% 0.050 294);   /* soft bg hover, badge brand */
  --violet-200: oklch(85.0% 0.095 294);   /* borda soft */
  --violet-500: oklch(54.5% 0.248 294);   /* #7B2FF7 — accent oficial Aureon */
  --violet-600: oklch(48.0% 0.230 294);   /* hover; texto branco sobre ele = AA */
  --violet-700: oklch(40.0% 0.190 294);   /* texto roxo sobre fundo claro (AA) */

  /* Verde sucesso Aureon (matiz 165, #10B981) — SOMENTE status sucesso */
  --green-50:  oklch(96.5% 0.025 165);
  --green-100: oklch(92.0% 0.055 165);
  --green-200: oklch(85.0% 0.100 165);
  --green-500: oklch(70.0% 0.150 165);    /* dot sucesso / #10B981 aprox */
  --green-600: oklch(62.0% 0.150 165);
  --green-700: oklch(48.0% 0.120 165);    /* texto sucesso sobre green-100 (AA) */

  /* Vermelho semântico (alerta inadimplê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);        /* badge inadimplente */
  --red-600: oklch(52.0% 0.190 25);        /* texto sobre fundo claro */
  --red-700: oklch(42.0% 0.160 25);        /* enfático */

  /* Âmbar (atenção — parcela vencendo nos próx 7d) */
  --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);      /* contraste AA em fundo claro */

  /* Azul informativo (links, info badges, "estimado" tag) */
  --blue-50:  oklch(96.0% 0.020 245);
  --blue-100: oklch(91.0% 0.045 245);
  --blue-500: oklch(58.0% 0.180 245);
  --blue-700: oklch(45.0% 0.150 245);

  /* Ciano Aureon (#27D4D9) — só gradiente decorativo */
  --cyan-400: oklch(80.0% 0.110 195);

  /* ---- Marca Aureon — 3 cores do "A" oficial (spec-visual-onda1 §1.1) ---- */
  /* Roxo/violeta — #7B2FF7 — alias semântico do --violet-500 */
  --brand-violet:      var(--violet-500);              /* #7B2FF7  oklch(54.5% 0.248 294) */
  --brand-violet-700:  var(--violet-700);              /* texto roxo AA */

  /* Azul-marca — #3B5BFF — hue ~268 (entre violeta e azul info). NÃO é o --blue-500 (hue 245 = status info). */
  --brand-blue-50:   oklch(96.0% 0.022 268);           /* bg soft do azul-marca */
  --brand-blue-100:  oklch(91.5% 0.050 268);           /* badge/realce soft */
  --brand-blue-500:  oklch(55.5% 0.235 268);           /* #3B5BFF — azul-marca puro (gradiente/dot) */
  --brand-blue-700:  oklch(43.0% 0.175 268);           /* texto azul AA sobre branco (~6.0:1) */

  /* Verde-água / ciano-marca — #27D4D9 — hue 195 */
  --brand-aqua-50:   oklch(96.5% 0.030 195);
  --brand-aqua-100:  oklch(91.0% 0.060 195);
  --brand-aqua-500:  oklch(78.0% 0.130 195);           /* #27D4D9 — aqua puro (gradiente/dot/realce) */
  --brand-aqua-700:  oklch(48.0% 0.090 195);           /* texto aqua AA sobre branco (~4.8:1) */

  /* Gradiente herói Aureon (login card / faixa pública) — índigo profundo → violeta → azul-marca → aqua */
  --gradient-hero: linear-gradient(135deg,
    oklch(30% 0.16 290)    0%,    /* índigo profundo (entrada do roxo) */
    var(--brand-violet)   42%,    /* #7B2FF7 */
    var(--brand-blue-500) 74%,    /* #3B5BFF */
    var(--brand-aqua-500) 100%);  /* #27D4D9 */
  /* O gradiente do "A": violeta (topo-esq) → azul → verde-água (base-dir). ~125deg. */
  --gradient-brand-mark: linear-gradient(125deg,
    var(--brand-violet)    0%,    /* #7B2FF7 */
    var(--brand-blue-500) 52%,    /* #3B5BFF */
    var(--brand-aqua-500) 100%);  /* #27D4D9 */

  /* ----------------------------------------------------------
     SEMANTIC — tokens com intenção (consumir no componente)
     ---------------------------------------------------------- */

  /* Superfície / fundo */
  --surface-page:        var(--neutral-50);    /* fundo geral do app */
  --surface-card:        #ffffff;              /* cards, drawer, modal */
  --surface-subtle:      var(--neutral-100);   /* hover de linha, header tabela */
  --surface-inset:       var(--neutral-100);   /* input, search field */

  /* Texto */
  --text-primary:        var(--neutral-900);   /* headings, números KPI */
  --text-body:           var(--neutral-800);   /* texto geral, células */
  --text-secondary:      var(--neutral-600);   /* labels, meta, "há 2h" */
  --text-tertiary:       oklch(54.0% 0.011 250); /* ~4.6:1 sobre #fff — AA em texto pequeno (redesign-ux 2026-06-02 §6a). Era neutral-500 (3.9:1, reprovava em <18px). */
  --text-disabled:       var(--neutral-400);
  --text-on-accent:      #ffffff;              /* texto sobre violet-500 (AA) */

  /* Borda / divisor */
  --border-subtle:       var(--neutral-200);   /* divisor entre linhas tabela */
  --border-default:      var(--neutral-300);   /* card, input, botão secundário */
  --border-strong:       var(--neutral-400);   /* foco visível */
  --border-focus:        var(--violet-500);    /* outline foco AA */

  /* Acento (ações primárias, links, brand) — violeta Aureon */
  --accent:              var(--violet-500);
  --accent-hover:        var(--violet-600);
  --accent-soft:         var(--violet-100);
  --accent-soft-text:    var(--violet-700);
  --accent-2:            var(--blue-500);       /* decorativo, NÃO ação */

  /* Status semânticos (badges, KPIs) */
  --status-success-bg:   var(--green-100);
  --status-success-fg:   var(--green-700);
  --status-success-dot:  var(--green-500);

  --status-danger-bg:    var(--red-100);
  --status-danger-fg:    var(--red-700);
  --status-danger-dot:   var(--red-500);

  --status-warning-bg:   var(--amber-100);
  --status-warning-fg:   var(--amber-700);
  --status-warning-dot:  var(--amber-500);

  --status-neutral-bg:   var(--neutral-200);
  --status-neutral-fg:   var(--neutral-700);
  --status-neutral-dot:  var(--neutral-500);

  --status-info-bg:      var(--blue-100);
  --status-info-fg:      var(--blue-700);
  --status-info-dot:     var(--blue-500);

  /* KPI cards (1 por status) */
  --kpi-positive-fg:     var(--green-700);
  --kpi-positive-bg:     var(--green-50);
  --kpi-negative-fg:     var(--red-700);
  --kpi-negative-bg:     var(--red-50);
  --kpi-neutral-fg:      var(--neutral-800);
  --kpi-neutral-bg:      #ffffff;

  /* ----------------------------------------------------------
     TIPOGRAFIA
     ---------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala fixa (não fluid — dashboard é desktop-first, evita variação por viewport) */
  --text-xs:    0.75rem;     /* 12px — labels uppercase, meta */
  --text-sm:    0.8125rem;   /* 13px — tabela densa, badge */
  --text-base:  0.875rem;    /* 14px — body padrão da UI */
  --text-md:    1rem;        /* 16px — input, botão */
  --text-lg:    1.125rem;    /* 18px — H2 seção */
  --text-xl:    1.25rem;     /* 20px — H2 destaque */
  --text-2xl:   1.5rem;      /* 24px — H1 dashboard */
  --text-3xl:   1.75rem;     /* 28px — KPI número compacto */
  --text-4xl:   2.25rem;     /* 36px — KPI número grande */

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

  /* Line-heights */
  --leading-tight:  1.2;     /* headings, KPI números */
  --leading-snug:   1.35;    /* labels */
  --leading-normal: 1.5;     /* body */

  /* Letter-spacing */
  --tracking-tight:   -0.01em;   /* H1, KPI grande */
  --tracking-normal:   0;
  --tracking-wide:     0.04em;   /* labels uppercase */

  /* ----------------------------------------------------------
     SPACING — escala 4px
     ---------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;     /* 4 */
  --space-2:   0.5rem;      /* 8 */
  --space-3:   0.75rem;     /* 12 */
  --space-4:   1rem;        /* 16 — gap padrão entre elementos */
  --space-5:   1.25rem;     /* 20 */
  --space-6:   1.5rem;      /* 24 — padding card */
  --space-7:   1.75rem;     /* 28 — folga do caret em .dropdown-filter (spec §3.4) */
  --space-8:   2rem;        /* 32 — gap entre seções */
  --space-10:  2.5rem;      /* 40 */
  --space-12:  3rem;        /* 48 — padding page top */
  --space-16:  4rem;        /* 64 */

  /* ----------------------------------------------------------
     BOTÕES — escala tokenizada (spec-visual-onda1 §2.1)
     ---------------------------------------------------------- */
  /* Altura da escala */
  --btn-h-xs:  28px;
  --btn-h-sm:  32px;
  --btn-h-md:  40px;   /* default */
  --btn-h-lg:  44px;   /* CTA / touch-friendly (≥44 = AA target) */

  /* Padding horizontal por tamanho */
  --btn-px-xs: var(--space-2);   /*  8 */
  --btn-px-sm: var(--space-3);   /* 12 */
  --btn-px-md: var(--space-4);   /* 16 */
  --btn-px-lg: var(--space-5);   /* 20 */

  /* Ícone dentro do botão — fim do 14-vs-16 manual */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;

  /* ----------------------------------------------------------
     RAIO
     ---------------------------------------------------------- */
  --radius-sm:   4px;       /* badges, chip */
  --radius:      6px;       /* botão, input, card de tabela */
  --radius-md:   8px;       /* cards principais */
  --radius-lg:   12px;      /* drawer, modal */
  --radius-pill: 9999px;    /* status dot */

  /* ----------------------------------------------------------
     SHADOWS — sutis (estilo enxuto)
     ---------------------------------------------------------- */
  --shadow-none:    none;
  --shadow-sm:      0 1px 2px 0 oklch(0% 0 0 / 0.05);
  --shadow:         0 1px 3px 0 oklch(0% 0 0 / 0.07), 0 1px 2px -1px oklch(0% 0 0 / 0.05);
  --shadow-md:      0 4px 6px -1px oklch(0% 0 0 / 0.08), 0 2px 4px -2px oklch(0% 0 0 / 0.05);
  --shadow-lg:      0 10px 15px -3px oklch(0% 0 0 / 0.10), 0 4px 6px -4px oklch(0% 0 0 / 0.05);
  --shadow-drawer:  -8px 0 24px -8px oklch(0% 0 0 / 0.12);
  --shadow-focus:   0 0 0 3px oklch(54.5% 0.248 294 / 0.30);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --header-height:     56px;
  --container-max:     1440px;
  --container-padding: var(--space-6);
  --table-row-height:  44px;          /* denso mas clicável (>40 = AA) */
  --drawer-width:      480px;

  /* ----------------------------------------------------------
     MOTION (todos respeitando prefers-reduced-motion)
     ---------------------------------------------------------- */
  --motion-fast:   80ms;
  --motion-base:   150ms;
  --motion-slow:   200ms;
  --motion-confirm: 280ms;   /* pulse de confirmação no clique (header) */

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* premium ease pra drawer/modal */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-header:     10;
  --z-dropdown:   50;
  --z-overlay:    100;
  --z-drawer:     110;
  --z-modal:      120;
  --z-toast:      130;
}

/* ============================================================
   prefers-reduced-motion — desativa motion transitória
   ============================================================ */
@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;
  }
}

/* ============================================================
   UTILITIES — classe por intenção semântica
   ============================================================ */

/* Números financeiros — sempre tabular-nums pra alinhar coluna R$ */
.num-financial {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Label uppercase (KPI label, header tabela) */
.label-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

/* Foco visível AA — usar em todo elemento interativo customizado */
.focus-ring:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   CONTRASTE WCAG 2.2 AA — pares validados
   ============================================================
   text-primary    sobre surface-card    → 16.5:1 ✓ AAA
   text-body       sobre surface-card    →  9.8:1 ✓ AAA
   text-secondary  sobre surface-card    →  5.7:1 ✓ AA (large + body)
   text-tertiary   sobre surface-card    →  ~4.6:1 ✓ AA (texto pequeno ok — escurecido em 2026-06-02 §6a; era 3.9:1)
   #fff sobre violet-500 (botão primário) →  ~4.7:1 ✓ AA texto normal
   #fff sobre violet-600 (hover)          →  ~6.0:1 ✓ AA
   violet-700 sobre branco (link/texto)   →  ~7.1:1 ✓ AAA
   violet-700 sobre violet-100 (badge)    →  ~5.8:1 ✓ AA
   violet-500 sobre branco                →  ~4.7:1 ✓ AA (≥4.5) — melhor que o verde antigo (3.1:1)
   green-700 (sobre green-100)            →  ~5.5:1 ✓ AA — usar em texto sobre badge success
   red-700 sobre red-100                  →  6.5:1 ✓ AA
   amber-700 sobre amber-100              →  4.9:1 ✓ AA
   blue-700 sobre blue-100                →  6.0:1 ✓ AA

   ⚠️ NUNCA usar accent (violet-500) em texto < 18px sobre branco.
      Pra texto roxo pequeno sobre branco, usar violet-700.
   ============================================================ */