/* Layout: a neutral gallery web app (VHS lineage) — sticky top bar, fluid card grid, full-page detail views,
   a right-hand edit drawer. Chrome stays greyscale so uploaded variant designs carry the colour. */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --raised: #ffffff;
  --canvas: #e9eaee;
  --canvas-dot: rgba(17, 18, 20, 0.13);
  --ink: #111214;
  --ink-2: #565961;
  --ink-3: #8f929a;
  --line: #e1e2e7;
  --line-2: #cfd1d7;
  --border: var(--line);
  --hover: rgba(17, 18, 20, 0.05);
  --press: rgba(17, 18, 20, 0.09);
  --on-ink: #ffffff;
  --focus: #3b6cf6;
  --pos: #12795a;
  --pos-soft: rgba(18, 121, 90, 0.1);
  --neg: #c2352f;
  --neg-soft: rgba(194, 53, 47, 0.1);
  --mix: #a5560a;
  --mix-soft: rgba(165, 86, 10, 0.11);
  --ev: #12795a;
  --ev-track: rgba(17, 18, 20, 0.08);
  --run: #2f5fd6;
  --run-soft: rgba(47, 95, 214, 0.1);
  --scrim: rgba(10, 11, 13, 0.36);
  --shadow-1: 0 1px 2px rgba(17, 18, 20, 0.05), 0 0 0 1px rgba(17, 18, 20, 0.05);
  --shadow-2: 0 12px 32px -8px rgba(17, 18, 20, 0.18), 0 0 0 1px rgba(17, 18, 20, 0.05);
  --font-ui: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
  --step-1: clamp(1.04rem, 0.97rem + 0.34vw, 1.25rem);
  --step-2: clamp(1.28rem, 1.1rem + 0.85vw, 1.8rem);
  --step-3: clamp(1.65rem, 1.28rem + 1.75vw, 2.75rem);
  --space-2xs: clamp(0.25rem, 0.23rem + 0.08vw, 0.31rem);
  --space-xs: clamp(0.4rem, 0.37rem + 0.12vw, 0.5rem);
  --space-s: clamp(0.7rem, 0.64rem + 0.28vw, 0.9rem);
  --space-m: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  --space-l: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);
  --radius-card: clamp(14px, 0.7rem + 0.6vw, 22px);
  --radius: 12px;
  --radius-s: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --l0-bg: hsl(205 60% 95%); --l0-fg: hsl(205 72% 34%);
  --l1-bg: hsl(188 55% 94%); --l1-fg: hsl(188 68% 30%);
  --l2-bg: hsl(162 48% 93%); --l2-fg: hsl(162 55% 28%);
  --l3-bg: hsl(92  45% 92%); --l3-fg: hsl(92  45% 30%);
  --l4-bg: hsl(36  70% 93%); --l4-fg: hsl(30  72% 38%);
  --l5-bg: hsl(10  62% 94%); --l5-fg: hsl(8   62% 44%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0e10; --surface: #16171a; --raised: #1c1d21; --canvas: #111215; --canvas-dot: rgba(255, 255, 255, 0.09);
    --ink: #f1f1f3; --ink-2: #a3a5ad; --ink-3: #6c6f77; --line: #26282d; --line-2: #34363c;
    --hover: rgba(255, 255, 255, 0.05); --press: rgba(255, 255, 255, 0.09); --on-ink: #0d0e10; --focus: #7c9cff;
    --pos: #3dc58f; --pos-soft: rgba(61, 197, 143, 0.13); --neg: #ff6b63; --neg-soft: rgba(255, 107, 99, 0.13);
    --mix: #f0a14a; --mix-soft: rgba(240, 161, 74, 0.13); --ev: #3dc58f; --ev-track: rgba(255, 255, 255, 0.08);
    --run: #7c9cff; --run-soft: rgba(124, 156, 255, 0.14); --scrim: rgba(0, 0, 0, 0.62);
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-2: 0 16px 40px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --l0-bg: hsl(205 36% 16%); --l0-fg: hsl(205 72% 73%);
    --l1-bg: hsl(188 34% 15%); --l1-fg: hsl(188 65% 70%);
    --l2-bg: hsl(162 30% 15%); --l2-fg: hsl(162 55% 66%);
    --l3-bg: hsl(92  26% 15%); --l3-fg: hsl(92  48% 64%);
    --l4-bg: hsl(36  38% 16%); --l4-fg: hsl(36  78% 70%);
    --l5-bg: hsl(10  36% 17%); --l5-fg: hsl(10  68% 70%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0e10; --surface: #16171a; --raised: #1c1d21; --canvas: #111215; --canvas-dot: rgba(255, 255, 255, 0.09);
  --ink: #f1f1f3; --ink-2: #a3a5ad; --ink-3: #6c6f77; --line: #26282d; --line-2: #34363c;
  --hover: rgba(255, 255, 255, 0.05); --press: rgba(255, 255, 255, 0.09); --on-ink: #0d0e10; --focus: #7c9cff;
  --pos: #3dc58f; --pos-soft: rgba(61, 197, 143, 0.13); --neg: #ff6b63; --neg-soft: rgba(255, 107, 99, 0.13);
  --mix: #f0a14a; --mix-soft: rgba(240, 161, 74, 0.13); --ev: #3dc58f; --ev-track: rgba(255, 255, 255, 0.08);
  --run: #7c9cff; --run-soft: rgba(124, 156, 255, 0.14); --scrim: rgba(0, 0, 0, 0.62);
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-2: 0 16px 40px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --l0-bg: hsl(205 36% 16%); --l0-fg: hsl(205 72% 73%);
  --l1-bg: hsl(188 34% 15%); --l1-fg: hsl(188 65% 70%);
  --l2-bg: hsl(162 30% 15%); --l2-fg: hsl(162 55% 66%);
  --l3-bg: hsl(92  26% 15%); --l3-fg: hsl(92  48% 64%);
  --l4-bg: hsl(36  38% 16%); --l4-fg: hsl(36  78% 70%);
  --l5-bg: hsl(10  36% 17%); --l5-fg: hsl(10  68% 70%);
  color-scheme: dark;
}