/* Luneia design tokens — single source for color, type, space, radius, motion.
   Direction: "night desk" — warm dark, moonlight accent, sound colors are literal. */
:root {
  /* Surfaces (warm ink) */
  --bg:        #0f0d0b;
  --bg-2:      #15120f;
  --surface:   #1b1713;
  --surface-2: #231e19;
  --line:      rgba(240, 228, 210, 0.10);
  --line-2:    rgba(240, 228, 210, 0.18);

  /* Text */
  --text:   #f2ebe0;
  --text-2: #c9bfb0;
  --text-3: #8f8576;

  /* Accents */
  --moon:      #ecdfc6;   /* primary accent: moonlight */
  --lamp:      #e2a868;   /* warm highlight, used sparingly */
  --on-moon:   #1a1511;

  /* Sound colors (match thumbnail coding: brown / pink / white / blue alerts) */
  --c-brown:  #a8744f;
  --c-pink:   #dca3a8;
  --c-white:  #ebe6dc;
  --c-rain:   #8ea7b3;
  --c-ocean:  #5f9aa6;
  --c-fire:   #d9824c;
  --c-alerts: #8fa7cf;

  /* Type */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --fs-hero: clamp(3rem, 1.6rem + 6.2vw, 7rem);

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --tracking-caps: 0.12em;

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 760px;

  /* Radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* Shadow (soft, warm, rarely used) */
  --shadow-1: 0 1px 0 rgba(255, 240, 220, 0.04) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 1px 0 rgba(255, 240, 220, 0.06) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.8);

  /* Motion — slow, breath-like */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 700ms;
  --t-reveal: 900ms;

  /* Breakpoints (reference only; used in media queries) : 640 / 900 / 1200 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-reveal: 0ms; }
}