/* ============================================================
   Bespoke — Editorial Noir Design System
   Register: The Row, Tom Ford, Khaite, Aman, Celine, Le Labo.
   Sleek, sharp, audacious. Quiet luxury. Members-only.
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {

  /* ── Type families ─────────────────────────────────────── */
  --font-display:   "Bodoni Moda", Georgia, serif;
  --font-body:      "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:     "Bodoni Moda", Georgia, serif;
  --font-sans:      "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", monospace;

  /* ── Bespoke named palette tokens ──────────────────────── */
  --bespoke-linen:        #F6F5F2;   /* paper — primary light background  */
  --bespoke-bone:         #ECE8E1;   /* ivory — secondary light background */
  --bespoke-smoke:        #2A2A2A;   /* charcoal — primary dark background */
  --bespoke-black:        #111111;   /* ink — emphasis type               */
  --bespoke-champagne:    #7A6B5E;   /* editorial tan — accent (AA-compliant) */
  --bespoke-oxblood:      #3D1418;   /* emergency accent, CTA only        */
  --bespoke-ink:          #111111;   /* ink — dark type                   */
  --bespoke-text:         #111111;   /* dark type on light bg             */
  --bespoke-muted:        #8B8680;   /* muted / secondary text            */
  --bespoke-border:       rgba(17, 17, 17, 0.08);
  --bespoke-border-dark:  rgba(246, 245, 242, 0.12);

  /* ── Paper-and-ink semantic aliases ────────────────────── */
  --bespoke-paper:        #F6F5F2;   /* newspaper stock                   */
  --bespoke-ivory:        #ECE8E1;   /* fashion magazine stock            */
  --bespoke-charcoal:     #2A2A2A;   /* dark structural                   */
  --bespoke-stone:        #CFC9C1;   /* mid-tone                          */
  --bespoke-tan:          #7A6B5E;   /* editorial tan (AA-compliant 4.71:1 on paper) */
  --bespoke-paper-light:  #F4F1EC;   /* light text on dark backgrounds    */

  /* ── Primitive color palette (paper and ink) ───────────── */
  --color-cream:         #F6F5F2;   /* paper — primary light bg     */
  --color-cream-warm:    #ECE8E1;   /* ivory — secondary light bg   */
  --color-ink:           #111111;   /* ink — true dark              */
  --color-oxblood:       #3D1418;   /* deep oxblood — primary CTA   */
  --color-oxblood-deep:  #2A0C10;   /* oxblood hover / pressed      */
  --color-mahogany:      #2A2A2A;   /* charcoal — dark structural   */
  --color-champagne:     #7A6B5E;   /* editorial tan — accent (AA-compliant) */
  --color-accent-red:    #A89080;   /* tan hover                    */
  --color-sidebar:       #111111;   /* sidebar bg — ink             */

  /* ── Semantic color tokens ─────────────────────────────── */
  --color-bg:              var(--color-cream);
  --color-bg-secondary:    var(--color-cream-warm);
  --color-bg-card:         var(--color-cream-warm);
  --color-bg-dark:         var(--color-sidebar);

  --color-text-primary:    var(--color-ink);
  --color-text-secondary:  #3A3830;                /* near-black body text  */
  --color-text-tertiary:   var(--bespoke-muted);   /* muted / captions      */
  --color-text-inverse:    var(--color-cream);

  --color-accent:          var(--bespoke-champagne);
  --color-accent-hover:    #B89851;

  --color-border:          var(--bespoke-border);
  --color-border-light:    rgba(10, 10, 10, 0.05);
  --color-border-accent:   var(--bespoke-champagne);

  /* ── Spacing scale ─────────────────────────────────────── */
  /* Editorial spacing: large vertical jumps, not linear      */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* ── Type scale ────────────────────────────────────────── */
  --text-display:     88px;
  --text-h1:          56px;
  --text-h2:          40px;
  --text-h3:          28px;
  --text-body:        15px;
  --text-body-small:  13px;
  --text-label:       11px;
  --text-button:      13px;

  /* ── Line heights ──────────────────────────────────────── */
  --leading-display:  0.92;
  --leading-heading:  1.10;
  --leading-body:     1.7;
  --leading-tight:    1.6;

  /* ── Letter spacing ────────────────────────────────────── */
  --tracking-display: -2px;
  --tracking-heading: -1px;
  --tracking-label:   3.5px;
  --tracking-button:  2.5px;
  --tracking-tight:   -1.5px;

  /* ── Border radius — editorial system uses rectangles ───── */
  --radius-none: 0;
  --radius-sm:   4px;   /* small UI only (tags, badges) */
  --radius-pill: 999px;

  /* ── Elevation — no drop shadows in editorial system ────── */
  /* Depth is conveyed through border and background contrast  */

  /* ── Z-index scale ─────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   300;
  --z-toast:   400;

}


/* ------------------------------------------------------------
   2. TYPOGRAPHY UTILITY CLASSES
   ------------------------------------------------------------ */

/* Display — the signature move. Italic Bodoni Moda 700.
   Use for hero headlines, page titles, feature moments.    */
.t-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
}

/* Display Roman — magazine-masthead weight.
   Use for brand names, section identifiers.               */
.t-display-roman {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
}

/* H1 — primary page title                                  */
.t-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text-primary);
}

/* H2 — section title, editorial italic                     */
.t-h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text-primary);
}

/* H2 Bold — declarative headline, Inter Black, ALL CAPS    */
.t-h2-bold {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 900;
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* H3 — taglines, pull quotes, subheads                     */
.t-h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  color: var(--color-oxblood);
}

/* Body — Inter Regular, generous leading                   */
.t-body {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

/* Body Small — for table cells, card metadata, captions    */
.t-body-small {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-body-small);
  line-height: var(--leading-tight);
  color: var(--color-text-secondary);
}

/* Label — uppercase tracked caps, for category lines       */
.t-label {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-label);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Button — uppercase tracked, heavier weight               */
.t-button {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: var(--text-button);
  line-height: 1;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}

/* Number — Bodoni Moda with lining numerals           */
.t-number {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--color-text-primary);
}


/* ------------------------------------------------------------
   3. SURFACE UTILITY CLASSES
   ------------------------------------------------------------ */

.bespoke-page-light {
  background-color: var(--bespoke-linen);
  color: var(--bespoke-text);
}

.bespoke-page-paper {
  background-color: var(--bespoke-paper);
  color: var(--bespoke-ink);
}

.bespoke-page-dark {
  background-color: var(--bespoke-smoke);
  color: var(--bespoke-paper-light);
}


/* ------------------------------------------------------------
   4. BODY DEFAULTS (Part 5)
   ------------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: var(--leading-body);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
}