/* ==========================================================================
   FleckMart — Design tokens (Onda 1 / Fase 2)
   Tema escuro único do painel e do checkout, em oklch.
   Regras:
   - Elevação no escuro = superfície mais CLARA (bg → surface → 2 → 3).
   - Cores de estado têm par sólido (texto/ícone) + "soft" translúcido
     (fundo de badge) que funciona sobre qualquer superfície.
   - Nenhum arquivo deve inventar cor própria: consumir daqui.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Fundo e superfícies (3 elevações) */
  --bg: oklch(0.16 0.012 272);
  --surface: oklch(0.205 0.014 272);
  --surface-2: oklch(0.245 0.016 272);
  --surface-3: oklch(0.295 0.02 272);
  --border: oklch(0.30 0.018 272);
  --border-strong: oklch(0.385 0.022 272);

  /* Texto (contraste AA sobre bg e surface) */
  --ink: oklch(0.95 0.008 272);
  --muted: oklch(0.74 0.018 272);
  --faint: oklch(0.60 0.02 272);

  /* Acento índigo */
  --primary: oklch(0.585 0.215 277);
  --primary-strong: oklch(0.52 0.24 277);
  --primary-bright: oklch(0.72 0.15 277);
  --primary-soft: oklch(0.585 0.215 277 / 0.16);
  --primary-soft-strong: oklch(0.585 0.215 277 / 0.28);
  --primary-soft-ink: oklch(0.82 0.1 277);

  /* Estados */
  --success: oklch(0.76 0.15 160);
  --success-soft: oklch(0.76 0.15 160 / 0.14);
  --warn: oklch(0.81 0.14 75);
  --warn-soft: oklch(0.81 0.14 75 / 0.14);
  --danger: oklch(0.68 0.19 22);
  --danger-strong: oklch(0.58 0.21 25);
  --danger-soft: oklch(0.68 0.19 22 / 0.15);

  /* Acentos secundários (tipos de nó do quiz, gráficos, avatares) */
  --accent-cyan: oklch(0.76 0.12 215);
  --accent-violet: oklch(0.72 0.16 300);
  --accent-pink: oklch(0.72 0.16 350);

  /* Sidebar (mais funda que o fundo) */
  --side-bg: oklch(0.13 0.012 272);
  --side-ink: oklch(0.7 0.018 272);
  --side-active: #ffffff;

  /* Geometria, sombra e foco */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 12px 36px rgba(0, 0, 0, 0.45);
  --ring: 0 0 0 3px oklch(0.585 0.215 277 / 0.32);

  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Scrollbar discreta, coerente com o tema */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Autofill do navegador sem "flash" branco nos campos */
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset;
  caret-color: var(--ink);
}