/* ============================================================================
   I2S Orchestra — Design Tokens (fluid, themeable, production-ready)
   - Mobile-first fluid type + spacing (clamp-based, 4K-safe)
   - Mature violet palette (no pink), luxury neutrals
   - Works with theme toggle: html[data-theme="dark"] OR :root[data-theme="dark"]
   - Provides aliases used by welcome.css (w-page, w-narrow, radius, shadows, etc.)
   - Zero side effects (variables only) + tiny a11y/motion helpers at end
   ========================================================================== */

/* --------------------------------- Core ---------------------------------- */
:root{
  /* Breakpoints (informational) */
  --bp-xs: 360px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px;

  /* Layout / Containers */
  --wrap-narrow: 640px;
  --wrap: 960px;
  --wrap-wide: 1200px;
  --wrap-max: min(96vw, 1280px);

  /* Aliases (for welcome.css and future pages) */
  --w-page: var(--wrap-max);
  --w-narrow: min(880px, 100%);

  /* Fluid typography (compact, luxury) */
  --fs-400: clamp(0.95rem, 0.18vw + 0.9rem, 1.05rem);
  --fs-500: clamp(1.10rem, 0.35vw + 1rem, 1.25rem);
  --fs-600: clamp(1.30rem, 0.52vw + 1.06rem, 1.55rem);
  --fs-700: clamp(1.55rem, 0.85vw + 1.1rem, 2.05rem);
  --fs-800: clamp(1.90rem, 1.40vw + 1.2rem, 2.70rem);
  --fs-900: clamp(2.30rem, 2.10vw + 1.3rem, 3.45rem);

  /* Spacing (tight, responsive) */
  --space-1: clamp(6px,  0.6vw, 10px);
  --space-2: clamp(8px,  0.9vw, 12px);
  --space-3: clamp(12px, 1.2vw, 16px);
  --space-4: clamp(16px, 1.6vw, 24px);
  --space-5: clamp(20px, 2.0vw, 32px);
  --space-6: clamp(24px, 2.4vw, 40px);
  --space-7: clamp(28px, 3.0vw, 52px);
  --space-8: clamp(32px, 3.5vw, 64px);

  /* Section rhythm (aliases used in welcome.css) */
  --stack-xs: 10px;
  --stack-sm: var(--space-3);
  --stack-md: var(--space-5);
  --stack-lg: var(--space-6);
  --stack-xl: var(--space-7);

  /* Radii / Elevation */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 14px;
  --shadow-0: 0 2px 6px rgba(0,0,0,.06);
  --shadow-1: 0 6px 20px rgba(0,0,0,.10);
  --shadow-2: 0 12px 32px rgba(0,0,0,.14);
  --blur: saturate(120%) blur(10px);

  /* Timing / Easing */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 160ms; --med: 240ms; --slow: 360ms;

  /* Z-index scale (for layering backgrounds, modals, etc.) */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal: 1000;

  /* Buttons (shared) */
  --btn-h: 42px;
  --btn-radius: 10px;
  --ring: rgba(91,64,232,.35);

  /* Brand — Light (mature, no pinks) */
  --bg: #F6EFFE;             /* soft lilac wash */
  --surface: #FFFFFF;
  --surface-2: #F2ECF8;
  --text: #0D1222;
  --muted: #64708B;
  --ink: #0B1020;            /* deep ink accents */
  --hairline: #E4E8F2;

  --accent: #9b4ee5;         /* Royal Violet */
  --accent-2: #9b4ee5;       /* Slightly deeper for contrast */
  --accent-3: #5a20a0;       /* Hover/pressed */

  --success: #16B978;
  --warning: #E3A000;
  --danger:  #E44D4D;

  /* Glass overlays */
  --glass-1: rgba(255,255,255,.70);
  --glass-2: rgba(255,255,255,.35);

  /* Bars / chrome */
  --bar-h-mobile: 54px;
  --bar-h-desktop: 56px;

  /* Viewport helper */
  --dvh: 100dvh;

  /* Base font */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Compatibility aliases (used in welcome.css) */
  --accent-strong: var(--accent-2);
  --accent-hover:  var(--accent-3);
}

/* --------------------------------- Dark ---------------------------------- */
/* Support both html[data-theme="dark"] and :root[data-theme="dark"] */
html[data-theme="dark"], :root[data-theme="dark"]{
  --bg: #0E1116;
  --surface: #141822;
  --surface-2: #0F131C;
  --text: #E9EEF9;
  --muted: #A6B2CA;
  --ink: #E9EEF9;
  --hairline: rgba(255,255,255,.12);

  --accent:   #9b4ee5;       /* Elegant lift for dark */
  --accent-2: #5a20a0;       /* Primary button */
  --accent-3: #5a20a0;       /* Hover/pressed */

  --glass-1: rgba(10,12,18,.72);
  --glass-2: rgba(10,12,18,.45);

  /* Slightly deeper shadows in dark for parity */
  --shadow-0: 0 2px 10px rgba(0,0,0,.25);
  --shadow-1: 0 8px 28px rgba(0,0,0,.32);
  --shadow-2: 0 14px 40px rgba(0,0,0,.40);
}

/* ------------------------------ Opt-in system ---------------------------- */
/* Progressive preference fallback: respect system dark if no explicit toggle */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
  }
}

/* ------------------------------- Utilities ------------------------------- */
/* These are tiny, safe, and global. Keep here for a11y/motion parity. */
:root{ color-scheme: light; }
html[data-theme="dark"], :root[data-theme="dark"]{ color-scheme: dark; }

/* Reduce motion respect (used by JS/CSS animations) */
@media (prefers-reduced-motion: reduce){
  :root{
    --fast: 0ms; --med: 0ms; --slow: 0ms;
  }
}

/* Visually hidden (for screen readers) */
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }