/* =====================================================
   USERS Design Tokens — "Deep Space" identity, systematized
   Dark-only. Source of visual truth for the whole app.
   ===================================================== */
:root {
  color-scheme: dark;

  /* ---------- Color: navy surface ramp ---------- */
  --app-page-base: #112040;                   /* opaque page floor under the gradient */
  --app-bg-0: oklch(21% 0.05 263);            /* deepest: vignette, page edge */
  --app-bg-1: oklch(33% 0.06 263);            /* page base (≈ #2a3d62) */
  --app-bg-2: oklch(38% 0.062 263);           /* raised: cards (≈ #354d75) */
  --app-bg-3: oklch(43% 0.062 263);           /* highest: hover, inputs */
  /* Legacy aliases kept for dashboard compatibility */
  --app-bg-primary: var(--app-bg-1);
  --app-bg-secondary: var(--app-bg-2);
  --app-bg-tertiary: var(--app-bg-3);

  /* ---------- Color: accent (soft sky blue) ---------- */
  --app-accent-primary: #5b9cf5;
  --app-accent-strong: oklch(60% 0.17 262);   /* pressed / vivid */
  --app-accent-glow: #3b7dd8;
  --app-accent-deep: #1e4a8a;
  --app-accent-overlay: oklch(69% 0.14 262 / 0.10);

  /* ---------- Color: semantic ---------- */
  --app-success: #22c55e;
  --app-warning: #f59e0b;
  --app-danger: #ef4444;
  --app-success-overlay: oklch(72% 0.2 150 / 0.14);
  --app-warning-overlay: oklch(78% 0.16 70 / 0.14);
  --app-danger-overlay: oklch(64% 0.21 27 / 0.14);
  --app-danger-border: oklch(64% 0.21 27 / 0.4);
  --app-danger-text: #fca5a5;
  --app-success-text: #86efac;
  --app-warning-text: #fcd34d;

  /* ---------- Color: text ---------- */
  --app-text-primary: #edf1f8;
  --app-text-secondary: #aebdd6;
  --app-text-muted: #7d8db0;
  --app-text-on-accent: #06122b;

  /* ---------- Surfaces & borders ---------- */
  --app-card-bg: color-mix(in oklab, var(--app-bg-2) 88%, transparent);
  --app-card-hover: color-mix(in oklab, var(--app-bg-3) 90%, transparent);
  --app-card-border: oklch(69% 0.14 262 / 0.22);
  --app-card-border-hover: oklch(69% 0.14 262 / 0.40);
  --app-hairline: oklch(80% 0.05 262 / 0.12);
  --app-input-bg: oklch(30% 0.058 263);
  --app-button-bg: oklch(69% 0.14 262 / 0.16);
  --app-button-hover: oklch(69% 0.14 262 / 0.26);
  --app-overlay-dark: oklch(15% 0.04 263 / 0.90);
  --app-overlay-medium: oklch(15% 0.04 263 / 0.70);

  /* ---------- Typography ---------- */
  --app-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --app-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --text-xs: 0.75rem;        /* 12 — micro labels */
  --text-sm: 0.8125rem;      /* 13 — secondary */
  --text-base: 0.9375rem;    /* 15 — body */
  --text-md: 1.0625rem;      /* 17 — emphasized body */
  --text-lg: 1.25rem;        /* 20 — section titles */
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 1.9rem);   /* page titles */
  --text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem);  /* hero */
  --leading-tight: 1.2;
  --leading-body: 1.55;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Elevation & glow ---------- */
  --shadow-1: 0 1px 2px oklch(10% 0.03 263 / 0.4), 0 2px 8px oklch(10% 0.03 263 / 0.25);
  --shadow-2: 0 2px 4px oklch(10% 0.03 263 / 0.45), 0 8px 24px oklch(10% 0.03 263 / 0.35);
  --shadow-3: 0 4px 8px oklch(10% 0.03 263 / 0.5), 0 16px 48px oklch(10% 0.03 263 / 0.45);
  --glow-accent: 0 0 0 1px oklch(69% 0.14 262 / 0.25), 0 4px 20px oklch(60% 0.17 262 / 0.25);

  /* ---------- Motion ---------- */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);

  /* ---------- Layers ---------- */
  --layer-topbar: 100;
  --layer-sheet: 600;
  --layer-dialog: 700;
  --layer-toast: 900;

  /* ---------- Page metrics ---------- */
  --page-max: 720px;
  --topbar-h: 56px;

  /* ---------- Atmospheric backdrop (themeable; overridden per :root[data-theme]) ---------- */
  --app-atmos:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(60, 120, 210, 0.35) 0%, rgba(50, 100, 185, 0.18) 35%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 8%, rgba(65, 130, 210, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 78%, rgba(55, 115, 200, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 90% 2% at 50% 0%, rgba(91, 156, 245, 0.14) 0%, transparent 100%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(8, 14, 30, 0.3) 100%),
    linear-gradient(175deg, #1a2d50 0%, #152545 40%, var(--app-page-base) 100%);
  --app-atmos-noise-opacity: 0.025;
}