/*
 * theme.css — Learnpath.sh design tokens.
 *
 * Terminal mood: black ground, amber phosphor accent, monospace type.
 * Opens DARK (the console is the identity). A legible light/paper mode
 * sits under html[data-theme="light"] for the switch, but every value below
 * is chosen so the amber accent still reads as "phosphor", not "brand chip".
 */

:root {
  color-scheme: dark;
  --canvas: #0a0b08;
  --surface: #232321;
  --surface-2: #15140f;
  --border: #37352c;
  --border-strong: #55503f;
  --ink: #edeade;
  --muted: #929188;
  --accent: #ffb000;
  --accent-hover: #ffc94d;
  --accent-ink: #16130a;
  --accent-text: #ffb000;
  --accent-strong: #ffb000;
  --accent-soft: #2c2210;
  --accent-border: #6b4f12;
  --success: #3ddc84;
  --success-ink: #0a1f12;
  --success-soft: #12271a;
  --success-strong: #5fe89c;
  --warning: #ff8a00;
  --warning-ink: #201200;
  --warning-soft: #2a1a06;
  --warning-strong: #ffa93d;
  --danger: #ff5c5c;
  --danger-ink: #200606;
  --danger-soft: #2a1010;
  --danger-strong: #ff8080;
  --chart-1: #ffb000;
  --chart-2: #3ddc84;
  --chart-3: #4fb8ff;
  --chart-4: #ff7a59;
  --chart-5: #c792ff;
  --chart-6: #ffe066;

  --font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --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: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 4px;
  --radius-card: 4px;
  --radius-input: 4px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-btn: none;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f1e8;
  --surface: #ffffff;
  --surface-2: #ece7d8;
  --border: #d9d3bf;
  --border-strong: #b7ae94;
  --ink: #17160f;
  --muted: #63604f;
  --accent: #b97400;
  --accent-hover: #a06400;
  --accent-ink: #19140a;
  --accent-text: #8a5800;
  --accent-strong: #8a5800;
  --accent-soft: #f1e3c2;
  --accent-border: #d9b979;
  --success: #1f8a53;
  --success-ink: #ffffff;
  --success-soft: #e0f2e7;
  --success-strong: #17703f;
  --warning: #b5620a;
  --warning-ink: #ffffff;
  --warning-soft: #f5e6d3;
  --warning-strong: #93500a;
  --danger: #c23636;
  --danger-ink: #ffffff;
  --danger-soft: #f6dede;
  --danger-strong: #a12b2b;
  --chart-1: #b97400;
  --chart-2: #1f8a53;
  --chart-3: #1c6fa8;
  --chart-4: #c2502f;
  --chart-5: #7a4fae;
  --chart-6: #a68a12;
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

/* A faint scanline texture on the page ground — the one thing that makes
   this app's canvas its own, not just "a dark background". Subtle on
   purpose: it must never compete with the type sitting on top of it. */
body {
  background-image:
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ink) 3%, transparent) 0px,
      color-mix(in srgb, var(--ink) 3%, transparent) 1px,
      transparent 1px,
      transparent 3px
    );
}
html[data-theme="light"] body { background-image: none; }

/* ---- Typewriter caret ---------------------------------------------------
 * A blinking block cursor sits after the typed text while it is typing,
 * and keeps blinking gently once done — the one thing on the page that
 * moves after load, everything else stays still. */
@keyframes caret-blink {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
.typewriter::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.95em;
  margin-left: 0.08em;
  vertical-align: -0.12em;
  background: var(--accent-text);
  animation: caret-blink 1s steps(1, jump-none) infinite;
}
html.reduced-motion .typewriter::after { animation: none; opacity: 1; }