/* ═══════════════════════════════════════════════════════════════════════
   TheWatchInfo Design Tokens
   ─────────────────────────────────────────────────────────────────────
   Single source of truth for typography, colour, spacing, radii, shadows.
   All future pages should source visual values from these tokens rather
   than re-deciding inline. Inspired by FT, Bloomberg, Hodinkee, EveryWatch.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type families ─────────────────────────────────────────────── */
  /* Editorial serif: long-form prose, hero headlines, article H1/H2. */
  --font-serif:   'Source Serif 4', 'Source Serif Pro', 'Spectral', Georgia, 'Times New Roman', serif;
  /* UI sans: navigation, buttons, forms, dashboards, body. */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Display sans (used sparingly, big hero numerals, brand logo etc.) */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* Numeric mono: prices, percentages, calibre refs, dates in tables. */
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type scale (rem-based, mobile-first) ──────────────────────── */
  --fs-eyebrow:    0.69rem;   /* 11px, tracked label */
  --fs-meta:       0.78rem;   /* 12.5px, captions, dates */
  --fs-body-sm:    0.875rem;  /* 14px, UI body */
  --fs-body:       1rem;      /* 16px, default body */
  --fs-body-lg:    1.06rem;   /* 17px, editorial body */
  --fs-h4:         1.05rem;   /* 17px, small all-caps section heads */
  --fs-h3:         1.18rem;   /* 19px */
  --fs-h2:         1.55rem;   /* 25px, article H2 */
  --fs-h1:         2.0rem;    /* 32px mobile, scales up */
  --fs-hero:       2.5rem;    /* 40px mobile, scales up */

  /* Fluid clamps for the headline scales */
  --fs-h1-fluid:    clamp(1.7rem, 3.6vw, 2.5rem);
  --fs-hero-fluid:  clamp(2.0rem, 5.5vw, 3.5rem);
  --fs-display:     clamp(2.5rem, 7vw, 4.5rem);

  /* Line heights */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-base:     1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.75;

  /* Letter-spacing */
  --tracking-display:  -0.012em;
  --tracking-tight:    -0.005em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-eyebrow:   0.16em;
  --tracking-caps:      0.08em;

  /* ── Colour ─────────────────────────────────────────────────────── */
  /* Surfaces */
  --c-bg:           #ffffff;
  --c-bg-alt:       #fafafa;
  --c-bg-muted:     #f4f4f5;
  --c-bg-warm:      #faf8f5;   /* very subtle warm wash for editorial pages */

  /* Ink */
  --c-ink:          #0a0a0a;
  --c-ink-strong:   #0f172a;
  --c-ink:          #18181b;
  --c-ink-muted:    #52525b;
  --c-ink-subtle:   #71717a;
  --c-ink-faint:    #a1a1aa;

  /* Hairlines + borders */
  --c-line:         #e4e4e7;
  --c-line-soft:    #f4f4f5;
  --c-line-strong:  #d4d4d8;

  /* Brand accent (emerald, kept) */
  --c-accent:        #047857;
  --c-accent-hover:  #065f46;
  --c-accent-soft:   #ecfdf5;
  --c-accent-ink:    #064e3b;

  /* Data tone (used in tables, leaderboards, charts) */
  --c-pos:           #16a34a;     /* gain */
  --c-pos-soft:      #dcfce7;
  --c-neg:           #dc2626;     /* loss */
  --c-neg-soft:      #fee2e2;
  --c-neutral:       #71717a;
  --c-warning:       #d97706;
  --c-warning-soft:  #fef3c7;

  /* ── Spacing scale (predictable, mobile-first) ─────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --r-sm:    4px;
  --r:       8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-full:  9999px;

  /* ── Shadow scale ──────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm:  0 2px 6px rgba(15, 23, 42, .06);
  --shadow:     0 8px 22px -8px rgba(15, 23, 42, .12);
  --shadow-lg:  0 18px 40px -12px rgba(15, 23, 42, .18);

  /* ── Container widths ──────────────────────────────────────────── */
  --w-prose:    720px;     /* editorial column for article body */
  --w-content:  1040px;    /* hero figures, wider content blocks */
  --w-page:     1280px;    /* page max width */
  --w-wide:     1440px;    /* full-bleed layouts */
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY CLASSES (additive, designed to coexist with Tailwind)
   ─────────────────────────────────────────────────────────────────────
   Prefix `ts-` for "TheWatchInfo design SYSTEM" so they don't collide.
   ═══════════════════════════════════════════════════════════════════════ */

/* Type families */
.ts-serif    { font-family: var(--font-serif); }
.ts-sans     { font-family: var(--font-sans); }
.ts-display  { font-family: var(--font-display); }
.ts-mono     { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* Type stacks (combined family + size + leading + tracking) */
.ts-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  line-height: var(--lh-snug);
}
.ts-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--c-ink-subtle);
  line-height: var(--lh-snug);
}
.ts-headline {
  font-family: var(--font-serif);
  font-size: var(--fs-h1-fluid);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--c-ink-strong);
}
.ts-hero {
  font-family: var(--font-serif);
  font-size: var(--fs-hero-fluid);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--c-ink-strong);
}
.ts-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--c-ink-muted);
  line-height: var(--lh-snug);
}
.ts-body {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-strong);
}
.ts-ui {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-base);
  color: var(--c-ink-strong);
}

/* Numeric data presentation */
.ts-price,
.ts-num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  color: var(--c-ink-strong);
}
.ts-price-lg {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink-strong);
}

/* Data tone */
.ts-pos     { color: var(--c-pos); }
.ts-neg     { color: var(--c-neg); }
.ts-neutral { color: var(--c-neutral); }
.ts-pos-bg  { background: var(--c-pos-soft); color: var(--c-pos); }
.ts-neg-bg  { background: var(--c-neg-soft); color: var(--c-neg); }

/* Hairlines */
.ts-rule    { border-top: 1px solid var(--c-line); }
.ts-rule-strong { border-top: 1px solid var(--c-line-strong); }

/* Editorial caps small-caps (for ledes) */
.ts-lede::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════
   FALLBACK STYLES — give existing tags sensible defaults from tokens
   so unstyled content automatically picks up the editorial look.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tailwind override: route font-serif / font-sans / font-mono utilities ──
   to our token-defined families, so existing Tailwind usage gets the upgrade
   without needing class-by-class changes. */
.font-serif { font-family: var(--font-serif) !important; }
.font-sans  { font-family: var(--font-sans)  !important; }
.font-mono  { font-family: var(--font-mono)  !important; font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* tabular-nums anywhere it's used (Tailwind utility) gets the mono treatment.
   This lifts every KPI block, leaderboard cell, and table number to JetBrains Mono
   without needing to touch each call site. */
.tabular-nums {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Numeric content inside tables of class .ts-table gets mono automatically */
.ts-table { font-family: var(--font-sans); font-size: var(--fs-body-sm); }
.ts-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-ink-subtle);
  border-bottom: 2px solid var(--c-ink-strong);
  padding: 10px 12px;
}
.ts-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
.ts-table tbody tr:hover { background: var(--c-bg-alt); }
.ts-table .num,
.ts-table .price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}