/* ============================================================================
   🎨 DESIGN TOKENS — the single re-skin point for the visual identity.
   Change colours, fonts, and spacing here to re-brand the whole site.
   ============================================================================ */

:root {
  /* ── Palette: "Quiet Luxury" ─────────────────────────────────────────────
     Near-black backgrounds, champagne gold accents, ivory text,
     one deep jewel tone per client (swap --jewel to re-skin). */
  --c-bg:            #0B0B0F;   /* page background — near black */
  --c-bg-raise:      #131318;   /* raised surfaces (cards, nav) */
  --c-bg-raise-2:    #1B1B22;   /* hover / deeper surface */
  --c-line:          rgba(201, 169, 106, 0.18); /* thin gold rules */
  --c-line-soft:     rgba(245, 241, 232, 0.08);

  --c-gold:          #C9A96A;   /* champagne gold accent */
  --c-gold-bright:   #E6CE97;   /* hover / highlight gold */
  --c-gold-deep:     #A6864A;

  --c-ink:           #F5F1E8;   /* ivory — primary text */
  --c-ink-soft:      rgba(245, 241, 232, 0.72);
  --c-ink-mute:      rgba(245, 241, 232, 0.48);

  --c-jewel:         #1E3A5F;   /* deep jewel tone (sapphire blue default) */
  --c-jewel-glow:    rgba(72, 118, 176, 0.35);

  --c-sold:          #9B6B4A;   /* sold ribbon terracotta-bronze */
  --c-whatsapp:      #25D366;   /* used sparingly, never as a big blob */

  /* ── Typography ──────────────────────────────────────────────────────────
     Self-hosted (see assets/fonts/ + base.css @font-face). */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:   clamp(2.75rem, 8vw, 6rem);
  --fs-h1:     clamp(2.2rem, 5vw, 3.75rem);
  --fs-h2:     clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:     clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-lead:   clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:   1rem;
  --fs-small:  0.85rem;
  --fs-micro:  0.72rem;

  --tracking-wide:  0.14em;   /* eyebrow / small-caps labels */
  --tracking-mid:   0.04em;

  /* ── Spacing & rhythm ───────────────────────────────────────────────────*/
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6.5rem;
  --space-2xl: 9rem;

  --maxw:       1240px;   /* content max width */
  --maxw-text:  680px;    /* readable prose width */
  --gutter:     clamp(1.25rem, 5vw, 4rem);

  /* ── Form / structure ───────────────────────────────────────────────────*/
  --radius:     3px;
  --radius-lg:  9px;
  --nav-h:      68px;

  /* ── Motion ─────────────────────────────────────────────────────────────*/
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   0.25s;
  --dur:        0.5s;
  --dur-slow:   0.9s;

  --shadow-card: 0 18px 50px -18px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
}