/* =============================================================
   SUITE DNA — Design Tokens
   Brand system (from client guidelines + assets, June 2026):
   cream paper, warm taupe, brand sage green, warm grey text.
   Brand fonts self-hosted: Cochin (display serif) + Avenir (sans).
   Direction: clean, light, editorial — Four Seasons / L'Artisien.
   ============================================================= */

/* ---------- Brand fonts (self-hosted from client kit) ---------- */
/* NB: production should confirm the Avenir/Cochin webfont licence;
   files supplied by the client as brand assets. */
@font-face { font-family:"Avenir"; src:url("../fonts/Avenir-Light.woff") format("woff");  font-weight:300; font-style:normal;  font-display:swap; }
@font-face { font-family:"Avenir"; src:url("../fonts/Avenir-Roman.woff") format("woff");  font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:"Avenir"; src:url("../fonts/Avenir-Medium.woff") format("woff"); font-weight:500; font-style:normal;  font-display:swap; }
@font-face { font-family:"Avenir"; src:url("../fonts/Avenir-Italic.woff") format("woff"); font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:"Cochin"; src:url("../fonts/Cochin-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Cochin"; src:url("../fonts/Cochin-Italic.woff")  format("woff"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Quickpen"; src:url("../fonts/Quickpen.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* ---- Light grounds (warm paper) ---- */
  --cream:      #F4F1EA;   /* primary paper ground */
  --cream-2:    #ECE8DE;   /* brand cream — alternating sections */
  --sand:       #E5DFD2;   /* warm card on light */
  --paper-white:#FEFEFE;   /* crisp white (brand No. fefefe) */
  --sand-line:  rgba(42, 39, 35, 0.12);   /* hairline on light */

  /* ---- Ink / dark grounds (warm charcoal + deep sage) ---- */
  --ink:        #2A2723;   /* warm near-black — primary text + dark ground */
  --ink-rich:   #23271F;   /* deep forest-charcoal — footer, hero base, deep block */
  --ink-raised: #333A2F;   /* raised dark surface / cards */
  --ink-line:   rgba(244, 241, 234, 0.14);  /* hairline on dark */

  /* ---- Brand sage (the accent — replaces the old gold) ---- */
  --gold:       #8A9A87;   /* brand sage — decorative / large / on dark */
  --gold-soft:  #AAB7A6;   /* lifted sage (hover / italics on dark) */
  --gold-deep:  #5E6E5C;   /* deeper sage — large display text on light */
  --gold-ink:   #46543F;   /* AA-safe deep sage — small text / links on light */

  /* ---- Muted captions ---- */
  --taupe:      #BCB3AD;   /* muted on dark */
  --stone:      #6E6660;   /* muted on light (brand warm grey, AA) */

  /* ---- Semantic ---- */
  --bg:            var(--cream);
  --text:          var(--ink);
  --text-muted:    var(--stone);
  --accent:        var(--gold);   /* light sage by default (hero/dark grounds) */

  /* ---- Typography (brand fonts) ---- */
  --font-display: "Cochin", Georgia, "Times New Roman", serif;
  --font-sans:    "Avenir", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Quickpen", "Segoe Script", cursive;
  --sdna-green:   #7C8D7C;   /* brand green (client guidelines R124 G141 B124) */
  --sdna-green-dk:#63755F;   /* deeper green for white-text contrast */

  /* Fluid type scale */
  --fs-mega:  clamp(3.1rem, 8.4vw, 8.5rem);     /* hero display */
  --fs-xl:    clamp(2.5rem, 5.6vw, 4.9rem);     /* h1 / section display */
  --fs-lg:    clamp(1.95rem, 4vw, 3.35rem);     /* h2 */
  --fs-md:    clamp(1.5rem, 2.4vw, 2.2rem);     /* h3 */
  --fs-sm:    clamp(1.18rem, 1.5vw, 1.45rem);   /* lead / h4 */
  --fs-body:  clamp(1.0625rem, 0.5vw + 0.95rem, 1.18rem);
  --fs-meta:  0.74rem;                          /* eyebrows / labels */

  --lh-tight: 1.04;
  --lh-snug:  1.14;
  --lh-body:  1.7;
  --track-wide: 0.32em;    /* eyebrow tracking — wider, calmer */
  --track-mid:  0.18em;
  --track-tight: -0.01em;

  /* ---- Spacing / rhythm (more air = cleaner) ---- */
  --section-y: clamp(6.5rem, 13vw, 13rem);
  --gutter:    clamp(1.25rem, 5vw, 6rem);
  --maxw:      82.5rem;
  --maxw-text: 46rem;

  /* ---- Form / radii (softer, quieter than before) ---- */
  --r-card:  1.25rem;
  --r-inner: calc(1.25rem - 0.5rem);
  --r-pill:  999px;
  --r-sm:    0.6rem;

  /* ---- Elevation (soft, diffused) ---- */
  --shadow-soft:  0 1px 1px rgba(42,39,35,0.04), 0 12px 30px -14px rgba(42,39,35,0.16);
  --shadow-lift:  0 2px 4px rgba(42,39,35,0.05), 0 30px 60px -26px rgba(42,39,35,0.26);
  --inset-hi:     inset 0 1px 1px rgba(255,255,255,0.10);

  /* ---- Motion ---- */
  --ease-lux:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast:   0.4s;
  --t-mid:    0.7s;
  --t-slow:   0.9s;

  /* ---- Layers ---- */
  --z-nav:     100;
  --z-overlay: 200;
  --z-grain:   300;
}