/* ============================================================
   @bct/admin-ui-v2 — Design tokens
   Foundation: cool neutrals, indigo accent, Geist family
   ------------------------------------------------------------
   Naming convention: this file ports the Claude Design bundle
   (design/admin-up/project/tokens.css) verbatim. Patterns.md P-6
   proposes a `--ui-*` prefix; we instead keep the bundle's
   semantic names (`--bg-*`, `--fg-*`, `--accent-*`, `--border-*`,
   `--text-*`, `--radius-*`, `--space-*`, `--z-*`, `--shadow-*`,
   `--ease-*`, `--duration-*`, `--font-*`) because:
     1. D-20 (visual sacred) — porting tokens with their original
        names keeps the mapping bundle ↔ v2 trivial during ports.
     2. Names already group by semantic role; an extra `--ui-*`
        prefix adds noise without disambiguation (this package has
        a single token namespace).
   If a future surface needs to scope these, alias via the host
   app's stylesheet rather than mutating the source-of-truth here.
   ============================================================ */

:root {
  /* ---------- Type ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "JetBrains Mono", monospace;

  /* Type scale (compact-first, 14px body) */
  --text-2xs: 10.5px;
  --text-xs:  11.5px;
  --text-sm:  12.5px;
  --text-base: 13.5px;
  --text-md:  14.5px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-display: 48px;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-mono: -0.005em;

  /* ---------- Spacing (4-base) ---------- */
  --space-0:  0;
  --space-px: 1px;
  --space-0_5: 2px;
  --space-1:  4px;
  --space-1_5: 6px;
  --space-2:  8px;
  --space-2_5: 10px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Density (compact / comfortable) ---------- */
  --row-h: 32px;
  --row-pad-x: 12px;
  --control-h-sm: 26px;
  --control-h-md: 30px;
  --control-h-lg: 36px;

  /* ---------- Radii (medium scale) ---------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-full: 9999px;

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-banner: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-instant: 60ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;

  /* ---------- Accent (overridable via tweaks) ---------- */
  --accent-h: 256;
  --accent-c: 0.16;
  --accent-l: 0.56;

  /* ---------- Overlay scrim (modal/sheet/palette backdrop) ---------- */
  --scrim: oklch(0.18 0.012 260 / 0.40);
}

/* ============================================================
   LIGHT THEME — cool neutrals
   ============================================================ */
