/* ==========================================================================
   TOKENS  ·  Loai Al Fakir brand system
   Source: Loai Al Fakir Brand Book.

   PALETTE (brand book, page 05) — suggested balance 60 / 30 / 10
     Forest Green       #0E3F3C  growth, stability, discretion. The foundation.
     Warm Cream         #EDE9DE  clarity and space, the paper under the signature.
     Terracotta Copper  #C06C40  warmth and precision. Used sparingly: the dot,
                                 the underline and key accents.

   Every other value below is a tint or shade of those three, derived so
   that text pairings meet WCAG AA. Pure copper measures only ~3:1 against
   both the forest and the cream, so it is kept for marks and strokes, and
   small copper TEXT uses the deeper or lighter derivative instead.
   ========================================================================== */

:root {
  /* --- Forest ----------------------------------------------------------- */
  --forest: #0E3F3C;
  --forest-raised: #134A46;      /* panels sitting on the forest ground       */
  --forest-deep: #0A302E;        /* deeper ground: book, footer               */
  --forest-ink: #072422;         /* deepest: footer base, cover spine         */
  --forest-rgb: 14, 63, 60;

  /* --- Cream ------------------------------------------------------------ */
  --cream: #EDE9DE;
  --cream-paper: #F6F3EC;        /* card paper, lifted off the cream ground   */
  --cream-shade: #E5DFD1;        /* a deeper cream for section separation     */
  --cream-rgb: 237, 233, 222;

  /* --- Copper ----------------------------------------------------------- */
  --copper: #C06C40;             /* marks, dots, underlines, rules           */
  --copper-strong: #A4532B;      /* filled buttons + small text on cream      */
  --copper-soft: #E0956A;        /* small text on forest (4.8:1)              */
  --copper-rgb: 192, 108, 64;

  /* --- Text ------------------------------------------------------------- */
  --ink: var(--forest);          /* headings on cream   (9.6:1)              */
  --ink-body: #3F5A57;           /* body on cream       (6.2:1)              */
  --on-forest: var(--cream);     /* headings on forest  (9.6:1)              */
  --on-forest-body: #B8C7C2;     /* body on forest      (6.7:1)              */

  /* --- Lines ------------------------------------------------------------ */
  --line-on-cream: rgba(var(--forest-rgb), 0.14);
  --line-on-forest: rgba(var(--cream-rgb), 0.16);

  /* --- Type ------------------------------------------------------------- */
  /* Brand book, page 06: Jost Light for headlines, Regular for text,
     Medium for buttons. Mrs Saint Delafield is reserved for the logo and
     signature moments only, never for body text. */
  --font-sans: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --font-script: 'Mrs Saint Delafield', 'Segoe Script', cursive;

  --step-display: clamp(2.25rem, 1.45rem + 3.4vw, 4rem);
  --step-h2: clamp(1.85rem, 1.4rem + 1.9vw, 2.9rem);
  --step-h3: clamp(1.3rem, 1.18rem + 0.5vw, 1.6rem);
  --step-h4: clamp(1.08rem, 1.03rem + 0.22vw, 1.2rem);
  --step-lead: clamp(1.1rem, 1.02rem + 0.38vw, 1.32rem);
  --step-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --step-small: 0.9375rem;
  --step-micro: 0.78rem;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.7;
  --track-eyebrow: 0.22em;

  /* --- Space ------------------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3.5rem, 2.6rem + 3.6vw, 6rem);
  --space-section: clamp(4.5rem, 3.2rem + 5.6vw, 8.5rem);

  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --container: 76rem;

  /* --- Shape & depth ---------------------------------------------------- */
  /* The brand book draws cards with soft 8px corners and buttons nearly
     square; both are carried through here. */
  --radius-sm: 3px;
  --radius-md: 8px;
  --shadow-card: 0 1px 2px rgba(var(--forest-rgb), 0.05), 0 12px 32px -18px rgba(var(--forest-rgb), 0.35);
  --shadow-lift: 0 2px 4px rgba(var(--forest-rgb), 0.06), 0 24px 48px -24px rgba(var(--forest-rgb), 0.45);
  --shadow-deep: 0 30px 60px -20px rgba(0, 0, 0, 0.55);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.45s;
  --dur-slow: 0.8s;

  /* --- Layers ----------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 1;
  --z-header: 100;
}