/* RS Trader Academy — one design system, two surfaces.
 *
 * The reading surface (the Schools) and the working surface (the Arena) are different jobs
 * and should feel different to use. They should not feel like different companies. Before
 * this file they were: separate palettes, separate token NAMES (--bg/--text against
 * --paper/--ink), separate type scales, separate ideas of what a border was. Sharing the
 * vocabulary is what makes one product out of two halves.
 *
 * Consumed by both site/assets/style.css and app/src/styles.css. Change a value here and it
 * moves everywhere, which is the point.
 *
 * The palette is warm-biased on purpose. The accent is the amber of a 21-day line — already
 * this product's colour before I arrived — and a neutral grey next to it reads as an accident.
 * Every grey below carries a little of the same hue, so the accent looks chosen rather than
 * dropped in.
 */

:root {
  /* ---- ground: the reading surface, light ---- */
  --paper: #fbfaf8;          /* page */
  --panel: #ffffff;          /* raised: cards, masthead, footer */
  --sunken: #f4f2ee;         /* recessed: inputs, code, chart wells */
  --edge: #e3e0da;
  --edge-strong: #cfcac1;

  --ink: #1c1e21;            /* body text */
  --ink-soft: #3d4247;       /* secondary text that is still text */
  --muted: #5f6469;          /* labels, captions, metadata */

  --accent: #b8801a;         /* amber, darkened to hold contrast on paper */
  --accent-ink: #7d5610;     /* accent text that must pass AA on --accent-soft */
  --accent-soft: #fdf5e6;
  --accent-edge: #e8cf9b;

  /* Semantic. Reserved for money, scores and risk — never decoration. A green border on a
     card that is merely fine teaches the eye to ignore green, and then it cannot warn. */
  --good: #1f7a55;
  --bad: #b3323d;
  --good-soft: #eaf6f1;
  --bad-soft: #fdeef0;

  /* ---- type ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --read: 17px;              /* the Schools: sustained prose */
  --work: 15px;              /* the Arena: dense, scanned, operated */
  --measure: 68ch;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.35rem;
  --step-3: 1.75rem;
  --step-4: 2.15rem;

  /* ---- space: one 4px rhythm, so unrelated components still line up ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  --shadow: 0 1px 2px rgba(28, 30, 33, 0.06), 0 4px 12px rgba(28, 30, 33, 0.05);

  --speed: 140ms;
}

/* ---- ground: dark ----
 * The Arena always lands here (see .surface-work below); the Schools follow the reader's
 * system preference. Same names, same roles, so no component knows which ground it is on. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14171a;
    --panel: #191d21;
    --sunken: #0e1216;
    --edge: #262b30;
    --edge-strong: #38414a;

    --ink: #e6e8ea;
    --ink-soft: #c3c9ce;
    --muted: #99a0a6;

    --accent: #e8b339;
    --accent-ink: #f0c765;
    --accent-soft: #241d0d;
    --accent-edge: #4a3c1a;

    --good: #3fb68b;
    --bad: #d9525e;
    --good-soft: #10231d;
    --bad-soft: #241417;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --paper: #14171a;
  --panel: #191d21;
  --sunken: #0e1216;
  --edge: #262b30;
  --edge-strong: #38414a;

  --ink: #e6e8ea;
  --ink-soft: #c3c9ce;
  --muted: #99a0a6;

  --accent: #e8b339;
  --accent-ink: #f0c765;
  --accent-soft: #241d0d;
  --accent-edge: #4a3c1a;

  --good: #3fb68b;
  --bad: #d9525e;
  --good-soft: #10231d;
  --bad-soft: #241417;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ---- the shared masthead ----
 * Byte-identical markup on the static pages and inside the SPA. It is the single strongest
 * signal that crossing from a lesson into the Arena is not leaving the site: the bar above
 * your head does not move, does not restyle, and does not renumber its links. */
.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--edge);
  background: var(--panel);
}

.masthead .wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step-1);
  white-space: nowrap;
}

.masthead .wordmark .rs { color: var(--accent); }

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
}

.masthead nav a,
.masthead nav button.navlink {
  display: inline-block;
  padding: var(--s2) var(--s3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  text-decoration: none;
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  transition: color var(--speed), background var(--speed);
}

.masthead nav a:hover,
.masthead nav button.navlink:hover {
  color: var(--ink);
  background: var(--sunken);
}

/* aria-current="page" does the work, so the active state cannot drift from the real route */
.masthead nav a[aria-current="page"],
.masthead nav button.navlink[aria-current="page"] {
  color: var(--ink);
  background: var(--accent-soft);
  border-color: var(--accent-edge);
}

.masthead nav .sep {
  width: 1px;
  height: 20px;
  background: var(--edge);
  margin: 0 var(--s2);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}