/* ------------------------------------------------------------------
   Dubwave design system, token layer.
   One system, two modes. Type, rhythm and shape are shared; only
   colour and elevation flip. Every Dubwave tool loads this file first
   and then its own components, so a second tool inherits the system
   instead of copying it.
   Dark is the default (Crate is used in the dark), light follows the
   operating system and can be forced with data-theme on <html>.
   ------------------------------------------------------------------ */

@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('/static/fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('/static/fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('/static/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('/static/fonts/outfit-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('/static/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('/static/fonts/plex-mono-600.woff2') format('woff2'); }

:root {
  /* shared: type, rhythm, shape */
  --font-ui: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 14px;        /* cards and panels */
  --radius-sm: 10px;     /* buttons, inputs, chips that are not pills */
  --tap: 48px;           /* anything you touch while the music plays */
  --focus: 2px;          /* focus ring width, offset 3px */

  /* dark, the room */
  --bg: #050707;
  --panel: #0e1413;
  --panel-2: #131a18;
  --line: rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .055);
  --ink: #ffffff;
  --ink-2: #b7c4be;
  --dim: #8c9b95;
  --accent: #2fd4a3;
  --accent-ink: #04110d;
  --accent-soft: rgba(47, 212, 163, .14);
  --accent-text: #2fd4a3;    /* accent as text on a panel: 9.8:1 here */
  --accent-screen: #2fd4a3;  /* accent as text on the display surface: 9.3:1 here */
  --on-bg: var(--accent-soft);   /* chosen state: glow in the dark, solid in the light */
  --on-ink: #ffffff;
  --on-line: var(--accent);
  --on-glow: 0 8px 30px -14px rgba(47, 212, 163, .85);
  --screen-bg: #131a18;      /* the display: highest contrast against the ground */
  --screen-ink: #ffffff;
  --screen-dim: #8c9b95;
  --warn: #f2c84b;
  --err: #e04936;
  --gold: #f2c84b;

  /* intensity ramp: weight, not a rainbow */
  --i1: #3e5c51; --i1-ink: #dce7e2;
  --i2: #2f7a6b; --i2-ink: #eaf6f2;
  --i3: #7fa24e; --i3-ink: #0b1a10;
  --i4: #d9b341; --i4-ink: #1a1405;
  --i5: #e04936; --i5-ink: #fff1ed;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* light, the panel */
    --bg: #cfcfc9;
    --panel: #e3e3de;
    --panel-2: #d8d8d3;
    --line: #b7b7b1;
    --line-soft: #c6c6c0;
    --ink: #16191a;
    --ink-2: #4a514d;
    --dim: #5c635e;
    --accent: #0b7a63;
    --accent-ink: #ffffff;
    --accent-soft: rgba(11, 122, 99, .12);
    --accent-text: #0a6552;    /* the accent itself only reaches 4.1:1 on the panel, this is 5.4:1 */
    --accent-screen: #2fd4a3;  /* the display stays dark in light mode, so the mint reads there: 9.0:1 */
    --on-bg: var(--accent); --on-ink: #ffffff; --on-line: var(--accent); --on-glow: none;
    --screen-bg: #1c1c1a;
    --screen-ink: #e9e9e2;
    --screen-dim: #9a9a92;
    --warn: #7a5c05;
    --err: #b6301c;
    --gold: #7a5c05;
    --i1: #3e5c51; --i1-ink: #eaf2ee;
    --i2: #2f6e63; --i2-ink: #eaf6f2;
    --i3: #7a8c2e; --i3-ink: #0e1206;
    --i4: #c08a12; --i4-ink: #1a1200;
    --i5: #c23e24; --i5-ink: #fff1ed;
  }
}

:root[data-theme="light"] {
  --bg: #cfcfc9; --panel: #e3e3de; --panel-2: #d8d8d3;
  --line: #b7b7b1; --line-soft: #c6c6c0;
  --ink: #16191a; --ink-2: #4a514d; --dim: #5c635e;
  --accent: #0b7a63; --accent-ink: #ffffff; --accent-soft: rgba(11, 122, 99, .12);
  --accent-text: #0a6552; --accent-screen: #2fd4a3;
  --on-bg: var(--accent); --on-ink: #ffffff; --on-line: var(--accent); --on-glow: none;
  --screen-bg: #1c1c1a; --screen-ink: #e9e9e2; --screen-dim: #9a9a92;
  --warn: #7a5c05; --err: #b6301c; --gold: #7a5c05;
  --i1: #3e5c51; --i1-ink: #eaf2ee;
  --i2: #2f6e63; --i2-ink: #eaf6f2;
  --i3: #7a8c2e; --i3-ink: #0e1206;
  --i4: #c08a12; --i4-ink: #1a1200;
  --i5: #c23e24; --i5-ink: #fff1ed;
}

/* Contrast, measured, not guessed. Light: ink 13.7:1, dim 4.7:1,
   white on the accent button 5.3:1. Dark: ink 18.6:1, dim 6.4:1,
   dark ink on the accent button 10.1:1.

   Three accent tokens, because the same green cannot do all three jobs:
   --accent        a filled surface (button, chosen state), with --accent-ink on it
   --accent-text   the accent as small text on a panel (links, titles)
   --accent-screen the accent as text on the display surface, which is dark in both modes
   In dark mode all three are the same colour; in light mode they are not, and
   using --accent for text there drops links to 4.1:1 and the active nav item in
   the top bar to 3.2:1. */