/* Native follows the current roqueventures.com landing page. Light and Black are
   optional appearances of the same school. The feel follows the accepted client portal:
   fine Instrument Sans, soft radii, a collapsible sidebar, the full width. DESIGN.md
   records the pins and the old-to-new token mapping. */
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #2A303B;
  --bg2: #363F4C;
  --bg3: #414C5D;
  --ink: #F4F6FB;
  --muted: #BEC7D6;
  --dim: #BEC7D6;
  --line: #F4F6FB29;
  --line2: #F4F6FB3D;
  --control-line: #93A0B5;
  --accent: #85A2FF;
  --accent-hover: #A0B6FF;
  --accent-ink: #1A2437;

  /* soft surfaces, mixed from the pins: a row under the pointer, the row you are on, a raised card */
  --tint: color-mix(in srgb, var(--ink) 6%, transparent);
  --tint-strong: color-mix(in srgb, var(--ink) 10%, transparent);
  --card: color-mix(in srgb, var(--bg2) 72%, var(--bg));
  --field: var(--bg);

  /* one face; --display and --mono stay as names for rooms that still use them */
  --font: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: var(--font);
  --body: var(--font);
  --mono: var(--font);
  --code: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fine type: display, page title, section, body large, body, small */
  --t1: 32px; --t2: 24px; --t3: 18px; --t4: 15px; --t5: 14px; --t6: 12px;
  --t-dis: var(--t1);
  --t-page: var(--t2);
  --t-title: var(--t3);
  --t-lede: var(--t4);
  --t-small: var(--t5);
  --t-mono: var(--t6);
  --t-credit-mobile: 11px;

  /* the I-2 spacing scale, named by pixels */
  --s0: 0; --s2: 2px; --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s20: 20px; --s24: 24px;
  --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px; --s96: 96px;

  --gutter: 24px;
  /* soft radii: controls, rows, cards, panels; no full pill */
  --r-control: 8px; --r-row: 10px; --r-card: 14px; --r-panel: 18px;
  --r-ctl: var(--r-control);
  --r-tag: 6px;
  /* the frame: sidebar open, as a rail, the top bar, a control's height */
  --sidebar: 256px; --rail: 56px; --navh: 56px; --control: 36px; --touch: 44px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6FB;
  --bg2: #FFFFFF;
  --bg3: #E8EDF5;
  --ink: #1A2437;
  --muted: #46536A;
  --dim: #56637A;
  --line: #1A243729;
  --line2: #1A243740;
  --control-line: #788496;
  --accent: #365BC4;
  --accent-hover: #294BAA;
  --accent-ink: #FFFFFF;
  --field: var(--bg2);
}
:root[data-theme="black"] {
  color-scheme: dark;
  --bg: #0B0C0F;
  --bg2: #101216;
  --bg3: #15181D;
  --ink: #F4F6FB;
  --muted: #BEC7D6;
  --dim: #ADB8CB;
  --line: #F4F6FB29;
  --line2: #F4F6FB3D;
  --control-line: #7D8BA3;
  --accent: #85A2FF;
  --accent-hover: #A0B6FF;
  --accent-ink: #1A2437;
}
@media (max-width: 640px) {
  :root { --t1: 26px; --t2: 22px; --t3: 17px; --gutter: 16px; --navh: 52px; --control: 44px; }
}