/* Gambit Club — luxe layer (site-wide look). Loaded after main.css and premium.css on every page.
 * One idea: ink-navy surfaces, ivory type, champagne-gold hairlines. Gold is rationed — it marks the one thing to press or the one
 * thing that is yours (progress, balance, the current step); everything else stays quiet.
 * It works by re-pointing main.css's tokens, so pages that use var(--gold)/var(--border) follow without edits.
 */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #050a18;
  --bg2: #070f22;
  --card: rgba(10, 19, 40, .86);
  --card2: rgba(14, 26, 52, .9);
  --border: rgba(222, 196, 128, .14);
  --border2: rgba(222, 196, 128, .32);
  --gold: #d9b45a;
  --gold2: #f0d584;
  --indigo: #86aee8;
  --text: #f4efe4;
  --text-dim: #adb6c9;
  --text-mute: #8792a8;

  --lx-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --lx-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lx-gold-grad: linear-gradient(180deg, #f3dc92 0%, #d9b45a 55%, #c39a42 100%);
  --lx-hair: linear-gradient(90deg, transparent, rgba(240, 213, 132, .55), transparent);
  --lx-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px -18px rgba(0, 0, 0, .75);
  --lx-glow: 0 0 0 1px rgba(240, 213, 132, .35), 0 10px 30px -10px rgba(217, 180, 90, .45);
}

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { font-family: var(--lx-ui); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(217, 180, 90, .35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(222, 196, 128, .28) transparent; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; border-radius: 6px; }

/* display type: the serif carries the page's voice, numbers stay in Inter for legibility */
h1, h2 { font-family: var(--lx-display); font-weight: 700; letter-spacing: -.012em; text-wrap: balance; }
h3, h4 { font-family: var(--lx-ui); letter-spacing: -.005em; text-wrap: balance; }

/* top bar */
html nav { background: rgba(5, 10, 24, .82); backdrop-filter: blur(22px) saturate(1.5); border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -14px rgba(0, 0, 0, .8); }
html nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--lx-hair); opacity: .5; pointer-events: none; }
html .nav-logo { font-family: var(--lx-display); font-size: 19px; letter-spacing: .01em; background: linear-gradient(180deg, #f6e3a3, #d2a94c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html .nav-link { border-radius: 10px; }
html .nav-link:hover { background: rgba(222, 196, 128, .08); }
html .nav-link.active { color: var(--gold2); background: rgba(222, 196, 128, .1); }

/* bottom bar */
html .bnav { background: rgba(5, 10, 24, .88); backdrop-filter: blur(22px) saturate(1.5); border-top: 1px solid var(--border); box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .8); }
html .bnav-item { color: #8f9ab0; }
html .bnav-item.active { color: var(--gold2); }

/* buttons: soft light from above, no hard edges */
html .btn { border-radius: 12px; font-weight: 700; letter-spacing: .005em; }
html .btn-primary, html .btn-gold { background: var(--lx-gold-grad); color: #1b1304; border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 10px 24px -10px rgba(217, 180, 90, .65); }
html .btn-primary:hover, html .btn-gold:hover { opacity: 1; filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 30px -10px rgba(217, 180, 90, .8); }
html .btn-primary:active, html .btn-gold:active { transform: translateY(1px); filter: brightness(.97); }
html .btn-ghost { background: rgba(255, 255, 255, .05); color: var(--text); border: 1px solid var(--border2); }
html .btn-ghost:hover { background: rgba(222, 196, 128, .1); color: #fff; }

/* surfaces */
html .card, html .card2 { background: linear-gradient(180deg, rgba(16, 28, 56, .88), rgba(8, 15, 33, .9)); border: 1px solid var(--border); box-shadow: var(--lx-shadow); }
html .card::before { background: var(--lx-hair); opacity: .6; }

/* inputs */
html input:not([type=checkbox]):not([type=radio]):not([type=range]), html select, html textarea { font-family: var(--lx-ui); }
html input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, html select:focus, html textarea:focus { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(240, 213, 132, .16); outline: none; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }