/* Design tokens — single source of truth for the city UI.
   Ported from the v1 :root so the two implementations stay visually identical
   while we migrate. Spacing scale is NEW (v1 used ad-hoc margins everywhere). */
:root {
  --ink: #1a1a1a;
  --bright: #ffffff;   /* on-dark text; warms to cream in night mode */
  --paper: #faf8f5;
  --amber: #c8842a;       /* brand accent (strokes, pins, small text) */
  --amber-hi: #f2ab2e;    /* brighter highlight fill (now-playing row) */
  --muted: color-mix(in srgb, var(--ink) 55%, transparent);
  --faint: color-mix(in srgb, var(--ink) 10%, transparent);

  --serif: 'Playfair Display', Georgia, serif;
  --belle: 'Playfair Display', Georgia, serif;   /* script font retired — serif masthead */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* dark glass (map chrome) */
  --glass-bg: rgba(40, 40, 40, 0.28);
  --glass-blur: blur(24px) saturate(1.6);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  --glass-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --glass-hover: rgba(255, 255, 255, 0.08);

  /* spacing scale (4px base) — one rhythm for the whole sidebar */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;

  --banner-h: 28px;
  --sidebar-w: 380px;
  --sidebar-pad: 20px;
  --radius: 10px;

  /* one section-label style for the whole column (v1 had three) */
  --label-size: 10px;
  --label-weight: 600;
  --label-track: 2px;

  --hover-tint: color-mix(in srgb, var(--ink) 4%, transparent);
}

html.sat-mode {
  --glass-bg: rgba(30, 30, 30, 0.42);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  --glass-text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }