/* ============================================================
   Gopher Admin — Design Tokens (framework-agnostic)
   These CSS variables are the single source of truth for the
   whole design. Tailwind's theme maps onto them (see tailwind
   config), so utilities like `bg-surface` / `text-muted` resolve
   to these and react to theme/accent/density changes live.
   ============================================================ */

:root {
  --radius: 12px;                 /* tweakable */
  --r-sm: calc(var(--radius) * 0.5);
  --r-lg: calc(var(--radius) * 1.4);

  /* density-driven (overridden by [data-density]) */
  --ctl-h: 38px;
  --row-py: 13px;
  --pad-card: 22px;
  --gap: 20px;
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;

  /* accent (tweakable) */
  --accent: #8b5cf6;
  --accent-fg: #ffffff;
  --accent-hover: color-mix(in oklch, var(--accent) 86%, white);
  --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
  --ring: color-mix(in oklch, var(--accent) 45%, transparent);

  /* semantic */
  --success: oklch(0.64 0.15 155);
  --warning: oklch(0.74 0.15 70);
  --danger:  oklch(0.62 0.21 22);
  --info:    oklch(0.62 0.16 245);
}

[data-theme="dark"] {
  --bg:        oklch(0.165 0.006 280);
  --surface:   oklch(0.205 0.007 280);
  --surface-2: oklch(0.245 0.008 280);
  --surface-3: oklch(0.29 0.009 280);
  --border:    oklch(0.30 0.008 280);
  --border-strong: oklch(0.40 0.01 280);
  --text:      oklch(0.96 0.004 280);
  --text-muted: oklch(0.70 0.006 280);
  --text-faint: oklch(0.54 0.006 280);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 50px rgba(0,0,0,.55);
  --overlay: rgba(0,0,0,.6);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:        oklch(0.985 0.003 280);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.975 0.004 280);
  --surface-3: oklch(0.955 0.005 280);
  --border:    oklch(0.915 0.004 280);
  --border-strong: oklch(0.85 0.006 280);
  --text:      oklch(0.24 0.012 280);
  --text-muted: oklch(0.48 0.012 280);
  --text-faint: oklch(0.64 0.01 280);
  --shadow-sm: 0 1px 2px rgba(20,20,40,.06);
  --shadow-md: 0 4px 16px rgba(20,20,40,.08);
  --shadow-lg: 0 16px 50px rgba(20,20,50,.16);
  --overlay: rgba(20,20,40,.32);
  color-scheme: light;
}

[data-density="compact"]      { --ctl-h: 32px; --row-py: 8px;  --pad-card: 16px; --gap: 14px; --topbar-h: 52px; }
[data-density="comfortable"]  { --ctl-h: 44px; --row-py: 18px; --pad-card: 28px; --gap: 26px; --topbar-h: 68px; }