/* ============================================
   DESIGN TOKENS — Grayscale Minimalist
   Dark theme (default) + Light theme via alias
   ============================================ */

:root {
  /* ╔═══════════════════════════════════════════╗
     ║  DARK THEME BACKGROUND                   ║
     ║  ↓ Change this to adjust dark mode bg ↓  ║
     ╚═══════════════════════════════════════════╝ */
  --c-bg:          #111111;

  --c-surface:     #161616;
  --c-elevated:    #1c1c1c;
  --c-border:      #222222;
  --c-muted:       #555555;
  --c-secondary:   #888888;
  --c-tertiary:    #aaaaaa;
  --c-primary:     #e8e8e8;
  --c-white:       #f5f5f5;

  /* === Semantic Tokens (aliased — theme switches these) === */
  --bg-primary:    var(--c-bg);
  --bg-surface:    transparent;
  --text-primary:  var(--c-white);
  --text-secondary: var(--c-secondary);
  --text-muted:    var(--c-muted);

  /* Particle color for 3D scene (dark theme → white) */
  --particle-color: #ffffff;

  /* === Spacing Scale === */
  --sp-2xs: 0.25rem;
  --sp-xs:  0.5rem;
  --sp-sm:  0.75rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;

  /* === Typography === */
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;

  --ts-xs:      clamp(0.70rem,  0.64rem + 0.18vw, 0.82rem);
  --ts-sm:      clamp(0.82rem,  0.75rem + 0.18vw, 0.93rem);
  --ts-base:    clamp(0.93rem,  0.87rem + 0.23vw, 1.05rem);
  --ts-lg:      clamp(1.05rem,  0.98rem + 0.35vw, 1.28rem);
  --ts-xl:      clamp(1.28rem,  1.16rem + 0.58vw, 1.74rem);
  --ts-2xl:     clamp(1.74rem,  1.39rem + 1.16vw, 2.55rem);
  --ts-display: clamp(2.78rem,  2.32rem + 2.78vw, 5.57rem);
  --ts-clock:   clamp(2.60rem,  2.04rem + 2.78vw, 5.10rem);

  /* === Transitions === */
  --ease-fast: 150ms ease;
  --ease-base: 250ms ease;
  --ease-slow: 400ms ease;
}

/* ╔═══════════════════════════════════════════╗
   ║  LIGHT THEME                             ║
   ║  ↓ Change --c-bg-light for light bg   ↓  ║
   ╚═══════════════════════════════════════════╝ */
[data-theme="light"] {
  --c-bg:          #f2efe9;   /* ← Pastel cream white — change this */
  --c-surface:     #eae7e0;
  --c-elevated:    #e2dfd8;
  --c-border:      #d5d2cb;
  --c-muted:       #999690;
  --c-secondary:   #6b6862;
  --c-tertiary:    #555250;
  --c-primary:     #2a2825;
  --c-white:       #1a1816;

  --particle-color: #1a1816;
}