/* ═══════════════════════════════════════════════════════════════
   sassquatchmusic.com — design tokens
   liquid-chrome / vaporwave / observatory
   ═══════════════════════════════════════════════════════════════ */

@layer tokens, themes, base, components, pages, tweaks;

@layer tokens {
  :root {
    /* ── type ── */
    --font-display: "Space Grotesk", "Hubot Sans", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --fs-eyebrow: 11px;
    --fs-body: 15px;
    --fs-lead: 17px;
    --fs-h3: 22px;
    --fs-h2: 32px;
    --fs-h1: 56px;
    --fs-display: clamp(64px, 11vw, 168px);

    --tracking-tight: -0.02em;
    --tracking-wide: 0.18em;
    --tracking-mono: 0.04em;

    /* ── space ── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* ── radii ── */
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 14px;
    --r-4: 20px;
    --r-5: 28px;
    --r-pill: 999px;

    /* ── motion ── */
    --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
    --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);
    --t-fast: 160ms;
    --t-med: 320ms;
    --t-slow: 600ms;

    /* ── glass ── */
    /* Reduced --glass-blur 18px → 10px. backdrop-filter is a major GPU
     * cost across stacked glass surfaces; 10px still reads as soft
     * frosted glass. Override via data-glass="heavy" for more depth
     * (with attendant perf cost). */
    --glass-blur: 10px;
    --glass-saturate: 140%;
    --glass-edge: 0.5px;

    /* set per-mode below */
    --grain-strength: 0.05;
    --scanline-strength: 0;
  }
}

@layer themes {
  /* ── default: dark + crimson ── */
  :root,
  [data-mode="dark"] {
    --bg-deep: #05060a;
    --bg-base: #0a0c14;
    --bg-raised: #0f1220;
    --bg-pane: rgba(18, 22, 36, 0.55);
    --bg-pane-strong: rgba(22, 27, 44, 0.78);

    --line-hairline: rgba(255, 255, 255, 0.08);
    --line-edge: rgba(255, 255, 255, 0.14);
    --line-bright: rgba(255, 255, 255, 0.32);

    --text-primary: oklch(96% 0.005 240);
    --text-secondary: oklch(72% 0.01 240);
    --text-muted: oklch(54% 0.015 240);

    --chrome-1: rgba(255, 255, 255, 0.95);
    --chrome-2: rgba(180, 200, 230, 0.45);
    --chrome-3: rgba(120, 140, 180, 0.18);
  }

  [data-mode="light"] {
    --bg-deep: #efeae0;
    --bg-base: #f6f1e6;
    --bg-raised: #fbf6ec;
    --bg-pane: rgba(255, 252, 245, 0.72);
    --bg-pane-strong: rgba(255, 252, 245, 0.92);

    --line-hairline: rgba(20, 18, 12, 0.08);
    --line-edge: rgba(20, 18, 12, 0.14);
    --line-bright: rgba(20, 18, 12, 0.32);

    --text-primary: oklch(20% 0.01 60);
    --text-secondary: oklch(38% 0.015 60);
    --text-muted: oklch(54% 0.015 60);

    --chrome-1: rgba(40, 30, 20, 0.85);
    --chrome-2: rgba(80, 60, 40, 0.45);
    --chrome-3: rgba(120, 100, 80, 0.22);
  }

  /* ── accents ── */
  [data-theme="crimson"] {
    --accent: oklch(60% 0.235 14);
    --accent-soft: oklch(60% 0.235 14 / 0.18);
    --accent-glow: oklch(65% 0.27 14 / 0.6);
    --accent-hot: oklch(70% 0.27 14);
    --accent-2: oklch(78% 0.16 60); /* sun gold */
  }
  [data-theme="matrix"] {
    --accent: oklch(82% 0.24 142);
    --accent-soft: oklch(82% 0.24 142 / 0.16);
    --accent-glow: oklch(85% 0.27 142 / 0.5);
    --accent-hot: oklch(90% 0.27 142);
    --accent-2: oklch(72% 0.18 180);
  }
  [data-theme="neptune"] {
    --accent: oklch(75% 0.15 220);
    --accent-soft: oklch(75% 0.15 220 / 0.18);
    --accent-glow: oklch(78% 0.18 220 / 0.55);
    --accent-hot: oklch(82% 0.2 220);
    --accent-2: oklch(70% 0.16 280);
  }
  [data-theme="tempest"] {
    --accent: oklch(64% 0.28 300);
    --accent-soft: oklch(64% 0.28 300 / 0.18);
    --accent-glow: oklch(70% 0.3 300 / 0.55);
    --accent-hot: oklch(72% 0.3 300);
    --accent-2: oklch(70% 0.22 340);
  }

  [data-theme="crimson"][data-mode="light"] {
    --accent: oklch(50% 0.21 14);
    --accent-glow: oklch(55% 0.23 14 / 0.4);
    --accent-hot: oklch(45% 0.22 14);
  }
  [data-theme="matrix"][data-mode="light"] {
    --accent: oklch(50% 0.18 142);
    --accent-glow: oklch(55% 0.2 142 / 0.35);
    --accent-hot: oklch(45% 0.2 142);
  }
  [data-theme="neptune"][data-mode="light"] {
    --accent: oklch(50% 0.16 220);
    --accent-glow: oklch(55% 0.18 220 / 0.4);
    --accent-hot: oklch(45% 0.18 220);
  }
  [data-theme="tempest"][data-mode="light"] {
    --accent: oklch(48% 0.27 300);
    --accent-glow: oklch(55% 0.28 300 / 0.4);
    --accent-hot: oklch(42% 0.27 300);
  }
}