/* ==========================================================================
   variables.css — design tokens (colors, fonts, spacing, motion)
   ========================================================================== */

:root {
  /* ----- Color palette ----- */
  --color-bg:           #050813;  /* space black */
  --color-bg-alt:       #0A1428;  /* deep blue */
  --color-text:         #E8EEF7;  /* star white */
  --color-text-soft:    #F0E8D8;  /* warm cream */
  --color-text-mute:    #8896A8;  /* star gray */
  --color-accent-1:     #E8B45C;  /* warm gold (impossible) */
  --color-accent-2:     #B8A8E0;  /* soft lilac (done) */
  --color-accent-3:     #E89641;  /* warm orange (planet) */
  --color-accent-4:     #7FB8E8;  /* light blue (cosmic ice) */
  --color-line:         #2A3A52;  /* mist border */
  --color-overlay:      rgba(10, 20, 40, 0.85);

  /* ----- Typography ----- */
  --font-display: 'Space Grotesk', 'Noto Sans TC', system-ui, sans-serif;
  --font-body:    'Inter', 'Noto Sans TC', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* fluid display sizing (clamp 8vw -> 12vw) */
  --fs-display:  clamp(3.5rem, 8vw, 9rem);
  --fs-h1:       clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:       clamp(2rem, 3.5vw, 3rem);
  --fs-h3:       1.5rem;
  --fs-subtitle: 0.95rem;
  --fs-body:     1rem;
  --fs-small:    0.85rem;

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

  --container-max: 1280px;
  --nav-height:    72px;

  /* ----- Motion ----- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
  --dur-xslow:   800ms;

  /* ----- Radius ----- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ----- Z indices ----- */
  --z-canvas: 0;
  --z-hero:   5;
  --z-video:  6;
  --z-skip:   8;
  --z-content: 10;
  --z-nav:    20;
  --z-dropdown: 30;
  --z-lightbox: 40;
}