/* The theme: one set of tokens, two modes, loaded before everything else.
 *
 * Focus mode's look is now the whole site's look. The old instrument panel was
 * built for someone who wanted every number at once; most of the time nobody
 * does, and the friendlier surface turned out to read better everywhere, not
 * only on the pared-back screen.
 *
 * The reference stays risograph print: coloured stock rather than white, three
 * inks, hard offset shadows instead of soft blur, and edges that are not quite
 * straight. Hence --radius, four different corner values that read as drawn by
 * hand, and --lift, a solid offset shadow rather than a gaussian one.
 *
 * TYPE. The sentence leads and the number supports: Source Serif for anything
 * read, IBM Plex Mono for anything scanned -- labels, figures, controls. This
 * is the inverse of what the interface used to do, and it is what makes the
 * same palette feel like a notebook rather than a dashboard.
 *
 * MODES. Every colour is a token here and nowhere else, so dark mode is this
 * file's [data-theme="dark"] block and nothing more. app.css and focus.css both
 * alias their own historical names onto these, which is why neither needed
 * rewriting. If you are adding a colour, add it here.
 *
 * Dark is not the old near-black. It is a deep plum, the same hue family as the
 * light mode's ink, so the two modes read as one design at two exposures rather
 * than as two designs.
 *
 * COMPACT. This is used on a phone, one-handed, usually while something else is
 * happening. The scale below is deliberately tighter than the old one, and the
 * media queries add room on bigger screens rather than taking it away on small
 * ones.
 */

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/ibmplexmono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/ibmplexmono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/ibmplexmono-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/ibmplexmono-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 600;
  font-display: swap; src: url('/static/fonts/sourceserif4-400-600-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 600;
  font-display: swap; src: url('/static/fonts/sourceserif4-400-600-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/static/fonts/sourceserif4-400-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/static/fonts/sourceserif4-400-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- light mode */

:root {
  --bg: #eef0fa;
  --bg-dots: #cdd0e8;
  --surface: #ffffff;
  --surface-2: #f6f7fd;
  --line: #2c2340;
  --line-soft: #d5d8ec;

  --text: #2c2340;
  --dim: #6b6386;
  --faint: #766e93;

  --accent: #ff6b8a;
  --accent-2: #2fb3a3;
  --accent-3: #ffc94d;

  --live: #f0a020;
  --good: #2fb3a3;
  --bad: #e14d6a;

  --on-accent: #ffffff;
  --on-accent-3: #2c2340;

  --qb: #ffc94d;
  --rb: #2fb3a3;
  --wr: #ff6b8a;
  --te: #b79cf0;
  --k: #b9bdd8;
  --def: #ff9f68;
  --flex: #7d9bff;
  --superflex: #b79cf0;
  --bench: #cbcfe6;
  --on-bench: #4a4468;
  --placeholder: #a6a1bd;
  /* A QR code must stay white in both modes or scanners fail on it. */
  --qr-paper: #ffffff;
  /* Okabe-Ito orange and vermillion, for the picks page's coin flip and
     flipped pick. Legible for every common colour vision deficiency on both
     backgrounds, so neither mode block redefines them. */
  --oi-orange: #E69F00;
  --oi-vermillion: #D55E00;

  /* The app shell (Phase 5). The sidebar is the light mode's own ink, so it
     reads as the same print run rather than a borrowed dark theme. Links get
     their own token: the position pink is too light for body text on white
     (2.9:1), so running text uses a deeper cut of it (5.1:1). */
  --link: #b8325a;
  /* Status colours as text. The fills above are too light to read as words
     on white, so text and pill outlines use these darker cuts (4.5:1+). */
  --good-ink: #1b7a6e;
  --live-ink: #9a5c00;
  --bad-ink: #b8324f;
  /* Text on a pastel fill (position chips, primary buttons) in the app shell.
     White on these pastels is under 3:1; the ink is over 6:1. */
  --on-fill: #2c2340;
  --nav-bg: #2c2340;
  --nav-hover: #3a2f55;
  --nav-active: #4a3d6c;
  --nav-text: #f3f1fb;
  --nav-dim: #bdb5da;
  --nav-line: #463b63;
  --nav-mark: #ff6b8a;
  --topbar-bg: #ffffff;
  --thead-bg: #f1f2fa;
  --zebra: #f8f8fd;
  --row-hover: #eef0fb;
  --card-line: #dfe1f0;
  --sidebar-w: 248px;
  --topbar-h: 52px;

  --serif: 'Source Serif 4', Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Tighter than the old scale. A phone held one-handed is the default case. */
  --t-xs: .68rem;
  --t-sm: .78rem;
  --t-md: .88rem;
  --t-base: .97rem;
  --t-lg: 1.1rem;
  --t-xl: 1.32rem;
  --t-2xl: 1.7rem;

  --gap: .55rem;
  --pad: .8rem;
  --pad-lg: 1rem;
  --stack: 1.35rem;

  /* Four corners, four values. The hand-drawn tell, used everywhere. */
  --radius: 12px 15px 11px 14px;
  --radius-lg: 16px 21px 14px 19px;
  --radius-sm: 7px 9px 6px 8px;
  --lift: 3px 3px 0 var(--line);
  --lift-lg: 5px 5px 0 var(--line);
  --r: 12px;
}

/* ---------------------------------------------------------------- dark mode */

:root[data-theme="dark"] {
  --bg: #1c1730;
  --bg-dots: #2a2344;
  --surface: #262040;
  --surface-2: #2f2850;
  --line: #0f0c1c;
  --line-soft: #3a3260;

  --text: #ece9f8;
  --dim: #a49dc4;
  --faint: #8b83ad;

  /* Lifted a little: the same pink on a dark ground reads muddier than it does
     on paper, and these two carry the position chips. */
  --accent: #ff86a1;
  --accent-2: #46c9b8;
  --accent-3: #ffd469;

  --live: #ffb948;
  --good: #46c9b8;
  --bad: #ff7d95;

  --on-accent: #1c1730;
  --on-accent-3: #1c1730;

  --qb: #ffd469;
  --rb: #46c9b8;
  --wr: #ff86a1;
  --te: #c4aefc;
  --k: #6f688f;
  --def: #ffab7d;
  --flex: #93aaff;
  --superflex: #c4aefc;
  --bench: #3d3663;
  --on-bench: #b6afd4;
  --placeholder: #7c749c;
  --link: #ff8fa8;
  --good-ink: #46c9b8;
  --live-ink: #ffb948;
  --bad-ink: #ff7d95;
  --on-fill: #1c1730;
  --nav-bg: #130f24;
  --nav-hover: #211a3b;
  --nav-active: #2f2754;
  --nav-text: #ece9f8;
  --nav-dim: #aaa3cb;
  --nav-line: #2a2344;
  --nav-mark: #ff86a1;
  --topbar-bg: #211b39;
  --thead-bg: #2d2650;
  --zebra: #2a2347;
  --row-hover: #322a58;
  --card-line: #3a3260;
}

/* An explicit choice always wins. With no choice stored, follow the device --
   somebody who runs their phone dark at 8pm on draft night meant it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1730;
    --bg-dots: #2a2344;
    --surface: #262040;
    --surface-2: #2f2850;
    --line: #0f0c1c;
    --line-soft: #3a3260;
    --text: #ece9f8;
    --dim: #a49dc4;
    --faint: #8b83ad;
    --accent: #ff86a1;
    --accent-2: #46c9b8;
    --accent-3: #ffd469;
    --live: #ffb948;
    --good: #46c9b8;
    --bad: #ff7d95;
    --on-accent: #1c1730;
    --on-accent-3: #1c1730;
    --qb: #ffd469;
    --rb: #46c9b8;
    --wr: #ff86a1;
    --te: #c4aefc;
    --k: #6f688f;
    --def: #ffab7d;
    --flex: #93aaff;
    --superflex: #c4aefc;
    --bench: #3d3663;
    --on-bench: #b6afd4;
    --placeholder: #7c749c;
    --link: #ff8fa8;
    --good-ink: #46c9b8;
    --live-ink: #ffb948;
    --bad-ink: #ff7d95;
    --on-fill: #1c1730;
    --nav-bg: #130f24;
    --nav-hover: #211a3b;
    --nav-active: #2f2754;
    --nav-text: #ece9f8;
    --nav-dim: #aaa3cb;
    --nav-line: #2a2344;
    --nav-mark: #ff86a1;
    --topbar-bg: #211b39;
    --thead-bg: #2d2650;
    --zebra: #2a2347;
    --row-hover: #322a58;
    --card-line: #3a3260;
  }
}

/* ----------------------------------------------------------------- surfaces */

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(var(--bg-dots) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Focus is never removed, only drawn to match. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

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