/**
 * TourSpine — Design Tokens (dark-first)
 * =======================================
 * Metaphor: the spine holds everything up — structural, quiet, essential.
 * Visual language: deep neutrals, single accent, high contrast for legibility
 * at 2am in a dressing room. Dark-first because tours happen at night.
 */

:root {
  color-scheme: dark;

  /* ── Surface (layered neutrals) ───────────────────────────── */
  --color-bg:              #0a0a0f;   /* page background */
  --color-surface:         #111116;   /* card/panel */
  --color-surface-2:       #1a1a22;   /* raised elements */
  --color-surface-3:       #24242e;   /* hover/active */
  --color-border:          #27272f;   /* subtle borders */
  --color-border-strong:   #3a3a45;   /* prominent borders, focus */

  /* ── Text ─────────────────────────────────────────────────── */
  --color-text:            #f5f5f7;   /* primary */
  --color-text-muted:      #a1a1aa;   /* secondary */
  --color-text-subtle:     #71717a;   /* tertiary */
  --color-text-inverse:    #0a0a0f;   /* on light buttons */

  /* ── Accent (sparingly — reserved for primary actions) ────── */
  --color-accent:          #eab308;   /* spine gold — warm, professional */
  --color-accent-hover:    #facc15;
  --color-accent-subtle:   #78350f;

  /* ── Semantic ─────────────────────────────────────────────── */
  --color-error:           #f87171;
  --color-warning:         #fbbf24;
  --color-success:         #4ade80;
  --color-info:            #60a5fa;

  /* ── Typography ───────────────────────────────────────────── */
  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
    'Helvetica Neue', system-ui, sans-serif;
  --font-serif:
    'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Touch / hit targets ──────────────────────────────────── */
  --min-touch: 44px;

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadow ───────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.5);

  /* ── Focus ring (keyboard nav) ────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(234, 179, 8, 0.4);

  /* ── Motion ───────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);

  /* ── Safe areas (mobile notch/home indicator) ─────────────── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Focus styles ─────────────────────────────────────────── */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}