/* ============================================================
   GolfBet — v2 tokens.
   Palette: brand ink + brand mint + white. All colour values
   live in brand.css (--gb-*); the tokens below are role aliases
   onto that one palette. Type: Sora (display, mixed-case) +
   Geist (body) + JetBrains Mono (data/eyebrows) + Caveat.

   GB-31: one green (--gb-mint #34D399), one ink (--gb-ink
   #0D2818). Do not reintroduce a second brand green here.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@500;700&display=swap");

:root {
  /* Ink ramp — mapped onto the brand background scale */
  --ink-900: var(--gb-bg0);      /* #060E09 deepest bands */
  --ink-800: var(--gb-ink);      /* #0D2818 primary background */
  --ink-700: var(--gb-bg2);      /* #13261B cards / pills */
  --ink-600: var(--gb-bg3);      /* #1B3425 elevated */
  --ink-500: var(--gb-bg3);
  --ink-400: var(--gb-bg3);

  /* Off-white / paper — neutrals, deliberately not brand colours */
  --paper-50:  #FFFFFF;
  --paper-100: var(--gb-text);        /* #F0FDF4 */
  --paper-200: #E6EAE7;
  --paper-300: #C7CDC9;
  --paper-400: var(--gb-text-muted);  /* #9CA3AF */
  --paper-500: #6B7773;

  /* Brand green — ONE green, plus the one sanctioned darker mint */
  --green-300: var(--gb-green);      /* #4ADE80 secondary positive accent */
  --green-400: var(--gb-mint-deep);  /* #2BB183 hover / pressed */
  --green-500: var(--gb-mint);       /* #34D399 THE brand green */
  --green-600: var(--gb-mint-deep);  /* #2BB183 */
  --green-700: var(--gb-bg3);        /* #1B3425 deep gradient stop */
  --green-800: var(--gb-ink);        /* #0D2818 */

  /* Functional — semantic, not brand. Left as-is. */
  --red-400:  #FB7185;      /* bogey / soft loss — mirrors C.danger in the app theme */
  --red-500:  #E25453;      /* used sparingly: losses, alerts */
  --red-600:  #C03B3A;
  --amber-500:#E8B055;      /* sparingly: notes */

  /* Functional aliases */
  --bg: var(--ink-800);
  --fg: var(--paper-100);
  --muted: var(--paper-400);
  --rule: rgba(var(--gb-text-rgb), 0.10);
  --rule-strong: rgba(var(--gb-text-rgb), 0.22);
  --green: var(--green-500);

  /* Type */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-script: "Caveat", "Brush Script MT", cursive;

  /* Display type scale (features-page baseline) */
  --display-hero: clamp(40px, 4.8vw, 68px);
  --display-section: clamp(28px, 3vw, 40px);
  --display-title: clamp(22px, 2.4vw, 28px);
  --display-stat: clamp(32px, 3.2vw, 42px);
  --display-script: clamp(20px, 2.2vw, 28px);
  /* @deprecated use --display-section */
  --display-xl: var(--display-section);

  /* ============================================================
     Back-compat aliases — keep older sub-pages rendering until
     they're refactored. Map gold→green, cream→paper, etc.
     ============================================================ */
  --gold-400: var(--green-400);
  --gold-500: var(--green-500);
  --gold-600: var(--green-600);
  --gold-700: var(--green-700);
  --cream-50:  var(--paper-50);
  --cream-100: var(--paper-100);
  --cream-200: var(--paper-200);
  --cream-300: var(--paper-300);
  --cream-400: var(--paper-400);
}

html, body { background: var(--bg); color: var(--fg); }

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* Headline class — Sora, mixed case (NOT uppercase), tight tracking */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.display-hero { font-size: var(--display-hero); }
.display-section { font-size: var(--display-section); }
.display-title { font-size: var(--display-title); }

