/*
 * theme.css — Flowsmith. A dark IDE-styled academy: near-black surfaces,
 * a glowing accent blue, hairline borders and a swiss-tidy grid. Opens dark;
 * a legible daylight set sits under html[data-theme="light"].
 */

:root {
  color-scheme: dark;

  --canvas: #0b0f17;
  --surface: #1a1f2a;
  --surface-2: #141821;
  --border: #2a3040;
  --border-strong: #414a5e;
  --ink: #e6edf3;
  --muted: #8e949b;

  --accent: #2f6fe0;
  --accent-hover: #3f7ff2;
  --accent-ink: #ffffff;
  --accent-text: #4c8dff;
  --accent-strong: #5d90e6;
  --accent-soft: #16233d;
  --accent-border: #33507c;

  --success: #3ecf8e;
  --success-ink: #06140d;
  --success-soft: #13291f;
  --success-strong: #7fe6b6;
  --warning: #e8b339;
  --warning-ink: #1c1305;
  --warning-soft: #2e230f;
  --warning-strong: #f3cd6e;
  --danger: #ef5a52;
  --danger-ink: #1a0503;
  --danger-soft: #2e1210;
  --danger-strong: #f68b85;

  --chart-1: #4c8dff;
  --chart-2: #e8b339;
  --chart-3: #3ecf8e;
  --chart-4: #b083f0;
  --chart-5: #ef5a52;
  --chart-6: #8e949b;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 12px;
  --radius-card: 12px;
  --radius-input: 12px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent), 0 12px 28px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-raised: 0 20px 48px color-mix(in srgb, var(--ink) 26%, transparent);
  --shadow-btn: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);
  --card-pad: 1.5rem;
  --caps: uppercase;
  --caps-tracking: 0.04em;
  --btn-weight: 700;
  --measure: 68ch;
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --border: #d8dce3;
  --border-strong: #b7bcc6;
  --ink: #12151b;
  --muted: #5b6270;

  --accent: #1d4fbf;
  --accent-hover: #17409c;
  --accent-ink: #ffffff;
  --accent-text: #1d4fbf;
  --accent-strong: #163e93;
  --accent-soft: #e4ecfb;
  --accent-border: #b7cdf5;

  --success: #157349;
  --success-ink: #ffffff;
  --success-soft: #e1f3e9;
  --success-strong: #0c4c2e;
  --warning: #966209;
  --warning-ink: #ffffff;
  --warning-soft: #f6ead2;
  --warning-strong: #744a07;
  --danger: #c23a32;
  --danger-ink: #ffffff;
  --danger-soft: #fae0de;
  --danger-strong: #962c26;

  --chart-1: #1d4fbf;
  --chart-2: #966209;
  --chart-3: #157349;
  --chart-4: #7c3aed;
  --chart-5: #c23a32;
  --chart-6: #5b6270;
}

/*
 * app.css — Flowsmith's own CSS: the one motion moment (the curriculum grid
 * staggering in) plus the sidebar's own scrollbar. Everything else on the
 * page is primitives and utilities. Tokens only.
 */

/* The curriculum grid: at rest every card is fully visible (a visitor with
   no JS, or one who asked for less motion, sees the complete grid). app.js
   adds .js-armed only when it is about to animate the grid in, and .is-inview
   once it has actually entered the viewport — so the hidden state only ever
   exists as a JS-driven transition, never as the page's resting look. */
.stagger-grid.js-armed > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-out, ease), transform 420ms var(--ease-out, ease);
}
.stagger-grid.js-armed.is-inview > * {
  opacity: 1;
  transform: none;
}
.stagger-grid.js-armed.is-inview > *:nth-child(1) { transition-delay: 0ms; }
.stagger-grid.js-armed.is-inview > *:nth-child(2) { transition-delay: 60ms; }
.stagger-grid.js-armed.is-inview > *:nth-child(3) { transition-delay: 120ms; }
.stagger-grid.js-armed.is-inview > *:nth-child(4) { transition-delay: 180ms; }
.stagger-grid.js-armed.is-inview > *:nth-child(5) { transition-delay: 240ms; }
.stagger-grid.js-armed.is-inview > *:nth-child(6) { transition-delay: 300ms; }

html.reduced-motion .stagger-grid.js-armed > * {
  opacity: 1;
  transform: none;
  transition: none;
}

/* The mobile track-chip row scrolls horizontally; without a hint the last
   chip is just sliced off by the screen edge and reads as broken rather
   than scrollable. Fade its trailing edge instead. */
.track-chip-nav {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}

/* A slim, quiet scrollbar for the sidebar rail so it doesn't fight the
   hairline border beside it. */
aside {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
aside::-webkit-scrollbar {
  width: 8px;
}
aside::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}