/* ═══════════════════════════════════════════════════════════════════
   MAKENA BUILDING GROUP — Design Tokens
   Extracted from the luxury editorial landing page
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Color Palette ─── */
  --ink:       #0C0C0A;
  --ink2:      #141410;
  --panel:     #1A1A16;
  --border:    #2A2A24;
  --gold:      #A8895E;
  --gold-l:    #C4A878;
  --gold-d:    #7A6240;
  --cream:     #F5F0E8;
  --cream2:    #EDE6D6;
  --sand:      #C8BA9E;
  --text:      #9A9080;
  --white:     #FAFAF6;

  /* ─── Typography ─── */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-main:    'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ─── Spacing Rhythm ─── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ─── Border Radius ─── */
  --rad-sm: 2px;
  --rad-md: 4px;
  --rad-lg: 8px;
  --rad-xl: 16px;

  /* ─── Transitions ─── */
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:    150ms var(--ease);
  --t-base:    300ms var(--ease);
  --t-slow:    500ms var(--ease);
  --t-reveal:  800ms var(--ease);

  /* ─── Shadows ─── */
  --sh-sm:  0 1px 3px rgba(0,0,0,0.08);
  --sh-md:  0 4px 12px rgba(0,0,0,0.10);
  --sh-lg:  0 8px 30px rgba(0,0,0,0.12);
  --sh-xl:  0 20px 60px rgba(0,0,0,0.15);
  --sh-gold: 0 0 40px rgba(184,151,90,0.2);

  /* ─── Z-Index Scale ─── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-preloader:  500;
  --z-cursor:    600;

  /* ─── Layout ─── */
  --max-w: 1240px;
  --inner-pad: 4rem;
}

/* Dark/Light section context helpers */
[data-section="dark"]  { --section-bg: var(--ink);    --section-fg: var(--white); --section-text: var(--text); }
[data-section="dark2"]  { --section-bg: var(--ink2);   --section-fg: var(--white); --section-text: var(--text); }
[data-section="cream"] { --section-bg: var(--cream);  --section-fg: var(--ink);  --section-text: #6A5A4A; }