/* ─────────────────────────────────────────────────────────
   ATOMIC  ·  Design Tokens
   All raw values live here; no px units - use rem / oklch.
   ───────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Backgrounds - true black ground, panels barely lifted (Obsidian) */
  --bg:        #000;
  --surface:   oklch(0.148 0 0);
  --surface-2: oklch(0.186 0 0);
  --surface-3: oklch(0.232 0 0);
  --inset:     oklch(0.096 0 0);

  /* Borders - crisp hairlines */
  --line:   rgba(255,255,255,0.070);
  --line-2: rgba(255,255,255,0.135);

  /* Text */
  --t1: oklch(0.965 0 0);
  --t2: oklch(0.720 0 0);
  --t3: oklch(0.520 0 0);

  /* Accent - light itself. Achromatic, so hue is reserved for status:
     anything coloured on screen is telling you something. */
  --ac:        oklch(0.880 0 0);
  --ac-hi:     oklch(0.975 0 0);
  --ac-dim:    oklch(0.620 0 0);
  --ac-ink:    oklch(0.090 0 0);
  --ac-2:      oklch(0.480 0 0);   /* graphite - gradient stop for depth */
  --ac-soft:   rgba(255,255,255,0.10);
  --ac-softer: rgba(255,255,255,0.05);
  --ac-gradient: linear-gradient(135deg, oklch(0.985 0 0) 0%, oklch(0.870 0 0) 46%, oklch(0.560 0 0) 100%);

  /* Status hues - legacy Atomic aliases used by shared presenters */
  --atomic-primary:   #6366f1;
  --atomic-secondary: #8b5cf6;
  --atomic-success:   #10b981;

  /* Success - green. The single source of truth for "active / healthy". */
  --success:      oklch(0.75 0.16 158);
  --success-soft: color-mix(in oklch, var(--success) 16%, transparent);

  /* Warning - amber */
  --warn:      oklch(0.80 0.12 78);
  --warn-soft: color-mix(in oklch, var(--warn)   16%, transparent);

  /* Danger - red */
  --danger:      oklch(0.66 0.18 22);
  --danger-soft: color-mix(in oklch, var(--danger) 15%, transparent);

  /* Store-dot solid warm-red (no gradient) */
  --store-dot: oklch(0.70 0.17 22);

  /* Typography */
  --ff:   'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono',  ui-monospace,  monospace;

  /* Font scale - rem */
  --fs-2xs: 0.6875rem;   /* 11px   */
  --fs-xs:  0.71875rem;  /* 11.5px */
  --fs-sm:  0.78125rem;  /* 12.5px */
  --fs-base:0.875rem;    /* 14px   */
  --fs-md:  0.90625rem;  /* 14.5px */
  --fs-lg:  0.9375rem;   /* 15px   */
  --fs-xl:  1.0625rem;   /* 17px   */
  --fs-2xl: 1.1875rem;   /* 19px   */
  --fs-3xl: 1.75rem;     /* 28px   */

  /* Spacing scale - rem */
  --sp-1:  0.25rem;    /*  4px */
  --sp-2:  0.375rem;   /*  6px */
  --sp-3:  0.5rem;     /*  8px */
  --sp-4:  0.6875rem;  /* 11px */
  --sp-5:  0.75rem;    /* 12px */
  --sp-6:  0.875rem;   /* 14px */
  --sp-7:  1rem;       /* 16px */
  --sp-8:  1.125rem;   /* 18px */
  --sp-9:  1.25rem;    /* 20px */
  --sp-10: 1.375rem;   /* 22px */
  --sp-11: 1.5rem;     /* 24px */
  --sp-12: 1.625rem;   /* 26px */
  --sp-13: 1.75rem;    /* 28px */
  --sp-14: 1.875rem;   /* 30px */
  --sp-15: 2rem;       /* 32px */
  --sp-16: 2.25rem;    /* 36px */
  --sp-17: 2.5rem;     /* 40px */
  --sp-18: 2.75rem;    /* 44px */

  /* Border radii */
  --r-card: 0.875rem;   /* 14px - tighter, more precise */
  --r-pan:  0.75rem;    /* 12px */
  --r-fld:  0.625rem;   /* 10px */
  --r-pill: 999px;
  --r-sm:   0.5rem;     /*  8px */
  --r-md:   0.625rem;   /* 10px */
  --r-lg:   0.75rem;    /* 12px */
  --r-tag:  0.3125rem;  /*  5px */

  /* Icon sizes */
  --icon-xs: 0.75rem;    /* 12px */
  --icon-sm: 0.875rem;   /* 14px */
  --icon-md: 1.125rem;   /* 18px */
  --icon-lg: 1.1875rem;  /* 19px */
  --icon-xl: 1.3125rem;  /* 21px */

  /* Component box sizes */
  --box-sm:  1.6875rem;  /* 27px */
  --box-md:  2.125rem;   /* 34px */
  --box:     2.25rem;    /* 36px */
  --box-lg:  2.375rem;   /* 38px */

  /* Misc component sizes */
  --avatar:      1.75rem;   /* 28px */
  --brand-mark:  2.125rem;  /* 34px */
  --store-dot-s: 1.375rem;  /* 22px */

  /* Toggle */
  --toggle-w:    2.625rem;  /* 42px */
  --toggle-h:    1.5rem;    /* 24px */
  --toggle-knob: 1.125rem;  /* 18px */

  /* Layout */
  --sidebar-w:   15.5rem;    /* 248px  */
  --topbar-h:    4rem;       /*  64px  */
  --content-max: 71.25rem;   /* 1140px */
  --rail-w:      15.5rem;    /* 248px  */
  --rail-gap:    2.75rem;    /*  44px  */
  --actionbar-max: 38rem;    /* 608px  */

  /* Transitions */
  --dur-fast: 0.14s;
  --dur-med:  0.16s;
  --dur-slow: 0.30s;
  --dur-sidebar: 0.34s;
  --ease-sidebar: cubic-bezier(0.22, 1, 0.36, 1);

  /* Elevation & depth (dark) */
  --shadow-sm: 0 0.0625rem 0.0625rem rgba(0,0,0,0.3), 0 0.125rem 0.25rem rgba(0,0,0,0.2);
  --shadow-md: 0 0.0625rem 0.125rem rgba(0,0,0,0.6), 0 0.75rem 2rem -0.75rem rgba(0,0,0,0.9);
  --shadow-lg: 0 2rem 5rem rgba(0,0,0,0.85);
  --ring-top:  inset 0 0.0625rem 0 rgba(255,255,255,0.075);
  --ac-glow:   0 0.375rem 1.5rem -0.5rem rgba(255,255,255,0.28);

  /* Premium surface finishing */
  --panel-sheen: linear-gradient(180deg, rgba(255,255,255,0.030) 0%, rgba(255,255,255,0) 38%);
  --btn-sheen:   linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 52%);
  --well-inset:  inset 0 0.0625rem 0.125rem rgba(0,0,0,0.4);
  --raise:       0 0.5rem 1.25rem -0.75rem rgba(0,0,0,0.7);

  /* Canvas - flat black. Light on this page is drawn, not tinted in. */
  --canvas: #000;
}

