/* Élan de Perle — Design Tokens
 * Source: Brand Style Guide v.2026 (Brand_Style_Guide_Èlan_de_Perle.pdf)
 *
 * Three-palette color system + three-typeface system, applied per the
 * brand's own canonical layouts (typography hierarchy page 28, stationery
 * page 32-34, color palette pages 17-20). Color names retained verbatim
 * from the guide for traceability.
 */

/* Self-hosted Geist (Brand Guide §4.2) — variable axis 100-900 weights
 * in a single 69KB woff2 file. Self-hosted so the brand typeface is
 * guaranteed to render regardless of Google Fonts availability. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Geist-Variable.woff2') format('woff2');
}

:root {
  /* ── Core Palette (3.1) ──────────────────────────────────
   * The brand's primary surfaces. Taupe Stone is the dominant card &
   * stage surface; Deep Cocoa is the text color; Soft Bronze is the gold.
   */
  --paper:           #F5EFE8;  /* Soft Ivory (Supporting Palette 3.2)     */
  --paper-warm:      #EAE1D7;  /* Taupe Stone (Core 3.1) — surfaces       */
  --paper-cool:      #EAE1D7;
  --paper-stone:     #EAE1D7;
  --cream:           #FAF7F2;  /* Lightest derived ivory                  */

  /* ── Text Colors ─────────────────────────────────────────
   * Deep warm browns (Supporting 3.2 + Core 3.1). No near-black.
   */
  --ink:             #5C4D42;  /* Rose Blush — primary text & dark bg     */
  --ink-soft:        #8E7D6B;  /* Deep Cocoa — secondary text             */
  --ink-muted:       #8E7D6B;  /* Deep Cocoa — labels, captions           */
  --ink-faint:       #B6A799;  /* Lighter cocoa derivative                */

  /* ── Gold Accent (Core 3.1) ─────────────────────────────
   * Soft Bronze is the brand's primary accent. Used not just as a
   * highlight but as a full surface in canonical layouts.
   */
  --gold-deep:       #BF9759;  /* Soft Bronze — primary gold              */
  --gold-soft:       #D4B07C;  /* Derived lighter gold for gradients      */
  --accent-warm:     #A88463;  /* Secondary Bronze (Accent 3.3)           */

  /* ── Soft Accents (Accent Palette 3.3) ──────────────────
   * Rose Blush highlight — used as a real surface for editorial
   * sections, callouts, and review blocks.
   */
  --rose-blush:      #D8B7AE;  /* Rose Blush highlight — soft warm rose   */
  --rose-blush-soft: #E8D2CB;  /* Derived lighter rose for backgrounds    */
  --accent-rose:     #D8B7AE;
  --accent-cool:     #8E7D6B;
  --accent-stone:    #8E7D6B;
  --accent-red:      #BF9759;  /* No red in palette — gold takes its place */

  /* ── Rules / Hairlines ───────────────────────────────── */
  --hairline:        #D6CABA;
  --rule:            #B6A799;

  /* ── Typography (Brand Guide §4) ─────────────────────────
   * The guide defines THREE typeface roles. Nothing else:
   *   §4.1 Akshar Medium      → Main Heading (--font-display)
   *   §4.2 Geist Light        → Body         (--font-sans)
   *   §4.3 Butler Ultra Light → Logo + serif moments (--font-serif)
   *
   * Butler is commercial; Cormorant Garamond is the close free
   * substitute via Google Fonts. The actual brand logo PNG already
   * contains the real Butler letterforms.
   *
   * IMPORTANT: --font-mono is intentionally aliased to Geist, NOT to
   * a real monospace. The brand guide has no monospace role. The token
   * is kept for compatibility with components that still reference it
   * (labels, eyebrows, sizes, prices) — all of which should be Geist
   * per the guide, distinguished by size + letter-spacing rather than
   * by typeface.
   */
  --font-display: "Akshar", "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-sans:    "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-serif:   "Cormorant Garamond", "Butler", Georgia, serif;
  --font-mono:    "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* ── Type weight tokens (matches Brand Guide §4.4) ─────── */
  --weight-light:    300;  /* Geist Light = body                          */
  --weight-medium:   500;  /* Geist Medium = subhead / Akshar Medium      */
  --weight-display:  500;  /* Akshar Medium = main heading                */

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  80px;
  --space-10: 112px;
  --space-11: 160px;

  /* ── Layout ────────────────────────────────────────────── */
  --max-w:       1440px;
  --max-w-wide:  1680px;
  --max-w-prose: 680px;
  --gutter:      clamp(20px, 4vw, 48px);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-house:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spa:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-spa-enter:  500ms;
  --dur-spa-leave:  300ms;
}