/*
 * theme.css — Select Star's design-system values.
 * Swiss ledger: paper-white ground, one ledger-green accent, an amber
 * (warning-token) highlight reserved for focus states and the one moment
 * that needs it. Square corners, hairline borders, no shadow.
 */

:root {
  --canvas: #fafaf7;
  --surface: #fdfdfb;
  --surface-2: #f2f0e8;
  --border: #dcd9cd;
  --border-strong: #b7b3a3;
  --ink: #14191a;
  --muted: #676a69;
  --accent: #176b45;
  --accent-hover: #125536;
  --accent-ink: #fdfdfb;
  --accent-text: #1d7a52;
  --accent-strong: #176b45;
  --accent-soft: #e3efe7;
  --accent-border: #b9d7c4;
  --success: #176b45;
  --success-ink: #fdfdfb;
  --success-soft: #e3efe7;
  --success-strong: #145a3a;
  --warning: #a15b12;
  --warning-ink: #fdfdfb;
  --warning-soft: #f5e6d1;
  --warning-strong: #8a4c0d;
  --danger: #b3261e;
  --danger-ink: #fdfdfb;
  --danger-soft: #f6dedd;
  --danger-strong: #932019;
  --chart-1: #176b45;
  --chart-2: #a15b12;
  --chart-3: #1d7a52;
  --chart-4: #676a69;
  --chart-5: #0f4f34;
  --chart-6: #c98a3d;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  /* Swiss shape: square, hairline, no shadow. */
  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 8px 28px color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-btn: none;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 600;
  --measure: 62ch;

  /* This app's own tokens: the amber cell-mark used for annotations, and the
     fixed dark ink band (the trainer photo band) — deliberately constant
     across modes, since it is a printed band, not the page ground. */
  --x-mark: #a15b12;
  --x-band: #14191a;
  --x-band-ink: #fdfdfb;
  --x-band-muted: #b7c0bb;
}

html[data-theme="dark"] {
  --canvas: #14191a;
  --surface: #1b2122;
  --surface-2: #222829;
  --border: #333a3a;
  --border-strong: #4b5252;
  --ink: #f2f1ea;
  --muted: #9a9d9b;
  --accent: #2f9d68;
  --accent-hover: #3ab077;
  --accent-ink: #0d1210;
  --accent-text: #4fc189;
  --accent-strong: #4fc189;
  --accent-soft: #1f3327;
  --accent-border: #2f5940;
  --success: #2f9d68;
  --success-ink: #0d1210;
  --success-soft: #1f3327;
  --success-strong: #6fd6a0;
  --warning: #d68a3d;
  --warning-ink: #0d1210;
  --warning-soft: #3a2c17;
  --warning-strong: #e7a765;
  --danger: #d9635b;
  --danger-ink: #0d1210;
  --danger-soft: #3a2220;
  --danger-strong: #ef8b83;
  --chart-1: #2f9d68;
  --chart-2: #d68a3d;
  --chart-3: #4fc189;
  --chart-4: #9a9d9b;
  --chart-5: #6fd6a0;
  --chart-6: #e7a765;
  --shadow-raised: 0 8px 28px color-mix(in srgb, #000000 45%, transparent);
  --x-mark: #d68a3d;
  --x-band: #0d1110;
  --x-band-ink: #fdfdfb;
  --x-band-muted: #9fb0a8;
}

/*
 * app.css — Select Star's own rules: the dark trainer band, the SQL
 * typewriter cursor, the ledger annotation marks and the reservation panel.
 * Everything here reads tokens only.
 */

/* ---- The dark ink band (bio section) ------------------------------------
   Fixed dark, deliberately not derived from --canvas/--ink, so it reads as
   a printed band rather than an inverted page in dark mode. */
.band-dark {
  background: var(--x-band);
  color: var(--x-band-ink);
}
.band-muted { color: var(--x-band-muted); }
.band-ink\/90 { color: color-mix(in srgb, var(--x-band-ink) 90%, transparent); }

/* ---- Hero / closing SQL cta links -----------------------------------------
   Plain text, mono, tracked — a ledger link, never a filled button. */
.cta-link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.cta-link:hover {
  color: var(--accent-text);
  border-color: var(--accent-text);
  text-decoration: none;
}

/* ---- SQL typewriter --------------------------------------------------------
   Rests fully visible (the complete query, no JS needed). app.js clears it
   and types it back in; the cursor only exists while .is-typing is set. */
[data-typewriter].is-typing::after {
  content: "";
  display: inline-block;
  width: 0.55ch;
  margin-left: 0.15ch;
  height: 1em;
  vertical-align: -0.15em;
  background: var(--accent-text);
  animation: sql-blink 0.9s steps(2, jump-none) infinite;
}
@keyframes sql-blink { 50% { opacity: 0; } }
html.reduced-motion [data-typewriter].is-typing::after { animation: none; }

/* The headline it resolves into: rests visible; JS toggles .is-pending
   only for the brief moment it is animating in. */
h1[data-resolve] {
  opacity: 1;
  transform: none;
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
h1[data-resolve].is-pending { opacity: 0; transform: translateY(10px); }
html.reduced-motion h1[data-resolve].is-pending { opacity: 1; transform: none; }

/* ---- Results: ledger annotation marks --------------------------------------
   A small folded-corner triangle pinned to the top-left of each outcome,
   in the amber ledger mark. */
.mark { position: relative; padding-left: 1.5rem; }
.mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 11px 11px;
  border-color: transparent transparent var(--x-mark) transparent;
}

/* ---- Reservation panel ------------------------------------------------------
   A designed ledger surface, not a bare form. */
.ledger-panel { position: relative; }