.display,
.display-hero,
.display-section,
.display-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.display-hero {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Page hero — homepage only */
h1.headline {
  font-family: var(--font-display);
  font-size: var(--display-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Subpage titles */
.ph h1 {
  font-family: var(--font-display);
  font-size: var(--display-section);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Major section headings */
.pitch h2,
.tiers h2,
.process h2,
.cats h2,
.output h2,
.pack-copy h2,
.builder-head h2,
.press-copy h2,
.library-head h2,
.preview-head h2,
.pro-head h2,
.cta-bar h2,
.final h2,
.table-section h2,
.studio h2,
.templates h2,
.pack-copy h2,
.pro-copy h2,
.passport h2,
.contact h2,
.deal-h .t,
.deal-h h2,
.runner-head h2,
.menu-head h2,
.board-intro h2,
.screenshot-band .shot-copy h2,
.pitch-panel h2,
.support-block h2,
.status h2,
.cats h2,
.faq h2 {
  font-family: var(--font-display);
  font-size: var(--display-section);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Panel / card titles */
.feature h3,
.game-card .gname,
.lib-title,
.studio .pt h4,
.quick .qc h3,
.step h4,
.flight-step h3,
.runner-step h3,
.flight-pt h3,
.out-card h3,
.cat h4,
.receipt h4,
.tpl .nm,
.hb-cocktail .nm,
.sb-card .t,
.games-card .gr .nm,
.menu-item .nm,
.line .game,
.member-card .hd .nm,
.pro-card .ph .t,
.pitch .pt h4,
.tier h3,
.deal-h .t,
.faq .q,
details.faq-row .q,
.cat h4,
.sb-card .t,
.contact .lr .ch,
.form .fh,
.flight-step h3,
.pair-card .pair-flow,
.lib-custom-math strong,
.deal table td:last-child {
  font-family: var(--font-display);
  font-size: var(--display-title);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pair-card .pair-amt {
  font-family: var(--font-display);
  font-size: var(--display-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.script-cap {
  font-family: var(--font-script);
  font-size: var(--display-script);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}

.section-ttl {
  font-size: var(--display-title);
  line-height: 1.2;
}

.metric-strip .m .n,
.flight-step .num,
.runner-step .n,
.flight-pt .n,
.step .n,
.tier .pay .n,
.pro-card .price .free,
.pro-price,
.stat-giant,
.deal .big,
.passport .big {
  font-family: var(--font-display);
  font-size: var(--display-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: 0;
}

.script {
  font-family: var(--font-script);
  font-weight: 500;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-500);
}

/* ============================================================
   Motion primitives — the two signature transitions
   ============================================================ */

.tracer { position: relative; }
.tracer-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.tracer-svg path {
  fill: none;
  stroke: var(--green-500);
  stroke-width: 2;
  stroke-dasharray: var(--tracer-len, 1) var(--tracer-len, 1);
  stroke-dashoffset: calc(var(--tracer-len, 1) * (1 - var(--tracer-progress, 0)));
  filter: drop-shadow(0 0 10px rgba(var(--gb-mint-rgb),0.45));
}
.tracer-ball {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #e6eae7 60%, #c7cdc9 100%);
  box-shadow: 0 0 14px rgba(255,255,255,0.55), 0 0 28px rgba(var(--gb-mint-rgb),0.4);
  transform: translate(-50%, -50%);
  opacity: var(--tracer-ball-opacity, 0);
  pointer-events: none;
}

[data-putt] {
  --pf: 0;
  --roll-from: -120%;
  transform:
    translateX(calc(var(--roll-from) * (1 - min(var(--pf), 0.7) / 0.7)))
    translateY(calc(max(var(--pf) - 0.7, 0) / 0.3 * 6px))
    scale(calc(1 - max(var(--pf) - 0.7, 0) / 0.3 * 0.06));
  opacity: clamp(0, calc(var(--pf) * 3), 1);
  will-change: transform, opacity;
}
[data-putt-cup] { position: relative; }
[data-putt-cup]::after {
  content: "";
  position: absolute;
  left: 0; bottom: -22px;
  width: 38px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--ink-900) 30%, transparent 72%);
  opacity: calc(1 - var(--pf, 0));
  transition: opacity .2s;
  pointer-events: none;
}

/* Marquee ticker baseline */
.ticker {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid var(--rule);
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  animation: ticker-roll 60s linear infinite;
  padding: 10px 0;
}
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item { display: inline-flex; align-items: center; gap: 10px; }
.ticker-item .mono { font-size: 12px; }
.ticker-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 6px rgba(var(--gb-mint-rgb),0.55);
}

/* Subtle base texture (very subtle — not noisy) */
.felt {
  background-color: var(--ink-800);
  background-image:
    radial-gradient(rgba(var(--gb-mint-rgb),0.04) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
}

/* GolfBet wordmark — for use in nav etc.
   "Golf" is white, "Bet" is brand green, matching BC. */
.gb-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gb-wordmark .bet { color: var(--green-500); }

/* Monogram G mark — geometric "G" with a flag, rendered in SVG inline. */
/* See .gb-mark span below for example markup pattern. */

/* ============================================================
   Buttons (used by multiple pages)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  transition: transform .12s ease, background .15s, border-color .15s, color .15s;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.btn-green {
  background: var(--green-500);
  color: var(--gb-ink);
}
.btn-green:hover { background: var(--green-400); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--paper-100);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--green-500); color: var(--green-500); }
.btn .arrow {
  display: inline-block;
  transition: transform .2s;
}
.btn:hover .arrow { transform: translateX(3px); }