/* =========================================================================
   Tob Performance — Colors & Type
   The foundation of every Tob lead-magnet, landing page, and guide.
   Pair Instrument Serif (display) with Mada (body), Syne (logo),
   and Space Mono (labels / micro-copy).
   ========================================================================= */

/* Cleaner pairing — replaces Instrument Serif italic / Syne / Space Mono / Mada.
   - Source Serif 4: editorial display, used WITHOUT italic
   - Plus Jakarta Sans: highly legible body + logo (replaces Mada and Syne)
   - JetBrains Mono: clean utility mono (replaces Space Mono)                 */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- CORE COLORS ----
     A near-black + warm off-white pair, with a single signal gold.
     Use gold sparingly — it's a punctuation mark, not a background.       */
  --black:         #0c0b09;   /* primary surface (dark sections), body text */
  --dark-gray:     #2a2825;   /* alt dark section background */
  --warm-white:    #faf8f4;   /* main content background */
  --off-white:     #f5f1ea;   /* sub-surface, light sections */
  --page-bg:       #eeebe4;   /* page wash around content */
  --accent:        #c8a96e;   /* gold — signal color, never decoration */
  --accent-dark:   #a8893e;   /* gold for body text emphasis */

  /* ---- NEUTRALS ---- */
  --mid-gray:      #888580;   /* secondary text on light */
  --light-gray:    #dedad2;   /* borders, dividers, decorative numerals */
  --section-border:#e8e4dc;   /* hairline rules between sections */
  --body-ink:      #444240;   /* default body text */
  --body-ink-soft: #555350;   /* secondary body text */
  --on-dark-ink:   #c0bdb6;   /* body text on dark sections */
  --on-dark-muted: #9a9590;   /* muted text on dark sections */

  /* ---- WARNING (used once or twice, never decorative) ---- */
  --warning-bg:    #1a0a0a;   /* deep oxblood — the "watch for this" section */
  --warning-dot:   #b87c7c;   /* desaturated red for warning bullets */

  /* ---- TINTED FILLS ---- */
  --accent-fill-08: rgba(200, 169, 110, 0.08);  /* callout backgrounds */
  --accent-fill-07: rgba(200, 169, 110, 0.07);

  /* ---- TYPE FAMILIES ---- */
  --font-serif:    'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-sans:     'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --font-display:  'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;  /* logo + price share body sans, in 800 */
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- TYPE SCALE ----
     The Tob system is built on three voices:
       1. Instrument Serif headlines (large, light, with italic gold accents)
       2. Mada body text (1.75 line-height — the brand reads slow on purpose)
       3. Space Mono kicker labels (10px, 0.18em letter-spacing, uppercase)  */
  --fs-hero:       clamp(42px, 6.5vw, 88px);   /* hero h1 */
  --fs-h1:         clamp(32px, 5vw, 52px);     /* page h1 (guide cover) */
  --fs-h2:         clamp(26px, 3.5vw, 44px);   /* section h2 */
  --fs-h2-large:   clamp(28px, 4vw, 50px);     /* big-section h2 */
  --fs-h3:         15px;                       /* mada uppercase h3 */
  --fs-h4:         22px;                       /* instrument serif inline */
  --fs-callout:    clamp(19px, 2.5vw, 26px);   /* serif callout copy */
  --fs-body:       16px;
  --fs-body-lg:    17px;                       /* landing page body */
  --fs-body-sm:    15px;                       /* card body */
  --fs-meta:       14px;
  --fs-label:      10px;                       /* mono kicker */
  --fs-label-sm:   9px;                        /* mono micro-label */

  --lh-body:       1.75;     /* body — slow, considered */
  --lh-tight:      1.15;     /* serif headlines */
  --lh-callout:    1.5;

  --ls-mono:       0.18em;   /* default mono kicker */
  --ls-mono-tight: 0.14em;
  --ls-mono-wide:  0.16em;

  /* ---- SPACING ---- */
  --section-gap:   90px;     /* between major page sections */
  --section-pad-y: 48px;     /* inside guide section */
  --section-pad-x: 56px;
  --container-w:   860px;    /* the canonical reading width */
  --container-w-wide: 1200px;

  /* ---- LINES & EDGES ----
     Tob doesn't use rounded corners. Everything is 0 radius.
     Edges are sharp, dividers are hairlines, accents are 2px gold bars.   */
  --radius:        0;
  --divider-w:     36px;     /* short gold rule under section labels */
  --divider-h:     2px;
  --accent-border: 2px solid var(--accent);
  --hairline:      1px solid var(--section-border);
  --hairline-dark: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   SEMANTIC TYPE — drop-in classes that match the brand voice 1:1
   ========================================================================= */

.t-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mid-gray);
  display: block;
}
.t-kicker--gold  { color: var(--accent); }
.t-kicker--muted { color: var(--mid-gray); }

.t-hero {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.t-hero em { font-style: normal; color: var(--accent); }

.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.1;
}
.t-h1 em { font-style: normal; color: var(--accent); }

.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-tight);
}
.t-h2 em { font-style: normal; color: var(--accent); }

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.t-h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.25;
}

.t-callout {
  font-family: var(--font-serif);
  font-size: var(--fs-callout);
  font-weight: 400;
  line-height: var(--lh-callout);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body-ink);
}

.t-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--body-ink-soft);
}

.t-mono-num {
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--accent);
  line-height: 1;
}

.t-price {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.t-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--black);
}
.t-logo .dot { color: var(--accent); }

/* ---- The signature 36×2px gold rule that sits under every section label ---- */
.t-divider {
  width: var(--divider-w);
  height: var(--divider-h);
  background: var(--accent);
  display: block;
  border: 0;
  margin: 20px 0;
}

/* ---- Button: black pill with mono micro-caps. Inverts to gold on hover ---- */
.t-btn {
  display: inline-block;
  padding: 14px 30px;
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--black);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.t-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--black); }
.t-btn--ghost { background: transparent; color: var(--black); }
.t-btn--ghost:hover { background: var(--black); color: var(--off-white); border-color: var(--black); }
.t-btn--on-dark { border-color: var(--off-white); background: transparent; color: var(--off-white); }
.t-btn--on-dark:hover { background: var(--accent); color: var(--black); border-color: var(--accent); }