/* =========================================================================
   LUXURY ESTATE — DESIGN TOKENS
   A light-luxury system. Warm ivory paper, ink text, one gold accent.
   Nothing here is decorative; every value is referenced downstream.
   ========================================================================= */

:root {
  /* ---------- SURFACES ------------------------------------------------- */
  --paper:        #FAF9F7;   /* primary background — warm ivory          */
  --paper-2:      #F4F2EE;   /* secondary background — bone              */
  --paper-3:      #EDEAE4;   /* tertiary / inset wells                   */
  --card:         rgba(255, 255, 255, 0.72);
  --card-solid:   #FFFFFF;
  --ink-surface:  #0E0D0C;   /* rare inverted block (footer, video acts) */
  --ink-surface-2:#1A1917;

  /* ---------- INK ------------------------------------------------------ */
  --ink:          #0A0A0A;   /* headings                                 */
  --ink-80:       #232220;
  --muted:        #6B6B6B;   /* body copy                                */
  --muted-2:      #8E8B85;   /* captions, meta                           */
  --on-ink:       #F7F5F1;   /* text on dark surfaces                    */
  --on-ink-muted: rgba(247, 245, 241, 0.62);

  /* ---------- GOLD ----------------------------------------------------- */
  --gold:         #B8912C;   /* AA-safe gold for text/borders on ivory    */
  --gold-bright:  #D4AF37;   /* the brand gold — fills, marks, gradients  */
  --gold-deep:    #8C6D1F;   /* pressed / active                          */
  --gold-tint:    rgba(212, 175, 55, 0.10);
  --gold-tint-2:  rgba(212, 175, 55, 0.22);
  --gold-grad:    linear-gradient(115deg, #C9A227 0%, #EBD07A 38%, #B8912C 62%, #F0DFA0 100%);

  /* ---------- LINES ---------------------------------------------------- */
  --line:         rgba(10, 10, 10, 0.09);
  --line-soft:    rgba(10, 10, 10, 0.055);
  --line-strong:  rgba(10, 10, 10, 0.16);
  --line-on-ink:  rgba(255, 255, 255, 0.12);

  /* ---------- ELEVATION ------------------------------------------------
     Light-mode luxury lives or dies on shadow discipline: wide, soft,
     low-opacity, warm-tinted. Never grey, never tight.                    */
  --sh-xs: 0 1px 2px rgba(24, 20, 14, 0.04);
  --sh-sm: 0 2px 8px rgba(24, 20, 14, 0.05), 0 1px 2px rgba(24, 20, 14, 0.03);
  --sh-md: 0 10px 30px rgba(24, 20, 14, 0.07), 0 2px 6px rgba(24, 20, 14, 0.035);
  --sh-lg: 0 24px 60px rgba(24, 20, 14, 0.09), 0 6px 16px rgba(24, 20, 14, 0.04);
  --sh-xl: 0 44px 100px rgba(24, 20, 14, 0.13), 0 12px 28px rgba(24, 20, 14, 0.05);
  --sh-gold: 0 20px 60px rgba(184, 145, 44, 0.18);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* ---------- GLASS ---------------------------------------------------- */
  --glass-bg:     rgba(255, 255, 255, 0.62);
  --glass-bg-2:   rgba(255, 255, 255, 0.42);
  --glass-blur:   blur(22px) saturate(180%);
  --glass-line:   rgba(255, 255, 255, 0.85);

  /* ---------- TYPE ----------------------------------------------------- */
  --font-display: 'General Sans', 'Neue Montreal', 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale — 360px → 1920px, clamped so ultrawide never breaks.     */
  --t-hero:   clamp(3.2rem, 11.5vw, 12.5rem);
  --t-d1:     clamp(2.6rem, 6.6vw, 6.5rem);
  --t-d2:     clamp(2.1rem, 4.6vw, 4.2rem);
  --t-d3:     clamp(1.7rem, 3.2vw, 2.9rem);
  --t-h4:     clamp(1.3rem, 1.9vw, 1.7rem);
  --t-h5:     clamp(1.06rem, 1.3vw, 1.22rem);
  --t-body:   clamp(0.97rem, 1.05vw, 1.06rem);
  --t-lead:   clamp(1.06rem, 1.35vw, 1.3rem);
  --t-sm:     0.875rem;
  --t-xs:     0.78rem;
  --t-eyebrow:0.7rem;

  --lh-tight: 0.92;
  --lh-snug:  1.1;
  --lh-body:  1.72;

  --ls-hero:   -0.045em;
  --ls-display:-0.032em;
  --ls-tight:  -0.018em;
  --ls-eyebrow: 0.24em;

  /* ---------- SPACE ---------------------------------------------------- */
  --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;    --s-11: 11rem;

  --section-y: clamp(5rem, 11vw, 11rem);
  --gutter:    clamp(1.25rem, 5vw, 5.5rem);
  --maxw:      1680px;
  --maxw-text: 68ch;

  /* ---------- RADII ---------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;
  --r-lg: 22px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px;

  /* ---------- MOTION ---------------------------------------------------
     One easing vocabulary. Luxury motion = slow out, no bounce.          */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* expo out             */
  --e-in-out: cubic-bezier(0.76, 0, 0.24, 1);     /* quart in-out         */
  --e-soft:   cubic-bezier(0.33, 1, 0.68, 1);
  --e-cine:   cubic-bezier(0.62, 0.05, 0.01, 0.99);

  --d-fast: 0.28s;  --d-mid: 0.55s;  --d-slow: 0.9s;  --d-cine: 1.4s;

  /* ---------- LAYERS --------------------------------------------------- */
  --z-base: 1;   --z-sticky: 40;  --z-nav: 60;  --z-mega: 65;
  --z-modal: 80; --z-cursor: 95;  --z-loader: 100;

  --nav-h: 84px;
}

@media (max-width: 900px) { :root { --nav-h: 68px; } }

/* Ultra-wide: stop the layout from becoming a horizon line. */
@media (min-width: 1921px) { :root { --maxw: 1840px; --gutter: 7rem; } }

/* Respect the user's system preference for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0.01s; --d-mid: 0.01s; --d-slow: 0.01s; --d-cine: 0.01s; }
}