/* =========================================================================
   The Showroom Engine — Colors & Type Tokens
   ========================================================================= */

/* ---- Fonts (Google Fonts — Geist sans + Geist Mono) ------------------ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: Foundation (warm monochrome) -------------------- */
  --ink:        #14110D;   /* warm near-black — primary text, dark bands  */
  --graphite:   #2A2622;   /* secondary dark — captions on dark surfaces  */
  --stone:      #6F6B64;   /* mid grey — secondary body, metadata         */
  --mist:       #B8B3A8;   /* soft grey — dividers, disabled, faint UI    */
  --bone:       #F2EEE6;   /* warm off-white — PRIMARY page background    */
  --paper:      #FAF7F1;   /* lighter surface — cards on bone, alt bands  */
  --chalk:      #FFFFFF;   /* pure white — reserved for media wells       */

  /* ---------- Color: Accents (use sparingly) ------------------------- */
  --brass:      #8B6F47;   /* muted brass — PRIMARY accent, CTAs, marks   */
  --brass-deep: #6E5836;   /* hover/press state for brass                 */
  --olive:      #4E5544;   /* deep olive — rare secondary, status tags    */

  /* ---------- Color: Borders & rules --------------------------------- */
  --rule:           rgba(20, 17, 13, 0.10);   /* default hairline         */
  --rule-strong:    rgba(20, 17, 13, 0.22);   /* emphasised divider       */
  --rule-on-ink:    rgba(242, 238, 230, 0.14);/* hairline on dark bands   */

  /* ---------- Color: Semantic (state) -------------------------------- */
  --ok:    #4E5544;        /* uses olive — never green-green               */
  --warn:  #8B6F47;        /* uses brass — never amber                     */
  --err:   #6B2E26;        /* deep oxblood — never red-red                 */

  /* ---------- Color: Semantic (role) — alias the foundation ---------- */
  --fg-1:  var(--ink);            /* primary text                          */
  --fg-2:  var(--graphite);       /* heading on light bg, strong body      */
  --fg-3:  var(--stone);          /* secondary text, captions              */
  --fg-4:  var(--mist);           /* tertiary, disabled                    */
  --fg-on-ink:    var(--bone);    /* primary text on dark band             */
  --fg-on-ink-2:  rgba(242,238,230,0.62);

  --bg-1:  var(--bone);           /* primary surface                       */
  --bg-2:  var(--paper);          /* secondary surface (alt band, card)    */
  --bg-3:  var(--ink);            /* inverted band                         */
  --bg-media: var(--chalk);       /* media wells, image backers            */

  --accent:        var(--brass);
  --accent-press:  var(--brass-deep);

  /* ---------- Type: Family ------------------------------------------- */
  --font-sans: 'Geist', 'Inter', 'Neue Haas Grotesk Text Pro', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type: Scale (desktop) ----------------------------------
     NO viewport-based scaling. Use the -m variants on <= 720px.
     Numbers are px values; convert with calc() to rem where needed.
  -------------------------------------------------------------------- */
  --t-display:   64px;   --lh-display:   1.04;   --tr-display:   -0.025em;
  --t-h1:        48px;   --lh-h1:        1.08;   --tr-h1:        -0.022em;
  --t-h2:        32px;   --lh-h2:        1.14;   --tr-h2:        -0.018em;
  --t-h3:        22px;   --lh-h3:        1.30;   --tr-h3:        -0.010em;
  --t-lead:      20px;   --lh-lead:      1.45;   --tr-lead:      -0.005em;
  --t-body:      17px;   --lh-body:      1.55;   --tr-body:       0;
  --t-small:     15px;   --lh-small:     1.50;   --tr-small:      0;
  --t-caption:   13px;   --lh-caption:   1.45;   --tr-caption:    0;
  --t-meta:      12px;   --lh-meta:      1.30;   --tr-meta:       0.08em;   /* mono, UPPER */
  --t-quote:     28px;   --lh-quote:     1.30;   --tr-quote:     -0.012em;

  /* ---------- Type: Scale (mobile, <= 720px) -------------------------- */
  --t-display-m: 44px;
  --t-h1-m:      36px;
  --t-h2-m:      26px;
  --t-h3-m:      20px;
  --t-lead-m:    18px;
  --t-body-m:    16px;
  --t-quote-m:   22px;

  /* ---------- Type: Weights ------------------------------------------ */
  --w-light:   300;
  --w-reg:     400;
  --w-med:     500;
  --w-semi:    600;
  --w-bold:    700;

  /* ---------- Spacing: 8-pt scale ------------------------------------ */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;     /* section pad, large viewports                     */

  /* ---------- Layout ------------------------------------------------- */
  --container:        1240px;       /* default max width                  */
  --container-narrow: 880px;        /* editorial single-column            */
  --container-wide:   1440px;       /* full-bleed bands' content max      */
  --gutter:           24px;
  --gutter-m:         20px;

  /* ---------- Radius (restrained, max 8) ----------------------------- */
  --r-0: 0;
  --r-1: 2px;       /* fields, tags                                       */
  --r-2: 4px;       /* buttons                                            */
  --r-3: 8px;       /* cards (MAX)                                        */

  /* ---------- Elevation (used very sparingly) ------------------------ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--rule);                            /* hairline lift */
  --shadow-2: 0 2px 12px -6px rgba(20,17,13,0.10),
              0 1px 2px -1px rgba(20,17,13,0.06);
  --shadow-focus: 0 0 0 3px rgba(139,111,71,0.32);

  /* ---------- Motion ------------------------------------------------- */
  --ease-std:   cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   420ms;
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-reg);
  font-feature-settings: 'ss01', 'cv11', 'kern';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display & headings -------------------------------------------- */
.ts-display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--w-med);
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .ts-h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: var(--w-med);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .ts-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-weight: var(--w-med);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .ts-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: var(--w-med);
  color: var(--fg-1);
}

.ts-lead {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  font-weight: var(--w-reg);
  color: var(--fg-2);
  text-wrap: pretty;
}

p, .ts-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: 64ch;
  text-wrap: pretty;
}

.ts-small  { font-size: var(--t-small);  line-height: var(--lh-small); color: var(--fg-2); }
.ts-caption{ font-size: var(--t-caption);line-height: var(--lh-caption); color: var(--fg-3); }

/* ---- Editorial quote ------------------------------------------------ */
.ts-quote, blockquote {
  font-family: var(--font-sans);
  font-size: var(--t-quote);
  line-height: var(--lh-quote);
  letter-spacing: var(--tr-quote);
  font-weight: var(--w-reg);
  color: var(--fg-1);
  text-wrap: balance;
}

/* ---- Meta / labels / file refs (mono, upper, tracked) -------------- */
.ts-meta, .label {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--w-reg);
}

/* ---- Button text ---------------------------------------------------- */
.ts-button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: var(--w-med);
}

/* ---- Tabular numerals ---------------------------------------------- */
.tnum, .ts-num { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Mobile scale (<= 720px) — discrete swaps, NO viewport units
   ========================================================================= */
@media (max-width: 720px) {
  .ts-display, h1.display { font-size: var(--t-display-m); }
  h1, .ts-h1              { font-size: var(--t-h1-m); }
  h2, .ts-h2              { font-size: var(--t-h2-m); }
  h3, .ts-h3              { font-size: var(--t-h3-m); }
  .ts-lead                { font-size: var(--t-lead-m); }
  p, .ts-body             { font-size: var(--t-body-m); }
  .ts-quote, blockquote   { font-size: var(--t-quote-m); }
}