/* ============================================================
   Oche — Colors & Type
   The warm pub that happens to keep impeccable books.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Core palette (80% of all surfaces) ---------- */
  --pitch-black: #0A0907;       /* Page/app background. Slightly warmer than pure black. */
  --stout:       #141210;       /* Cards, sections, raised surfaces. */
  --walnut:      #1F1B17;       /* Hover states, active cards, modals. */
  --ash:         #2A2520;       /* Dividers, card borders. Subtle. */
  --chalk:       #F2EBE0;       /* Headings, body. Warm off-white — never pure #FFF. */
  --smoke:       #A39B8E;       /* Captions, metadata, dates. */
  --dust:        #6B6359;       /* Disabled, placeholders. */

  /* ---------- Brand accents (deliberate, not decorative) ---------- */
  --brass:        #E8B948;      /* Logo gradient top, primary CTAs, voice colour. */
  --ember:        #E04E2A;      /* Logo gradient bottom. */
  --bullseye-cyan:#00C8E0;      /* Stats highlights, links, "you" markers, focus rings. */
  --treble-green: #3FAE6A;      /* Success, achievement unlocks. */
  --cork:         #D89A3C;      /* Caution, mid-states. */
  --bull-red:     #D93B2E;      /* Errors, busts, eliminations. */

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--chalk);
  --fg-2: var(--smoke);
  --fg-3: var(--dust);
  --fg-on-brass: var(--pitch-black);

  /* ---------- Semantic surface ---------- */
  --bg-1: var(--pitch-black);
  --bg-2: var(--stout);
  --bg-3: var(--walnut);
  --border-1: var(--ash);
  --border-2: rgba(232, 185, 72, 0.18); /* brass at low opacity */

  /* ---------- The signature gradient ---------- */
  --oche-gradient: linear-gradient(135deg, #E8B948 0%, #E04E2A 100%);

  /* ---------- Pub-warm light spill ---------- */
  --amber-haze: radial-gradient(circle at 70% 30%, rgba(232, 185, 72, 0.08) 0%, transparent 70%);
  --amber-haze-strong: radial-gradient(circle at 70% 30%, rgba(232, 185, 72, 0.14) 0%, transparent 65%);

  /* ---------- Functional (NEVER change — they do real work) ---------- */
  --dartboard-dark:   #1A1A1A;
  --dartboard-light:  #F5DEB3;
  --dartboard-green:  #0F9D58;
  --dartboard-red:    #DB4437;
  --dartboard-wire:   #C0C0C0;

  --cricket-yellow:   #EAB308;
  --cricket-green:    #22C55E;
  --cricket-red:      #EF4444;

  /* Stats scale (gold→gray) */
  --stat-best:        #FFD700;
  --stat-good:        var(--treble-green);
  --stat-avg:         var(--bullseye-cyan);
  --stat-low:         #6B7280;

  /* Game-mode gradients (functional, mode recognition) */
  --gm-x01:        linear-gradient(135deg, #EF4444, #F97316);
  --gm-cricket:    linear-gradient(135deg, #F97316, #EAB308);
  --gm-clock:      linear-gradient(135deg, #EAB308, #22C55E);
  --gm-shanghai:   linear-gradient(135deg, #06B6D4, #3B82F6);
  --gm-killer:     linear-gradient(135deg, #3B82F6, #8B5CF6);
  --gm-halveit:    linear-gradient(135deg, #8B5CF6, #EC4899);
  --gm-knockout:   linear-gradient(135deg, #EC4899, #EF4444);

  /* ---------- Type families ---------- */
  --font-display: 'Fraunces', Georgia, serif;          /* Soul moments only */
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-feature-tnum: "tnum" 1, "ss01" 1; /* Always tabular for numbers */

  /* ---------- Type scale (web) ---------- */
  --fs-display-xl: clamp(56px, 7vw, 80px);  /* Hero — one per page max */
  --fs-display-l:  clamp(36px, 4.5vw, 48px);/* Section heroes */
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-label:      12px;
  --fs-stat-xl:    clamp(48px, 6vw, 64px);
  --fs-stat:       22px;

  --lh-display:    1.05;
  --lh-tight:      1.15;
  --lh-body:       1.55;

  --tracking-display: -0.02em;
  --tracking-label:   0.08em;

  /* ---------- Spacing (4-step) ---------- */
  --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;

  /* ---------- Radius ---------- */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-5: 24px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-oche: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-ui:    200ms;
  --dur-trans: 400ms;
  --dur-hero:  800ms;

  /* ---------- Shadows / glow ---------- */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  --shadow-raised: 0 12px 36px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --glow-brass: 0 0 24px rgba(232, 185, 72, 0.35), 0 0 64px rgba(224, 78, 42, 0.15);
  --glow-brass-soft: 0 0 18px rgba(232, 185, 72, 0.22);
  --glow-cyan: 0 0 18px rgba(0, 200, 224, 0.35);
  --glow-green: 0 0 18px rgba(63, 174, 106, 0.30);
  --glow-red:   0 0 18px rgba(217, 59, 46, 0.32);
}

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

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

.display-xl, h1.display, .hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-xl);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
}

.display-l {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-l);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}

h1, .h1 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}

h3, .h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.small, small {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.label, .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.stat-xl {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-stat-xl);
  font-feature-settings: var(--font-feature-tnum);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat, .num {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-stat);
  font-feature-settings: var(--font-feature-tnum);
  font-variant-numeric: tabular-nums;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Wordmark — Brass→Ember gradient fill */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  background: var(--oche-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Links */
a {
  color: var(--bullseye-cyan);
  text-decoration: none;
  transition: opacity var(--dur-ui) var(--ease-oche);
}
a:hover { opacity: 0.78; }

/* Selection */
::selection {
  background: rgba(232, 185, 72, 0.30);
  color: var(--chalk);
}