/* ============================================================================
 * S8 BETS — Brand Tokens · v2.0
 * ============================================================================
 * Extracted from /brand/logo-showcase.html (the authoritative brand reference).
 * Use these CSS variables on every new page. Never hard-code colours or fonts.
 *
 * Created:   2026-04-25 (Sprint 1)
 * Source:    C:\Users\Schuyler\OneDrive\Documents\Claude\Projects\S8Bets.com\brand\logo-showcase.html
 * Status:    NEW file. Original source untouched.
 * ============================================================================ */

/* Colour + structural tokens are the single source in brand-colors.css. Import
   them first (all @import rules must precede other rules), then the font payload.
   This file adds only the font-family vars and the engine/tag badge palettes. */
@import "brand-colors.css";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=DM+Mono:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Colours, lines, status, easings, radii, spacing, and layout now live in
     brand-colors.css (imported above) as the single source. This file adds only
     the font-family vars and the engine/tag badge palettes (not colours of the
     core --s8-* set, and not present in brand-colors.css). */

  /* ── Type ── */
  --s8-font-display: 'Cormorant Garamond', serif;
  --s8-font-body:    'Inter', system-ui, sans-serif;
  --s8-font-mono:    'DM Mono', monospace;

  /* ── Engine badge palette ── */
  --engine-model:       #4A6FA5;
  --engine-model-bg:    rgba(74,111,165,0.12);
  --engine-props:       #6C8FC7;
  --engine-props-bg:    rgba(108,143,199,0.12);
  --engine-research:    #B89B5E;
  --engine-research-bg: rgba(184,155,94,0.12);
  --engine-hybrid:      #6B7280;
  --engine-hybrid-bg:   rgba(107,114,128,0.14);

  /* ── Tag badge palette ── */
  --tag-boost:          #5ae3b2;
  --tag-boost-bg:       rgba(45,170,140,0.12);
  --tag-boost-border:   rgba(45,170,140,0.32);
}

/* Light mode tokens (toggle by adding class="s8-light" to body) */
body.s8-light {
  --s8-navy:      #FAFAF7;
  --s8-navy-2:    #F0EDE5;
  --s8-navy-3:    #E8E3D5;
  --s8-cream:     #0A1628;
  --s8-slate:     #5A6B78;
  --s8-slate-dim: #8A9BA8;
  --s8-line:      rgba(10, 22, 40, 0.18);
  --s8-card-bg:   #F0EDE5;
}

/* ── Reset baseline ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Prevent iOS Safari from inflating text size on rotation lock change. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Defensive horizontal-scroll guard. If any element ever blows past the
   viewport, the page won't scroll sideways. Combined with overflow-wrap
   below, runaway long URLs / tokens stay contained. */
html, body { overflow-x: hidden; }
body {
  font-family: var(--s8-font-body);
  background: var(--s8-navy);
  color: var(--s8-cream);
  line-height: 1.6;
  font-weight: 400;
  min-height: 100vh;
  /* Anchored full-bleed background; doesn't widen the viewport. */
  overflow-wrap: break-word;
  word-wrap: break-word;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(201, 169, 97, 0.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(201, 169, 97, 0.04), transparent 40%);
}

/* ── Common utility classes ── */
.s8-container {
  max-width: var(--s8-max-width);
  margin: 0 auto;
  padding: 0 var(--s8-space-7);
}

.s8-h1 {
  font-family: var(--s8-font-display); font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px); letter-spacing: -0.03em;
  line-height: 1.05;
}
.s8-h2 {
  font-family: var(--s8-font-display); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -0.025em;
  line-height: 1.1;
}
.s8-h3 {
  font-family: var(--s8-font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
}

.s8-eyebrow {
  font-family: var(--s8-font-mono); font-size: 11px;
  color: var(--s8-gold); letter-spacing: 0.3em; text-transform: uppercase;
}
.s8-label {
  font-family: var(--s8-font-mono); font-size: 10px;
  color: var(--s8-slate-dim); letter-spacing: 0.2em; text-transform: uppercase;
}

.s8-pill {
  display: inline-flex; align-items: center; padding: 4px 11px;
  border-radius: var(--s8-radius-pill); font-family: var(--s8-font-mono);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid var(--s8-line); color: var(--s8-slate);
}
.s8-pill.gold  { color: var(--s8-gold);  border-color: var(--s8-gold); }
.s8-pill.green { color: var(--s8-green); border-color: rgba(74,222,128,0.32); }
.s8-pill.amber { color: var(--s8-amber); border-color: rgba(245,158,11,0.4); }
.s8-pill.red   { color: var(--s8-red);   border-color: rgba(239,68,68,0.4); }

.s8-card {
  background: var(--s8-card-bg); border: 1px solid var(--s8-line);
  border-radius: var(--s8-radius-lg); padding: var(--s8-space-5);
}

.s8-button {
  font-family: var(--s8-font-body); font-weight: 600; font-size: 14px;
  padding: 10px 22px; border-radius: var(--s8-radius-pill);
  background: var(--s8-gold); color: var(--s8-navy);
  border: 1px solid var(--s8-gold);
  cursor: pointer; transition: all 0.2s ease;
  letter-spacing: 0.01em;
}
.s8-button:hover { background: var(--s8-gold-light); border-color: var(--s8-gold-light); }
.s8-button:disabled { opacity: 0.5; cursor: not-allowed; }
.s8-button.ghost { background: transparent; color: var(--s8-cream); border-color: var(--s8-line); }
.s8-button.ghost:hover { border-color: var(--s8-gold); color: var(--s8-gold); }
.s8-button.danger { background: var(--s8-red); color: white; border-color: var(--s8-red); }
.s8-button.danger:hover { background: #dc2626; border-color: #dc2626; }

.s8-input {
  font-family: var(--s8-font-body); font-size: 14px;
  width: 100%; padding: 11px 14px;
  background: var(--s8-navy); color: var(--s8-cream);
  border: 1px solid var(--s8-line); border-radius: var(--s8-radius-md);
  transition: border-color 0.2s ease;
}
.s8-input:focus { outline: none; border-color: var(--s8-gold); }
.s8-input::placeholder { color: var(--s8-slate-dim); }

/* ── Responsible-gambling footer (drop into every public/gated page) ── */
.s8-rg-footer {
  margin-top: var(--s8-space-7); padding: var(--s8-space-5);
  border-top: 1px solid var(--s8-line);
  font-family: var(--s8-font-mono); font-size: 11px;
  color: var(--s8-slate); letter-spacing: 0.04em; line-height: 1.7;
}
.s8-rg-footer .label {
  color: var(--s8-gold); letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 6px; display: block;
  font-size: 10px;
}

/* ── Hairline divider ── */
.s8-divider { height: 1px; background: var(--s8-line); margin: var(--s8-space-5) 0; }