/* ATHLX theme — "Box Score" look.
   Light (default) = T5 Stone & Turquoise.  Dark (phone in dark mode) = T3 Turquoise Night.
   Every page loads this LAST; page styles reference the --x-* tokens below. */

:root {
  --x-paper: #E6E4DE;
  --x-card: #F3F2EE;
  --x-input: #FFFFFF;
  --x-ink: #1C1F22;
  --x-muted: #4A4F55;
  --x-dim: #62676D;
  --x-rule: #C7C4BB;
  --x-accent: #1C1F22;          /* accents are ink — turquoise is reserved for the logo */
  --x-tq: #5CF0C8;              /* the logo turquoise */
  --x-btn: #1C1F22;             /* buttons: ink with turquoise text */
  --x-btn-hover: #2E3337;
  --x-btnfg: #F3F2EE;
  --x-tint: rgba(28, 31, 34, .05);
  --x-tintb: #B3AFA5;
  --x-header: rgba(230, 228, 222, .96);
  --x-em-bg: transparent;
  --x-em-fg: #1C1F22;
  --x-dots: rgba(28, 31, 34, .07);
  --x-shadow: 0 10px 30px rgba(28, 31, 34, .12);
  color-scheme: light;

  /* page-level variable names → theme */
  --bg: var(--x-paper);
  --bg-2: var(--x-card);
  --bg2: var(--x-card);
  --bg3: var(--x-card);
  --bg-card: var(--x-card);
  --bg-input: var(--x-input);
  --card: var(--x-card);
  --line: var(--x-rule);
  --border: var(--x-rule);
  --text: var(--x-ink);
  --muted: var(--x-muted);
  --dim: var(--x-dim);
  --cyan: var(--x-accent);
  --cyan-dim: var(--x-tint);
  --cyan-border: var(--x-tintb);
}

@media (prefers-color-scheme: dark) {
  :root {
    --x-paper: #0E1312;
    --x-card: #151B1A;
    --x-input: #0B0F0E;
    --x-ink: #EAF2EE;
    --x-muted: #A9B8B3;
    --x-dim: #85938F;
    --x-rule: #2A3533;
    --x-accent: #EAF2EE;
    --x-btn: #EAF2EE;
    --x-btn-hover: #FFFFFF;
    --x-btnfg: #0E1312;
    --x-tint: rgba(255, 255, 255, .04);
    --x-tintb: #3A4643;
    --x-header: rgba(14, 19, 18, .96);
    --x-em-bg: transparent;
    --x-em-fg: #EAF2EE;
    --x-dots: rgba(255, 255, 255, .05);
    --x-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* Newsprint halftone texture */
body {
  background-color: var(--x-paper) !important;
  background-image: radial-gradient(var(--x-dots) 1px, transparent 1.3px) !important;
  background-size: 7px 7px !important;
  color: var(--x-ink);
  font-family: 'Archivo Narrow', system-ui, sans-serif;
}
body::before { display: none !important; }

/* Headlines: Anton, upright, uppercase */
h1, h2, .page-title, .section-title, .bottom-title, .result-name, .hero h1, .cond, .pf-name {
  font-family: 'Anton', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .5px;
}

/* The highlighted word in headlines ("map.", "fit you", "Roadmap") */
h1 em, h2 em, .page-title em, .bottom-title em, .result-name span, .hname em, .hero h1 em {
  font-style: normal !important;
  background: none !important;
  color: var(--x-em-fg) !important;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .1em;
  transform: none !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Small labels / eyebrows in the typewriter face */
.hero-eyebrow, .section-tag, .page-tag, .q-label, .story-tag, .pavia-label, .route-label, .steps-title,
.st-lbl, .views-lbl, .hello, .rm-trust, .count-label, .chip, .nav-pill, .action-title, .views-total span {
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 1px;
}

/* Header bars */
body > nav, body > header {
  background: var(--x-header) !important;
  border-bottom: 3px double var(--x-ink) !important;
}

/* The lockup that replaces the old text logo */
.athlx-lockup { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.athlx-lockup img { height: 34px; width: auto; display: block; }
.athlx-lockup .lk-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .athlx-lockup .lk-light { display: none; }
  .athlx-lockup .lk-dark { display: block; }
}
.athlx-hero-lockup { display: block; margin: 0 auto 22px; width: min(360px, 78vw); }
.athlx-hero-lockup img { width: 100%; height: auto; }

/* Inputs on the light theme */
input, select, textarea { color: var(--x-ink); }
::placeholder { color: var(--x-dim) !important; opacity: 1; }

/* Primary buttons everywhere: ink + turquoise (light) / turquoise + ink (dark) */
.btn-primary, .btn-next, .btn-submit, .btn-bottom, .rm-cta, .ax-go, .mgo, .cta, .viewer-bar a,
a[data-cta="hero"], .hlink {
  background: var(--x-btn) !important;
  color: var(--x-btnfg) !important;
  border-color: var(--x-btn) !important;
}
.btn-primary:hover, .btn-next:hover, .btn-submit:hover, .btn-bottom:hover, .rm-cta:hover, .ax-go:hover {
  background: var(--x-btn-hover) !important;
}
.btn-next:disabled { opacity: .35; }

/* Headline font for buttons (was Barlow italic) */
.btn, .btn-primary, .btn-ghost, .btn-next, .btn-back, .btn-restart, .btn-save, .btn-submit, .btn-bottom,
.rm-cta, .ax-go, .mgo, a[data-cta="hero"], .cta, .viewer-bar a {
  font-family: 'Anton', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .6px !important;
}

/* Hard drop shadow on cards — a printed, poster feel */
.card, .route-card, .story-card, .bottom-card, .vision-card, .why-card, .school, .acct, .strength, .ax-box, .pf-hero {
  box-shadow: 4px 4px 0 var(--x-rule);
}
.athlx-hero-lockup .lk-dark { display: none; }
@media (prefers-color-scheme: dark) { .athlx-hero-lockup .lk-light { display: none; } .athlx-hero-lockup .lk-dark { display: block; } }
body > nav a, .nav-links a { color: var(--x-muted); }
body > nav a:hover, .nav-links a:hover { color: var(--x-accent) !important; }
#installBtn { background: transparent !important; color: var(--x-ink) !important; border: 2px solid var(--x-ink) !important; }

h1, .page-title, .hero h1, .bottom-title, .section-title { text-shadow: none !important; transform: none !important; line-height: 1.02 !important; }
.page-title em, .result-name span { display: inline !important; }
h1 em, .hero h1 em { text-shadow: none !important; }

/* links: ink + underline, no color */
a { text-decoration-color: currentColor; }
.pf-contact a, .pf-link, .video-cta a { color: var(--x-ink) !important; text-decoration: underline !important; }
