/* =============================================================
   DESIGN TOKENS — Lumière Studio · "Liquid Beauty"
   All CSS custom properties: colors, typography, spacing, motion.
   Change values here to retheme the entire site.
   ============================================================= */

:root {
  /* --- Color system --- */
  --void: #050505;
  --surface: #0e0e0e;
  --cream: #faf6f0;
  --nude: #e8ddd4;
  --lumiere: #c8a882;
  --lumiere-light: #e2c9a8;
  --ink: #1a1410;
  --fog: #6b6560;
  --white: #ffffff;

  --lumiere-rgb: 200, 168, 130;
  --void-rgb: 5, 5, 5;
  --cream-rgb: 250, 246, 240;

  /* --- Typography --- */
  --font-display: 'Bodoni Moda', serif;
  --font-body: 'Instrument Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  --weight-thin: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --size-hero: clamp(4rem, 10vw, 12rem);
  --size-display: clamp(2.75rem, 6vw, 6rem);
  --size-h2: clamp(2.25rem, 5vw, 4rem);
  --size-h3: clamp(1.5rem, 3vw, 2.25rem);
  --size-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-mono: 0.85rem;

  /* --- Spacing scale --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  /* --- Container --- */
  --container-width: 1440px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);

  /* --- Motion --- */
  --ease-liquid: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;

  --marquee-speed: 40s;

  /* --- Radius & borders --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;
  --border-hairline: 1px solid rgba(var(--lumiere-rgb), 0.25);

  /* --- Z-index layers --- */
  --z-menu: 250;
  --z-ambient: 240;
  --z-nav: 260;
  --z-loader: 400;
}