/* ==========================================================================
   BONACIEUX: Design tokens
   Single source of truth for colour, type, spacing, and layout primitives.
   Every other stylesheet references these custom properties rather than
   hard-coding values, so the house can be retuned from one place.
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------------ */
  --ink:        #14110f;   /* near-black; primary text and dark surfaces      */
  --ink-soft:   #3a332e;   /* body copy on paper                             */
  --paper:      #f5f1eb;   /* warm bone, primary background                  */
  --paper-2:    #e7e0d6;   /* muted panel background / image bed             */
  --paper-3:    #ded5c8;   /* image placeholder while loading                */
  --gold:       #9c7c38;   /* the house accent: eyebrows, rules, hovers      */
  --gold-deep:  #7e6229;   /* the same accent, darkened to carry small text  */
  --rouge:      #8e2c33;   /* Le Tee Rouge; saved/wished state               */
  --line:       #dcd4c8;   /* hairlines on paper                             */
  --line-dark:  #2e2925;   /* hairlines on ink                               */
  --danger:     #9b2c2c;
  --ok:         #4a6b4f;

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

  /* --- Typography ---------------------------------------------------------
     Three faces, three jobs: the script is the wordmark and nothing else, the
     serif carries every heading and paragraph, the grotesque carries the
     uppercase micro-labels (nav, buttons, prices, eyebrows). */
  --font-script:  'Pinyon Script', 'Cormorant Garamond', cursive;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:      'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale (min .. max via clamp) */
  --step--1: clamp(0.74rem, 0.72rem + 0.1vw,  0.80rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.2vw,  1.14rem);
  --step-1:  clamp(1.2rem,  1.1rem  + 0.45vw, 1.44rem);
  --step-2:  clamp(1.55rem, 1.32rem + 1.0vw,  2.1rem);
  --step-3:  clamp(2rem,    1.58rem + 1.9vw,  3.1rem);
  --step-4:  clamp(2.5rem,  1.8rem  + 3.4vw,  4.5rem);
  --step-5:  clamp(3rem,    2rem    + 4.8vw,  5.5rem);

  --leading-tight: 1.04;
  --leading-snug:  1.25;
  --leading-body:  1.65;
  --tracking-wide: 0.2em;    /* uppercase micro-labels                        */
  --tracking-mega: 0.42em;   /* eyebrows                                      */

  /* --- Spacing scale ------------------------------------------------------
     The three large steps are fluid: the editorial rhythm that reads as
     generous on a 1400px 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: 1400px;
  --container-narrow: 760px;
  --radius: 0;               /* the house squares every corner                */
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 17, 15, 0.06);
  --shadow-2: 0 18px 46px rgba(20, 17, 15, 0.16);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.34s;

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

  color-scheme: light;
}