/* ==========================================================================
   MUSKETEER — Design tokens
   Single source of truth for color, type, spacing, and layout primitives.
   Every other stylesheet should reference these custom properties rather than
   hard-coding values, so the brand can be retuned from one place.
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------------ */
  --ink:        #0b0b0c;   /* near-black, primary text & dark surfaces       */
  --ink-soft:   #2a2a2c;   /* secondary text on light                        */
  --paper:      #faf9f6;   /* warm off-white, primary background             */
  --paper-2:    #f1efe9;   /* muted panel background                         */
  --paper-3:    #e7e4da;   /* image placeholder / hairline fills             */
  --gold:       #b8a06a;   /* champagne accent (echoes the silk spotlights)  */
  --gold-deep:  #97804f;
  --burgundy:   #5e1a23;   /* "Built for Sacrifice" accent                   */
  --line:       #d9d5cc;   /* hairlines & borders                            */
  --line-dark:  #34343a;   /* hairlines on dark surfaces                     */
  --danger:     #9b2c2c;
  --ok:         #2f6b46;

  /* Semantic aliases ------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-panel:      var(--paper-2);
  --text:          var(--ink);
  --text-muted:    #6b6b6e;
  --text-invert:   var(--paper);
  --border:        var(--line);
  --accent:        var(--gold);

  /* --- Typography --------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale (min .. max via clamp) */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --step-2:  clamp(1.5rem,  1.3rem  + 0.9vw, 1.95rem);
  --step-3:  clamp(2rem,    1.6rem  + 1.8vw, 3rem);
  --step-4:  clamp(2.6rem,  1.9rem  + 3.4vw, 4.6rem);
  --step-5:  clamp(3.4rem,  2.2rem  + 5.6vw, 6.5rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-wide: 0.18em;   /* used for small-caps brand labels             */
  --tracking-mega: 0.32em;

  /* --- Spacing scale ------------------------------------------------------ */
  /* The three large steps are fluid: the editorial rhythm that reads as
     generous on a 1280px canvas is dead scroll on a 375px phone, so they
     interpolate down to roughly 60% between those two viewports. */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: clamp(2rem,   1.69rem + 1.33vw, 2.75rem);
  --space-6: clamp(3rem,   2.38rem + 2.65vw, 4.5rem);
  --space-7: clamp(4.5rem, 3.26rem + 5.30vw, 7.5rem);   /* section rhythm */

  /* --- Layout & misc ------------------------------------------------------ */
  --container: 1320px;
  --container-narrow: 760px;
  --radius: 2px;
  --radius-lg: 6px;
  --shadow-1: 0 1px 2px rgba(11, 11, 12, 0.06);
  --shadow-2: 0 14px 40px rgba(11, 11, 12, 0.14);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.32s;

  /* --- Z-index ladder ----------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  --z-toast: 300;

  color-scheme: light;
}