/* ============================================
   UNIFIED MOTION LANGUAGE SYSTEM
   Cinematic timing & easing across all interactions
   ============================================ */
:root {
  /* ============================================
     GLOBAL TYPOGRAPHY TOKENS
     Cinematic, premium, mobile-friendly type scale
     ============================================ */
  --kv2-font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kv2-font-family-serif: "Cormorant Garamond", Georgia, serif;

  --kv2-font-hero: clamp(1.75rem, 3vw, 2.6rem);
  --kv2-line-hero: 0.98;
  --kv2-track-hero: 0;
  --kv2-weight-hero: 760;

  --kv2-font-page-title: clamp(1.5rem, 2.4vw, 2.1rem);
  --kv2-line-page-title: 1.08;
  --kv2-track-page-title: 0;
  --kv2-weight-page-title: 680;

  --kv2-font-section-title: clamp(1rem, 1.7vw, 1.3rem);
  --kv2-line-section-title: 1.16;
  --kv2-track-section-title: 0;
  --kv2-weight-section-title: 640;

  --kv2-font-card-title: clamp(0.95rem, 1.25vw, 1.12rem);
  --kv2-line-card-title: 1.28;
  --kv2-track-card-title: -0.012em;
  --kv2-weight-card-title: 620;

  --kv2-font-body: clamp(0.94rem, 1vw, 1rem);
  --kv2-line-body: 1.68;
  --kv2-track-body: 0;
  --kv2-weight-body: 400;

  --kv2-font-small: clamp(0.82rem, 0.9vw, 0.9rem);
  --kv2-line-small: 1.55;

  --kv2-font-caption: clamp(0.72rem, 0.78vw, 0.78rem);
  --kv2-line-caption: 1.42;
  --kv2-track-caption: 0.02em;

  --kv2-font-meta: clamp(0.68rem, 0.75vw, 0.76rem);
  --kv2-line-meta: 1.35;
  --kv2-track-meta: 0.08em;
  --kv2-weight-meta: 600;

  --kv2-font-button: clamp(0.78rem, 0.82vw, 0.88rem);
  --kv2-line-button: 1.1;
  --kv2-track-button: 0.025em;
  --kv2-weight-button: 560;

  --kv2-font-nav: clamp(0.78rem, 0.86vw, 0.9rem);
  --kv2-line-nav: 1.2;
  --kv2-track-nav: 0.02em;
  --kv2-weight-nav: 520;

  --kv2-font-label: var(--kv2-font-meta);
  --kv2-line-label: var(--kv2-line-meta);
  --kv2-track-label: 0.11em;
  --kv2-weight-label: 650;

  /* Legacy scale aliases keep old CSS consistent without flattening files. */
  --text-xs: var(--kv2-font-caption);
  --text-sm: var(--kv2-font-small);
  --text-base: var(--kv2-font-body);
  --text-md: clamp(1rem, 1.12vw, 1.08rem);
  --text-lg: var(--kv2-font-card-title);
  --text-xl: var(--kv2-font-section-title);
  --text-2xl: var(--kv2-font-page-title);
  --text-3xl: var(--kv2-font-page-title);
  --text-4xl: var(--kv2-font-hero);

  /* Unified Durations */
  --transition-micro: 0.15s; /* 150ms - ultra fast feedback */
  --transition-fast: 0.2s; /* 200ms - button presses, taps */
  --transition-base: 0.25s; /* 250ms - standard hover */
  --transition-smooth: 0.3s; /* 300ms - cards, panels */
  --transition-soft: 0.4s; /* 400ms - page elements */
  --transition-slow: 0.5s; /* 500ms - page entrance */
  --transition-cinematic: 0.6s; /* 600ms - atmospheric shifts */
  /* Unified Easing Curves - Cinematic Restraint */
  --ease-standard: cubic-bezier(0.2, 0.9, 0.4, 1.1); /* General interactions */
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth entrances */
  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1); /* Material-like calm */
  --ease-premium: cubic-bezier(0.2, 0.9, 0.3, 1); /* Premium feel */
  --ease-subtle: cubic-bezier(0.33, 1, 0.68, 1); /* Very subtle */
  /* Scale Limits - Extreme Restraint */
  --scale-hover-min: 1.01; /* Minimal scale for buttons */
  --scale-hover-base: 1.02; /* Standard hover scale for cards */
  --scale-hover-max: 1.03; /* Maximum scale allowed */
  /* Opacity Rhythm */
  --opacity-subtle: 0.7;
  --opacity-soft: 0.85;
  --opacity-fade: 0.95;

  /* Lyrics */
  --kv2-lyric-active: #F3F5F7;
  --kv2-lyric-fill-start: #8FE8B5;
  --kv2-lyric-fill-end: #D8C6FF;
  --kv2-lyric-inactive: #9A9AA5;
}

/* Z-index tokens live in core/style.css so every overlay shares one ladder. */