/* =========================================================================
   MR WHITE PRO — Design Tokens
   Editorial luxury. Confident restraint. South African event production.
   ========================================================================= */

/* =========================================================================
   Fonts — all three families served from Google Fonts via @import.
   - Display: Fraunces (variable, opsz + SOFT axes, 100–900, italic)
   - Body:    Inter Tight (300/400/500/600/700 + italics)
   - Mono:    JetBrains Mono (300/400/500 + italic)
   JetBrains Mono .ttf files are also mirrored in fonts/JetBrains_Mono/
   for offline / print / Claude-Code handoff use.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,100..900,0..100;1,9..144,100..900,0..100&family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

:root {
  /* ---------- COLOR : INK & OXBLOOD (dark ground) ---------- */
  --ink:            #1a0d0f;   /* deepest text / near-black with warmth */
  --oxblood-deep:   #2a0d12;   /* dominant dark background */
  --oxblood:        #4a1820;   /* mid oxblood — feature panels */
  --burgundy:       #6b2030;   /* text on cream, highlights on dark */

  /* ---------- COLOR : CHAMPAGNE (accent only) ---------- */
  --champagne:      #c9a961;   /* primary accent — eyebrows, rules, live dot */
  --champagne-soft: #e4cf9d;   /* hover / secondary accent */

  /* ---------- COLOR : CREAM (light ground) ---------- */
  --cream:          #f5ecd9;   /* dominant light background */
  --cream-warm:     #ede0c4;   /* alt light ground / cards on cream */
  --paper:          #faf5eb;   /* brightest ground — never pure white */

  /* ---------- COLOR : WHISPER (secondary text on dark) ---------- */
  --whisper:        rgba(245, 236, 217, 0.55);
  --whisper-faint:  rgba(245, 236, 217, 0.35);
  --whisper-ghost:  rgba(245, 236, 217, 0.08);

  /* ---------- SEMANTIC : FG / BG ---------- */
  --bg-dark:        var(--oxblood-deep);
  --bg-dark-alt:    var(--oxblood);
  --bg-light:       var(--cream);
  --bg-light-alt:   var(--cream-warm);
  --bg-paper:       var(--paper);

  --fg-on-dark:     var(--cream);
  --fg-on-dark-dim: var(--whisper);
  --fg-on-light:    var(--ink);
  --fg-on-light-dim:var(--burgundy);

  --accent:         var(--champagne);
  --accent-soft:    var(--champagne-soft);

  /* ---------- RULES / DIVIDERS ---------- */
  --rule-champagne: rgba(201, 169, 97, 0.3);
  --rule-champagne-faint: rgba(201, 169, 97, 0.18);
  --rule-burgundy:  rgba(107, 32, 48, 0.22);
  --rule-ink:       rgba(26, 13, 15, 0.18);

  /* ---------- GHOST TYPE OPACITY ---------- */
  --ghost-alpha:    0.035;

  /* ---------- TYPOGRAPHY : FAMILIES ---------- */
  --font-display:   'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:      'Inter Tight', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* ---------- TYPOGRAPHY : VARIATION DEFAULTS ---------- */
  --fraunces-soft-loose: "opsz" 144, "SOFT" 80;
  --fraunces-soft-tight: "opsz" 144, "SOFT" 50;

  /* ---------- TYPOGRAPHY : SCALE (editorial) ---------- */
  --fs-micro:       11px;   /* mono eyebrow, metadata */
  --fs-eyebrow:     12px;   /* mono section labels */
  --fs-small:       14px;
  --fs-body:        16px;
  --fs-body-lg:     18px;
  --fs-lede:        22px;
  --fs-h5:          28px;
  --fs-h4:          36px;
  --fs-h3:          52px;
  --fs-h2:          76px;
  --fs-h1:          112px;
  --fs-hero:        168px;  /* ceremonial spreads only */

  /* ---------- TYPOGRAPHY : LEADING ---------- */
  --lh-tight:       0.92;
  --lh-display:     1.02;
  --lh-snug:        1.22;
  --lh-body:        1.55;
  --lh-loose:       1.72;

  /* ---------- TYPOGRAPHY : TRACKING ---------- */
  --ls-mono-tight:  0.18em;   /* short mono labels */
  --ls-mono:        0.22em;   /* default mono eyebrow */
  --ls-mono-wide:   0.30em;   /* key section markers */
  --ls-display:     -0.02em;  /* tighten Fraunces at display size */

  /* ---------- SPACING (editorial / generous) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- BORDER RADIUS ---------- */
  --radius-xs:  1px;
  --radius-sm:  2px;   /* default — never more on large blocks */
  --radius-pill: 999px;/* small tags / nav only */

  /* ---------- MOTION ---------- */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-reveal:     0.8s;
  --dur-hover:      0.6s;
  --dur-quick:      0.3s;

  /* ---------- LAYERS ---------- */
  --z-base:    0;
  --z-raise:   10;
  --z-sticky:  80;
  --z-overlay: 100;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Drop these on their matching elements; prefer classes for variation.
   ========================================================================= */

html, body {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variation-settings: var(--fraunces-soft-loose);
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variation-settings: var(--fraunces-soft-loose);
  text-wrap: balance;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  font-variation-settings: var(--fraunces-soft-tight);
  text-wrap: balance;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-variation-settings: var(--fraunces-soft-tight);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Lede — larger introductory body */
.lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lede);
  line-height: 1.42;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  color: var(--fg-on-dark-dim);
}
.lede--light { color: var(--fg-on-light-dim); }

/* Body paragraphs */
p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
  margin: 0;
}

/* Eyebrow / metadata */
.eyebrow, .meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--wide { letter-spacing: var(--ls-mono-wide); }
.meta--dim { color: var(--fg-on-dark-dim); }

/* Numbering — small mono, champagne */
.numeral {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--accent);
}

/* Emphasis — italic Fraunces inline */
em, .em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}

/* Currency — ZAR with raised R */
.currency {
  font-family: var(--font-body);
  font-feature-settings: "sups";
  font-size: 0.7em;
  vertical-align: 0.35em;
  margin-right: 0.05em;
  letter-spacing: 0.04em;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-champagne);
  padding-bottom: 1px;
  transition: border-color var(--dur-quick) var(--ease-standard),
              color var(--dur-quick) var(--ease-standard);
}
a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* Hairline rule */
hr, .rule {
  border: 0;
  height: 1px;
  background: var(--rule-champagne);
  margin: var(--space-6) 0;
}
.rule--burgundy { background: var(--rule-burgundy); }
.rule--faint    { background: var(--rule-champagne-faint); }

/* Code / monospace inline */
code, .mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.92em;
}