/* Shared "tech-forward" theme — the source of truth for color tokens and
   base component styles across every page in the app. Light is the default
   theme; adding data-theme="dark" to <html> switches to the dark variant
   below. Mint/amber accents and the A-F grade colors are identical in both
   themes — only surfaces, ink, and the muted/neutral steps differ.

   Linked from every template right after fonts.css. Pages keep their own
   <style> block for page-specific layout, but should no longer declare their
   own :root, reset, body background, or button family — those live here so a
   token change doesn't require hunting across a dozen files. */

:root {
  /* ── Light theme (default) — a soft, warm variation of white, not flat/stark ── */
  --bg-deep: #F3F1EC; --bg: #F7F5F1; --bg-raised: #FFFBFF;
  --panel-grad-1: rgba(33,37,49,.035); --panel-grad-2: rgba(33,37,49,.012);
  --border: rgba(33,37,49,.12); --border-soft: rgba(33,37,49,.07);

  --ink: #212531; --text: #212531;
  --muted-1: #454b57; --muted-2: #5b6572; --muted-3: #78818c; --muted-4: #99a1a9;

  --ghost-bg: rgba(33,37,49,.06); --ghost-bg-hover: rgba(33,37,49,.12);
  --field-bg: rgba(33,37,49,.05);
  --row-hover: rgba(33,37,49,.03);

  /* translucent "paper" tint used by page-specific pills/badges/toggles —
     RGB triplet only (no alpha) so call sites can pick their own opacity:
     rgba(var(--surface-tint-rgb), .06) etc. */
  --surface-tint-rgb: 33,37,49;

  /* text/link use needs more contrast than the base accent fills provide on a
     light surface — point at the existing darker variants instead of adding
     new colors. */
  --link: var(--mint-dark); --link-hover: var(--a);

  --mint: #77D2A7; --mint-light: #9fe3c2; --mint-dark: #52b184;

  /* Sunflower Gold / Burnt Tangerine / Dusk Blue — the shelved palette,
     swapped in for their closest counterparts in light mode only; dark mode
     keeps the original amber/red/slate-blue below. */
  --amber: #F7B32B; --amber-dark: #b9791f;
  --f: #E3170A;

  /* rare opaque light "paper" surface (e.g. the hero's floating lead-cards) —
     most of the app uses the translucent .panel surface below instead */
  --card-text: #464D77;

  /* grade colors — a/b/c/d unchanged; f follows --f above */
  --a: #3f8f68; --b: #77D2A7; --c: #F7B32B; --d: #b9791f;

  --accent: #77D2A7; /* checkbox/radio accent-color and focus rings */

  /* Back-compat aliases: every pre-retheme page referenced these two var
     names directly (`var(--card)`, `var(--muted)`) dozens of times each.
     Aliasing them here means most of those references pick up theme changes
     automatically once a page deletes its own light :root, instead of
     needing every call site hunted down and rewritten by hand. */
  --card: linear-gradient(180deg, var(--panel-grad-1), var(--panel-grad-2));
  --muted: var(--muted-3);
}

:root[data-theme="dark"] {
  --bg-deep: #1a222b; --bg: #212b35; --bg-raised: #2d3948;
  --panel-grad-1: rgba(250,248,245,.09); --panel-grad-2: rgba(250,248,245,.03);
  --border: rgba(250,248,245,.12); --border-soft: rgba(250,248,245,.08);

  --ink: #FAF8F5; --text: #FAF8F5;
  --muted-1: #cfd8de; --muted-2: #b3bec6; --muted-3: #a9b6bf; --muted-4: #7f8b95;

  --ghost-bg: rgba(250,248,245,.08); --ghost-bg-hover: rgba(250,248,245,.16);
  --field-bg: rgba(0,0,0,.22);
  --row-hover: rgba(250,248,245,.03);
  --surface-tint-rgb: 250,248,245;

  --link: var(--mint); --link-hover: var(--mint-light);

  /* dark mode keeps the pre-shelved-palette values */
  --amber: #EAA335; --amber-dark: #b9791f;
  --f: #c1443a;
  --card-text: #3C4D5C;
  --a: #3f8f68; --b: #77D2A7; --c: #EAA335; --d: #b9791f;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1200px 800px at 12% -8%, rgba(119,210,167,.08), rgba(119,210,167,0) 55%),
    linear-gradient(180deg, var(--bg-raised), var(--bg) 55%, var(--bg-deep));
  background-attachment: fixed;
  color: var(--ink); font-size: 14px; overflow-x: hidden;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

.muted { color: var(--muted-3); }

/* ── Panels ── replaces the old opaque white .card on every page */
.panel {
  background: linear-gradient(180deg, var(--panel-grad-1), var(--panel-grad-2));
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ── Buttons ── */
.btn {
  padding: 8px 16px; border-radius: 100px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; font-family: inherit; transition: background .15s, opacity .15s;
}
.btn-primary { background: linear-gradient(135deg, #8adcb5, #66c296); color: #16261e; }
.btn-primary:hover { background: linear-gradient(135deg, var(--mint), var(--mint-dark)); }
.btn-ghost { background: var(--ghost-bg); color: var(--ink); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--ghost-bg-hover); }
.btn-danger { background: rgba(220,38,38,.15); color: var(--f); border: 1px solid rgba(220,38,38,.35); }
.btn-danger:hover { background: rgba(220,38,38,.25); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 100px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
  .btn-sm { padding: 9px 14px; font-size: 13px; }
}

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted-3); border-bottom: 1px solid var(--border);
}
td { padding: 13px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--row-hover); }

/* ── Inputs ── */
input[type=text], input[type=email], input[type=url], input[type=password],
input[type=date], input[type=search], input[type=number], textarea, select {
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--field-bg);
  border: none; box-shadow: inset 0 0 0 1px var(--border); border-radius: 8px; padding: 10px 14px;
}
/* Strip browser-injected search decoration (magnifier icon, clear ✕ button) */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; }
input:focus, textarea:focus, select:focus {
  outline: none; box-shadow: inset 0 0 0 1px var(--border), 0 0 0 3px rgba(119,210,167,.3);
}
input::placeholder, textarea::placeholder { color: var(--muted-4); }

/* ── Pills / badges ── generic status pill; page-specific hues layer on top */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
