/* tokens.css — single source of truth for all design tokens */

:root {

  /* ─── COLOR ──────────────────────────────────────────────
     WMWH brand — pure monochrome, gallery-wall philosophy.
     - #050505 near-black (logo fill, brand preview --bg)
     - #F6F5F0 gallery-wall white (reads white-first, warmth on dwell)
     - #F5F5F0 sibling cream for type-on-dark (brand preview reference)
     - Neutral grays from brand preview (#A1A1A1, #6F6F6F)
     No accent hue. All emphasis via inversion contrast.
  ──────────────────────────────────────────────────────── */
  --color-bg:             #FFFFFF;  /* white-first — no cream backgrounds */
  --color-bg-dark:        #050505;
  --color-charcoal:       #1F1F24;  /* nav — lifted off pure black so the bar reads as a distinct object */
  --color-surface:        #FFFFFF;  /* same white as bg — sections separated by border/shadow, not tint */
  --color-surface-dark:   #0B0B0D;
  --color-text-primary:   #050505;
  --color-text-secondary: #6F6F6F;
  --color-text-inverse:   #F5F5F0;
  --color-text-muted:     #A1A1A1;

  /* Primary CTA — brand near-black, inversion-based contrast.
     ONE USE per page applies to weight, not hue (multiple solid-black
     fills dilute "this is THE action"). */
  --color-accent:         #050505;
  --color-accent-hover:   #1F1F1F;

  --color-border:         rgba(5, 5, 5, 0.10);
  --color-border-dark:    rgba(245, 245, 240, 0.10);
  --color-spotlight:      rgba(245, 245, 240, 0.06);

  /* ─── TYPOGRAPHY ─────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;

  --size-hero:   clamp(4rem, 9vw, 9rem);
  --size-h1:     clamp(2.5rem, 5vw, 5rem);
  --size-h2:     clamp(1.75rem, 3vw, 3rem);
  --size-h3:     clamp(1.25rem, 2vw, 1.75rem);
  --size-body:   1rem;
  --size-small:  0.875rem;
  --size-eyebrow:0.6875rem;

  --leading-tight: 1.05;
  --leading-body:  1.65;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.12em;

  /* ─── SPACING ────────────────────────────────────────── */
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     1.75rem;   /* tightened from 2rem — less dead air */
  --space-lg:     3rem;      /* tightened from 4rem */
  --space-xl:     5rem;      /* tightened from 8rem — luxury, not empty */
  --space-2xl:    9rem;      /* tightened from 14rem */
  --section-pad:  clamp(3rem, 6vw, 6rem); /* tightened from 5-10rem — sections breathe, not yawn */

  /* ─── LAYOUT ─────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* ─── RADIUS ─────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* ─── SHADOW ─────────────────────────────────────────── */
  --shadow-card: 0 2px 12px rgba(5, 5, 5, 0.06);
  --shadow-nav:  0 4px 24px rgba(5, 5, 5, 0.08);

  /* ─── Z-INDEX ────────────────────────────────────────── */
  --z-base:       0;
  --z-above:      10;
  --z-sticky:     100;
  --z-nav:        900;
  --z-drawer:     950;
  --z-overlay:    940;
  --z-cursor:     9999;
  --z-transition: 9998;

  /* ─── MOTION ─────────────────────────────────────────── */
  /* All tween durations/eases live in animations.js MOTION_SYSTEM.
     These vars are for CSS-only transitions only. */
  --ease-feedback: cubic-bezier(0.37, 0, 0.63, 1);   /* sine.inOut equivalent */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);    /* power2.out equivalent */
  --ease-morph:    cubic-bezier(0.87, 0, 0.13, 1);   /* power3.inOut equivalent */

  --dur-feedback: 0.18s;
  --dur-entrance: 0.6s;
  --dur-morph:    0.5s;

}