/* ============================================================
   Maverick Gaming — redesign tokens & base
   Brand source of truth: PokerCo DESIGN_SYSTEM.md
   Navy #232859 · Steel #8c9ebc · Gold #cea155 (sparing) · white-first
   Brand font: Bunken Tech Sans Pro · UI/body: Inter
   ============================================================ */
:root{
  /* neutrals (white-first) */
  --ink:        #232859;   /* dark CHROME is Maverick NAVY, not black */
  --ink-rgb:    35,40,89;  /* navy as rgb for overlays */
  --ink-2:      #2d3470;   /* raised navy surface */
  --ink-3:      #3a4180;   /* hairline on navy */
  --body-ink:   #0b0c0f;   /* near-black body copy on light */
  --paper:      #f7f8fa;   /* app background (surface-2) */
  --paper-2:    #eef0f3;   /* subdued zone (surface-3) */
  --cream:      #ffffff;   /* primary card surface */

  /* brand */
  --red:        #232859;   /* PRIMARY (navy) — name kept for compatibility */
  --red-bright: #344093;   /* lighter navy for hover */
  --red-deep:   #1a1e47;   /* deep navy */
  --steel:      #8c9ebc;   /* steel-blue secondary brand tone */
  --steel-soft: #e8edf4;
  --gold:       #cea155;   /* PANTONE 7407 — sparing accent */
  --gold-2:     #e0c483;
  --gold-soft:  #f4ecd9;
  --green:      #5aa130;   /* live-site accent — nav active, links */
  --green-2:    #6cb840;
  --green-soft: #eef6e7;
  --accent:     #1e4bd8;   /* action blue (links/focus) */

  /* text */
  --text:       #0b0c0f;
  --text-soft:  #60666f;
  --text-onink: #ffffff;
  --text-onink-soft: #c6d0e2;

  /* type */
  --font-brand:   "Bunken Tech Sans Pro", system-ui, sans-serif;
  --font-display: "Poppins", system-ui, sans-serif;
  --font-cond:    "Poppins", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* spacing / shape */
  --maxw: 1240px;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 18px 50px -22px rgba(35,40,89,.4);
  --shadow-card: 0 10px 30px -16px rgba(35,40,89,.22);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---- type helpers ---- */
.display{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1.08;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.display.tight{ letter-spacing:.01em; }
.kicker{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  font-size:12.5px;
}
.cond{ font-family:var(--font-cond); }

/* ---- layout ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
@media (max-width:720px){ .section{ padding:56px 0; } }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-cond); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:14px; line-height:1;
  padding:15px 26px; border-radius:var(--radius);
  border:2px solid transparent; transition:.18s ease;
  white-space:nowrap;
}
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-bright); transform:translateY(-1px); }
.btn-gold{ background:var(--gold); color:var(--red-deep); }
.btn-gold:hover{ background:var(--gold-2); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:inherit; border-color:currentColor; }
.btn-ghost:hover{ background:rgba(35,40,89,.06); }
.btn-ghost.on-ink{ border-color:rgba(255,255,255,.5); }
.btn-ghost.on-ink:hover{ background:rgba(255,255,255,.12); }
.btn-sm{ padding:11px 18px; font-size:12.5px; }

/* ---- chips / labels ---- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-cond); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; font-size:11px;
  padding:5px 10px; border-radius:var(--radius);
  border:1px solid var(--line, #e5e7eb); color:var(--text-soft);
}
.chip.solid{ background:var(--ink); color:var(--text-onink); border-color:transparent; }
.chip.red{ background:var(--steel-soft); color:var(--red); border-color:transparent; }
.chip.gold{ background:var(--gold-soft); color:#7a5a1e; border-color:transparent; }

/* ---- image placeholder (drop real photos here) ---- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(35,40,89,.06) 0 10px, rgba(35,40,89,.025) 10px 20px),
    var(--paper-2);
  display:grid; place-items:center;
}
.ph.dark{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, rgba(255,255,255,.018) 10px 20px),
    #1c2050;
}
.ph .ph-label{
  font-family:"SF Mono", ui-monospace, "JetBrains Mono", monospace; font-size:11px; letter-spacing:.04em;
  color:rgba(35,40,89,.5); text-transform:uppercase; text-align:center; padding:8px 12px;
}
.ph.dark .ph-label{ color:rgba(255,255,255,.5); }

/* utility */
.center{ text-align:center; }
.muted{ color:var(--text-soft); }
.onink{ color:var(--text-onink); }
.onink .muted, .onink-soft{ color:var(--text-onink-soft); }
.divider{ height:1px; background:var(--line, #e5e7eb); border:0; }