[data-theme="light"] {
  /* Surface scale (background → elevated) */
  --bg-canvas:    oklch(0.985 0.003 260);  /* outermost canvas */
  --bg-base:      oklch(0.995 0.002 260);  /* default surface (cards) */
  --bg-subtle:    oklch(0.975 0.004 260);  /* subtle backgrounds, hovers */
  --bg-muted:     oklch(0.96  0.005 260);  /* muted blocks */
  --bg-emphasis:  oklch(0.93  0.006 260);  /* emphasized blocks */
  --bg-inverse:   oklch(0.18  0.012 260);

  /* Foreground / text */
  --fg-primary:   oklch(0.20 0.014 260);
  --fg-secondary: oklch(0.42 0.012 260);
  --fg-tertiary:  oklch(0.58 0.010 260);
  --fg-disabled:  oklch(0.72 0.008 260);
  --fg-inverse:   oklch(0.985 0.003 260);
  --fg-on-accent: oklch(0.99 0.005 260);

  /* Borders */
  --border-subtle:  oklch(0.93  0.006 260);
  --border-default: oklch(0.89  0.008 260);
  --border-strong:  oklch(0.80  0.010 260);
  --border-focus:   oklch(var(--accent-l) var(--accent-c) var(--accent-h));

  /* Accent */
  --accent-bg:        oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-bg-hover:  oklch(calc(var(--accent-l) - 0.04) var(--accent-c) var(--accent-h));
  --accent-bg-active: oklch(calc(var(--accent-l) - 0.08) var(--accent-c) var(--accent-h));
  --accent-fg:        oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-soft:      oklch(0.96 0.04 var(--accent-h));
  --accent-soft-fg:   oklch(0.40 0.14 var(--accent-h));
  --accent-border:    oklch(0.86 0.08 var(--accent-h));

  /* Semantic */
  --success-bg:     oklch(0.62 0.14 150);
  --success-soft:   oklch(0.96 0.04 150);
  --success-soft-fg: oklch(0.42 0.13 150);
  --success-border: oklch(0.84 0.08 150);

  --warning-bg:     oklch(0.74 0.16 75);
  --warning-bg-fg:  oklch(0.22 0.05 75);
  --warning-soft:   oklch(0.97 0.04 75);
  --warning-soft-fg: oklch(0.45 0.12 70);
  --warning-border: oklch(0.85 0.10 75);

  --danger-bg:      oklch(0.58 0.20 25);
  --danger-soft:    oklch(0.96 0.04 25);
  --danger-soft-fg: oklch(0.45 0.16 25);
  --danger-border:  oklch(0.86 0.10 25);

  /* Positive-but-not-success accent (e.g. password-strength "good" step,
     between warning amber and success green). Flips light/dark. */
  --strength-high:  oklch(0.72 0.15 135);

  --info-bg:        oklch(0.60 0.14 230);
  --info-soft:      oklch(0.96 0.04 230);
  --info-soft-fg:   oklch(0.40 0.14 230);
  --info-border:    oklch(0.85 0.08 230);

  --neutral-soft:    oklch(0.94 0.005 260);
  --neutral-soft-fg: oklch(0.36 0.012 260);
  --neutral-border:  oklch(0.86 0.008 260);

  /* Shadows (overlays only) */
  --shadow-xs: 0 1px 2px oklch(0.18 0.012 260 / 0.04);
  --shadow-sm: 0 2px 4px oklch(0.18 0.012 260 / 0.05),
               0 1px 2px oklch(0.18 0.012 260 / 0.04);
  --shadow-md: 0 6px 16px -4px oklch(0.18 0.012 260 / 0.08),
               0 2px 4px oklch(0.18 0.012 260 / 0.04);
  --shadow-lg: 0 18px 40px -8px oklch(0.18 0.012 260 / 0.14),
               0 4px 8px -2px oklch(0.18 0.012 260 / 0.06);
  --shadow-top-sm: 0 -6px 16px -10px oklch(0.18 0.012 260 / 0.18);

  /* Focus ring */
  --ring: 0 0 0 3px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.22);
  --danger-ring: 0 0 0 3px oklch(from var(--danger-bg) l c h / 0.20);

  color-scheme: light;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --bg-canvas:    oklch(0.16  0.010 260);
  --bg-base:      oklch(0.195 0.012 260);
  --bg-subtle:    oklch(0.225 0.013 260);
  --bg-muted:     oklch(0.255 0.013 260);
  --bg-emphasis:  oklch(0.295 0.014 260);
  --bg-inverse:   oklch(0.97  0.003 260);

  --fg-primary:   oklch(0.97 0.003 260);
  --fg-secondary: oklch(0.74 0.010 260);
  --fg-tertiary:  oklch(0.58 0.012 260);
  --fg-disabled:  oklch(0.42 0.010 260);
  --fg-inverse:   oklch(0.18 0.012 260);
  --fg-on-accent: oklch(0.99 0.005 260);

  --border-subtle:  oklch(0.26 0.013 260);
  --border-default: oklch(0.32 0.014 260);
  --border-strong:  oklch(0.42 0.014 260);
  --border-focus:   oklch(calc(var(--accent-l) + 0.05) var(--accent-c) var(--accent-h));

  --accent-bg:        oklch(calc(var(--accent-l) + 0.04) var(--accent-c) var(--accent-h));
  --accent-bg-hover:  oklch(calc(var(--accent-l) + 0.08) var(--accent-c) var(--accent-h));
  --accent-bg-active: oklch(calc(var(--accent-l) + 0.12) var(--accent-c) var(--accent-h));
  --accent-fg:        oklch(calc(var(--accent-l) + 0.18) calc(var(--accent-c) - 0.03) var(--accent-h));
  --accent-soft:      oklch(0.32 0.08 var(--accent-h) / 0.5);
  --accent-soft-fg:   oklch(0.85 0.10 var(--accent-h));
  --accent-border:    oklch(0.42 0.10 var(--accent-h));

  --success-bg:     oklch(0.65 0.14 150);
  --success-soft:   oklch(0.32 0.07 150 / 0.4);
  --success-soft-fg: oklch(0.84 0.10 150);
  --success-border: oklch(0.42 0.10 150);

  --warning-bg:     oklch(0.76 0.16 75);
  --warning-bg-fg:  oklch(0.22 0.05 75);
  --warning-soft:   oklch(0.34 0.08 75 / 0.4);
  --warning-soft-fg: oklch(0.86 0.12 75);
  --warning-border: oklch(0.45 0.10 75);

  --danger-bg:      oklch(0.62 0.20 25);
  --danger-soft:    oklch(0.32 0.10 25 / 0.4);
  --danger-soft-fg: oklch(0.84 0.12 25);
  --danger-border:  oklch(0.45 0.12 25);

  --strength-high:  oklch(0.78 0.15 135);

  --info-bg:        oklch(0.65 0.14 230);
  --info-soft:      oklch(0.32 0.08 230 / 0.4);
  --info-soft-fg:   oklch(0.84 0.10 230);
  --info-border:    oklch(0.42 0.10 230);

  --neutral-soft:    oklch(0.30 0.010 260);
  --neutral-soft-fg: oklch(0.84 0.008 260);
  --neutral-border:  oklch(0.40 0.012 260);

  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-sm: 0 2px 6px oklch(0 0 0 / 0.35),
               0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-md: 0 8px 20px -4px oklch(0 0 0 / 0.45),
               0 2px 4px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 24px 48px -8px oklch(0 0 0 / 0.55),
               0 4px 8px -2px oklch(0 0 0 / 0.35);
  --shadow-top-sm: 0 -6px 16px -10px oklch(0 0 0 / 0.45);

  --ring: 0 0 0 3px oklch(calc(var(--accent-l) + 0.04) var(--accent-c) var(--accent-h) / 0.32);
  --danger-ring: 0 0 0 3px oklch(from var(--danger-bg) l c h / 0.28);

  /* Scrim: same fixed dark navy as light — current overlays use one literal
     across both themes, so reuse it here for byte-identical behavior. */
  --scrim: oklch(0.18 0.012 260 / 0.40);

  color-scheme: dark;
}

/* ============================================================
   Density modes
   ============================================================ */
[data-density="compact"] {
  --row-h: 32px;
  --row-pad-x: 12px;
  --control-h-sm: 26px;
  --control-h-md: 30px;
  --control-h-lg: 36px;
}
[data-density="comfortable"] {
  --row-h: 44px;
  --row-pad-x: 16px;
  --control-h-sm: 30px;
  --control-h-md: 36px;
  --control-h-lg: 44px;
}

/* ============================================================
   Radius scales (overridable)
   ============================================================ */
[data-radius="sharp"] {
  --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px;
  --radius-lg: 6px; --radius-xl: 8px; --radius-2xl: 10px;
}
[data-radius="medium"] {
  --radius-xs: 3px; --radius-sm: 5px; --radius-md: 7px;
  --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px;
}
[data-radius="soft"] {
  --radius-xs: 4px; --radius-sm: 7px; --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 26px;
}

/* ============================================================
   Font pairings
   ============================================================ */
[data-font="geist"] {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}
[data-font="general"] {
  --font-sans: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}