/* ==========================================================================
   MARIDADI — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for the entire visual system.
   Dark, cinematic, editorial: warm near-black + ivory + champagne gold.

   Rule: components never invent values — they only consume these tokens.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     COLOR — warm dark foundation
     Backgrounds are warm (brown-black), never blue-black. Gold is used
     sparingly: eyebrows, hairlines, hover states, italic accents.
     Large gold fills are forbidden — they read as cheap.
     ------------------------------------------------------------------ */

  /* Backgrounds, deepest → most elevated */
  --bg-0: #0D0C0A;            /* page base */
  --bg-1: #131110;            /* alternate section band */
  --surface-1: #1A1714;       /* cards, form fields */
  --surface-2: #221E19;       /* hover states, raised cards */

  /* Ink (text), brightest → most muted */
  --ink-1: #EFE9DE;           /* headlines, key copy — warm ivory */
  --ink-2: #B4AB9B;           /* body copy */
  --ink-3: #7D7466;           /* captions, meta, placeholders */

  /* Gold — champagne, not brass */
  --gold: #C9A66B;            /* primary accent */
  --gold-bright: #E2C892;     /* italic accents, hover glow on dark */
  --gold-deep: #93763E;       /* pressed states, borders on light gold */

  /* Lines & veils */
  --hairline: rgba(239, 233, 222, 0.10);       /* neutral 1px rules */
  --hairline-strong: rgba(239, 233, 222, 0.18);
  --hairline-gold: rgba(201, 166, 107, 0.32);  /* gold 1px rules */
  --veil: rgba(13, 12, 10, 0.55);              /* image overlay for text legibility */
  --veil-heavy: rgba(13, 12, 10, 0.78);

  /* Functional */
  --success: #9DB89A;
  --error: #C98071;

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     Display: Fraunces (variable — optical size + italics do the luxury)
     Body:    Outfit (quiet grotesque, light weights)
     ------------------------------------------------------------------ */

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale (min → max across 360px → 1600px viewports) */
  --fs-hero:     clamp(3.25rem, 1.9rem + 6vw, 7.75rem);     /* 52 → 124px */
  --fs-display:  clamp(2.5rem, 1.7rem + 3.6vw, 5.25rem);    /* 40 → 84px  */
  --fs-title:    clamp(1.75rem, 1.4rem + 1.6vw, 3rem);      /* 28 → 48px  */
  --fs-subtitle: clamp(1.25rem, 1.13rem + 0.55vw, 1.69rem); /* 20 → 27px  */
  --fs-lead:     clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem); /* 17 → 21px  */
  --fs-body:     1rem;                                      /* 16px       */
  --fs-small:    0.875rem;                                  /* 14px       */
  --fs-caption:  0.8125rem;                                 /* 13px       */
  --fs-eyebrow:  0.6875rem;                                 /* 11px       */

  /* Weights (both families are variable fonts) */
  --fw-display: 380;          /* Fraunces at display sizes */
  --fw-display-strong: 460;
  --fw-body: 300;
  --fw-body-medium: 420;
  --fw-body-semibold: 540;

  /* Line heights & tracking */
  --lh-tight: 1.04;           /* hero / display */
  --lh-snug: 1.18;            /* titles */
  --lh-body: 1.7;
  --ls-display: -0.018em;
  --ls-eyebrow: 0.24em;
  --ls-button: 0.08em;

  /* ------------------------------------------------------------------
     SPACING & LAYOUT
     ------------------------------------------------------------------ */

  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 8rem;

  /* Vertical rhythm between sections — generous, cinematic */
  --section-y: clamp(6rem, 4rem + 8vw, 12rem);

  /* Horizontal page gutter */
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* Content widths */
  --w-text: 40rem;            /* 640px — single column prose */
  --w-narrow: 55rem;          /* 880px — forms, intros */
  --w-content: 85rem;         /* 1360px — default container */
  --w-wide: 100rem;           /* 1600px — full-bleed-ish galleries */

  /* ------------------------------------------------------------------
     SURFACES — radii, borders, shadows
     Luxury = near-sharp corners, depth from soft distant shadows.
     ------------------------------------------------------------------ */

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 100px;

  --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.55);
  --shadow-deep: 0 40px 120px -30px rgba(0, 0, 0, 0.7);
  --glow-gold: 0 0 48px rgba(201, 166, 107, 0.14);

  /* ------------------------------------------------------------------
     MOTION
     One easing language everywhere. GSAP mirrors these in animations.js.
     ------------------------------------------------------------------ */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* default: settle softly */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* position changes */
  --dur-fast: 0.3s;           /* hovers, small UI */
  --dur-base: 0.7s;           /* reveals */
  --dur-slow: 1.2s;           /* hero, large imagery */

  /* ------------------------------------------------------------------
     LAYERS
     ------------------------------------------------------------------ */

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ------------------------------------------------------------------
     BREAKPOINTS — reference only (CSS vars can't drive media queries).
     Keep these values in sync wherever @media is written:

       --bp-sm:  480px   phones landscape
       --bp-md:  768px   tablets
       --bp-lg:  1024px  small laptops
       --bp-xl:  1280px  desktops
       --bp-2xl: 1600px  wide screens
     ------------------------------------------------------------------ */
}