/* ==========================================================================
   LongLeo Portfolio — Design Tokens
   Motion tokens follow SEOSONA MOTION-SPEC (ease-out is the default curve).
   Type scale is fluid (375px → 1280px). Everything else is a 4px rhythm.
   This file must load BEFORE styles.css.
   ========================================================================== */

:root {
  /* ── MOTION: durations ───────────────────────────────────────────────
     instant   hover/press feedback, tiny state flips
     fast      micro-interactions, button/toggle, small reveals
     base      standard transitions, card/element entrances
     slow      section transitions, larger reveals
     deliberate hero moments
     cinematic reserved — video/launch-film moments only              */
  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;
  --dur-deliberate: 640ms;
  --dur-cinematic: 1200ms;

  /* ── MOTION: easing ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* default — entering  */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);          /* leaving the screen  */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* starts+ends on screen */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot    */

  /* ── MOTION: stagger (restraint budget: 40–80ms, max 3 at once) ─── */
  --stagger: 60ms;
  --stagger-tight: 40ms;

  /* ── TYPE: fluid scale ──────────────────────────────────────────── */
  --text-xs: clamp(0.75rem, 1.2vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 1.4vw, 0.875rem);
  --text-base: clamp(0.9375rem, 1.6vw, 1rem);
  --text-lg: clamp(1rem, 1.8vw, 1.125rem);
  --text-xl: clamp(1.125rem, 2vw, 1.25rem);
  --text-2xl: clamp(1.375rem, 2.5vw, 1.5rem);
  --text-3xl: clamp(1.75rem, 3vw, 2rem);
  --text-4xl: clamp(2rem, 4vw, 2.5rem);
  --text-5xl: clamp(2.5rem, 5vw, 3.5rem);
  --text-hero: clamp(2.75rem, 6vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.1em;

  /* Measure — VN diacritics orphan more than English, keep lines short */
  --measure: 68ch;
  --measure-narrow: 52ch;

  /* ── SPACING: 4px rhythm ────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Z-INDEX scale — prevents the lightbox-under-nav class of bug ── */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 900;
  --z-max: 9999;

  /* ── Accent glows derived from the amber brand ──────────────────── */
  --glow-amber-soft: 0 8px 24px -8px rgba(245, 158, 11, 0.28);
  --glow-amber-strong: 0 20px 44px -12px rgba(245, 158, 11, 0.4);
  --spotlight-tint: rgba(252, 211, 77, 0.14);
}

/* Light theme needs a cooler, tighter glow or cards look muddy */
:root.light-theme {
  --glow-amber-soft: 0 8px 24px -10px rgba(180, 83, 9, 0.18);
  --glow-amber-strong: 0 20px 40px -14px rgba(180, 83, 9, 0.26);
  --spotlight-tint: rgba(249, 115, 22, 0.1);
}

/* ── Reduced motion ──────────────────────────────────────────────────
   Durations shorten to a uniform, gentle fade rather than snapping to
   zero: a colour or opacity change still communicates, and killing it
   outright makes state changes harder to follow, not easier. The
   movement itself is removed in animations.css; JS reads the same media
   query and skips its own animation loops entirely. */