/* ============================================================
   DESIGN TOKENS - edit these CSS variables to retheme the site.
   Tailwind (CDN) colors "brand" and "ink-900" read from these vars.
   ============================================================ */
:root {
  /* brand (primary periwinkle) */
  --brand-400:     #93A3FF;
  --brand-rgb:     147, 163, 255;
  --brand-hover:   #7F91F7;
  /* darker brand shade used for accent TEXT on white (contrast) */
  --brand-ink:     #4354C7;
  /* background (white) */
  --bg:            #FFFFFF;
  --bg-rgb:        255, 255, 255;
  /* text */
  --text:          #000000;
  --muted:         #666666;
}

html, body {
  background-color: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

::selection { background-color: rgba(var(--brand-rgb), 0.35); color: #000; }

.num {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.text-muted { color: var(--muted); }
.text-accent { color: var(--brand-ink); }

.btn-primary { background-color: var(--brand-400); color: #000; }
.btn-primary:hover { background-color: var(--brand-hover); }

summary::-webkit-details-marker { display: none; }

section[id] { scroll-margin-top: 5rem; }

.faq-tab[aria-selected="true"] { background-color: rgba(var(--brand-rgb), 0.18); color: #000; font-weight: 500; }

/* ---------- Hero backdrop ---------- */
.hero-grid {
  background-image:
    radial-gradient(60% 60% at 85% 10%, rgba(var(--brand-rgb), 0.22) 0%, rgba(var(--brand-rgb), 0) 70%),
    linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

/* ---------- Challenge selector ---------- */
.model-tab {
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #000;
  transition: background-color .15s, border-color .15s, color .15s;
}
.model-tab[aria-selected="true"] { background: #000; border-color: #000; color: #fff; }

.size-pill {
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #000;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.size-pill:hover { border-color: rgba(0,0,0,0.3); }
.size-pill[aria-checked="true"] {
  background: var(--brand-400);
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.35);
  font-weight: 600;
}
.size-pill:focus-visible, .model-tab:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }

.price-flash { animation: priceFlash .35s ease; }
@keyframes priceFlash { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }