/* VCP Design System — tokens (single source of truth). See issue #1.
   Source design: claude.ai/design "VCP Component System" — liquid glass over
   brushed silver on graphite. */
:root {
  /* Color — graphite base */
  --bg: #0B0C0E;
  --bg-gradient: radial-gradient(130% 90% at 50% -12%, #191B1F 0%, #101114 46%, #0A0B0D 100%);
  --surface: #17191D;
  --surface-raised: #2B2E34;

  /* Color — silver */
  --silver: #CDD2D9;
  --silver-bright: #E8EAED;
  --silver-deep: #9AA1AB;
  /* THE signature look: sheen for text/detail effects */
  --silver-sheen: linear-gradient(145deg, #FFFFFF 0%, #CDD2D9 42%, #9AA1AB 66%, #EEF1F4 100%);
  /* Metal fill for primary buttons / featured chips */
  --silver-metal: linear-gradient(145deg, #FBFCFD, #C3C9D1);
  /* Full brushed-silver panel (swatches, media accents) */
  --silver-panel: linear-gradient(140deg, #FBFCFD 0%, #D6DBE1 34%, #9AA1AB 62%, #C3C9D1 82%, #F0F2F5 100%);
  --on-silver: #15171B;
  /* Veil behind fixed overlays (dip / cross-fade) */
  --scrim: rgba(11, 12, 14, 0.78);

  /* Text */
  --text: #E8EAED;
  --text-soft: rgba(232, 234, 237, 0.62);
  --text-muted: rgba(232, 234, 237, 0.5);
  --text-faint: rgba(232, 234, 237, 0.38);

  /* Lines */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-hover: rgba(255, 255, 255, 0.32);

  /* Liquid glass material */
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  /* Near-opaque glass for floating menus (mobile nav dropdown): a popover
     that escapes its blurred parent can't rely on backdrop-filter for
     legibility, so it carries its own body */
  --glass-bg-solid: linear-gradient(135deg, rgba(43, 46, 52, 0.97), rgba(23, 25, 29, 0.97));
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 24px;
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --shadow-float: 0 24px 56px -26px rgba(0, 0, 0, 0.72);
  --shadow-silver: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 24px -10px rgba(0, 0, 0, 0.65);

  /* Focus / feedback */
  --focus-ring: #CDD2D9;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-28: 1.75rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --tracking-label: 0.24em;
  --tracking-eyebrow: 0.34em;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
  /* Ambient/looping animation duration — deliberately separate from
     --dur-fast/--dur-med (interaction transitions): those collapse to 0ms
     under reduced-motion for snappy-but-instant transitions, whereas a
     looping animation needs its @keyframes suppressed outright, not sped
     up to 0ms (which would flash rather than stop). See the
     prefers-reduced-motion block below. Slow and unhurried at idle — the
     JS-driven randomization in js/voice-widget.js varies the actual cycle
     length per-loop around this baseline, so it never reads as a fixed,
     mechanically repeating cycle the way a bare CSS @keyframes loop does. */
  --dur-ambient: 9000ms;

  /* Stacking context scale — every fixed/sticky element picks a rung here
     instead of an inline magic number. */
  --z-nav: 100;
  --z-widget: 500;

  /* Page-transition title dip (issue #57): quick dip in, slow cinematic fade-away */
  --dur-dip-in: 320ms;
  --dur-dip-out: 1100ms;

  /* Spacing (used by components) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 8rem;

  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-ambient: 0ms;
    --dur-dip-in: 0ms;
    --dur-dip-out: 0ms;
  }
}