/* ─────────────────────────────────────────────────────────
   LIGHT THEME  ·  [data-theme="light"]
   Only the values that differ are overridden; everything
   else (typography, spacing, radii, sizes) is reused.
   ───────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  /* Backgrounds - paper. Neutral, no cool cast, to match the black mode. */
  --bg:        oklch(0.960 0 0);
  --surface:   oklch(1.000 0 0);
  --surface-2: oklch(0.972 0 0);
  --surface-3: oklch(0.942 0 0);
  --inset:     oklch(0.975 0 0);

  /* Borders */
  --line:   rgba(0,0,0,0.09);
  --line-2: rgba(0,0,0,0.16);

  /* Text */
  --t1: oklch(0.220 0 0);
  --t2: oklch(0.450 0 0);
  --t3: oklch(0.595 0 0);

  /* Accent - ink. The inverse of the dark mode: achromatic, so hue
     stays reserved for status in both themes. */
  --ac:        oklch(0.240 0 0);
  --ac-hi:     oklch(0.120 0 0);
  --ac-dim:    oklch(0.480 0 0);
  --ac-ink:    oklch(1.000 0 0);
  --ac-2:      oklch(0.420 0 0);
  --ac-soft:   rgba(0,0,0,0.075);
  --ac-softer: rgba(0,0,0,0.04);
  --ac-gradient: linear-gradient(135deg, oklch(0.300 0 0) 0%, oklch(0.190 0 0) 46%, oklch(0.080 0 0) 100%);

  /* Success - green (light) */
  --success:      oklch(0.60 0.15 158);
  --success-soft: color-mix(in oklch, var(--success) 14%, transparent);

  /* Warning - amber */
  --warn:      oklch(0.62 0.13 70);
  --warn-soft: color-mix(in oklch, var(--warn) 16%, transparent);

  /* Danger - red */
  --danger:      oklch(0.585 0.20 25);
  --danger-soft: color-mix(in oklch, var(--danger) 13%, transparent);

  /* Store-dot solid warm-red */
  --store-dot: oklch(0.62 0.19 25);

  /* Elevation & depth (light) - tighter, slightly more present */
  --shadow-sm: 0 0.0625rem 0.0625rem rgba(17,20,28,0.04), 0 0.125rem 0.375rem rgba(17,20,28,0.06);
  --shadow-md: 0 0.0625rem 0.125rem rgba(17,20,28,0.05), 0 0.5rem 1.5rem -0.5rem rgba(17,20,28,0.13);
  --shadow-lg: 0 1.5rem 4rem rgba(17,20,28,0.17);
  --ring-top:  inset 0 0.0625rem 0 rgba(255,255,255,0.8);
  --ac-glow:   0 0.375rem 1.125rem -0.5rem rgba(0,0,0,0.22);

  /* Premium surface finishing (light) */
  --panel-sheen: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 30%);
  --btn-sheen:   linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
  --well-inset:  inset 0 0.0625rem 0.125rem rgba(17,20,28,0.05);
  --raise:       0 0.5rem 1.25rem -0.75rem rgba(17,20,28,0.16);

  /* Canvas (light) - paper lit from above, no tint */
  --canvas: radial-gradient(120% 90% at 50% -18%, oklch(1 0 0) 0%, var(--bg) 62%);
}