/* Five light aesthetics. Components only ever read these tokens. */

:root,
[data-theme='frontier'] {
  --bg: #f5f3ee;
  --bg-pattern:
    linear-gradient(to right, rgb(14 14 14 / 0.045) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(to bottom, rgb(14 14 14 / 0.045) 1px, transparent 1px) 0 0 / 72px 72px;
  --surface: #ffffff;
  --surface-2: #efece4;
  --ink: #0e0e0e;
  --ink-2: #66625a;
  --line: #dcd7cb;
  --line-strong: #0e0e0e;
  --accent: #ff5b14;
  --accent-ink: #0e0e0e;
  --px-1: #ff5b14;
  --px-2: #e4290f;
  --px-3: #ffaf1a;
  --px-4: #b81d12;
  --display: 'Inter Tight', system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.045em;
  --display-transform: none;
  --body: 'Inter Tight', system-ui, sans-serif;
  --label: 'Geist Mono', ui-monospace, monospace;
  --label-size: 12px;
  --label-tracking: 0.04em;
  --radius: 0px;
  --border: 1px;
  --shadow: none;
  --shadow-hover: none;
  --btn-bg: #0e0e0e;
  --btn-ink: #ffffff;
  --btn-bg-hover: #ff5b14;
  --btn-ink-hover: #0e0e0e;
  --corners: block;
  --hero-highlight: transparent;
}

[data-theme='bauhaus'] {
  --bg: #ffffff;
  --bg-pattern: none;
  --surface: #ffffff;
  --surface-2: #f1f1f1;
  --ink: #000000;
  --ink-2: #4a4a4a;
  --line: #000000;
  --line-strong: #000000;
  --accent: #e63322;
  --accent-ink: #ffffff;
  --px-1: #e63322;
  --px-2: #1f4fd8;
  --px-3: #ffc800;
  --px-4: #000000;
  --display: 'Archivo', system-ui, sans-serif;
  --display-weight: 900;
  --display-tracking: -0.035em;
  --display-transform: uppercase;
  --body: 'Archivo', system-ui, sans-serif;
  --label: 'Space Mono', ui-monospace, monospace;
  --label-size: 12px;
  --label-tracking: 0.02em;
  --radius: 0px;
  --border: 2px;
  --shadow: none;
  --shadow-hover: none;
  --btn-bg: #000000;
  --btn-ink: #ffffff;
  --btn-bg-hover: #1f4fd8;
  --btn-ink-hover: #ffffff;
  --corners: none;
  --hero-highlight: #ffc800;
}

[data-theme='cardboard'] {
  --bg: #e9dbc0;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --surface: #faf3e5;
  --surface-2: #f0e3c9;
  --ink: #2a1b10;
  --ink-2: #775d45;
  --line: #cfb893;
  --line-strong: #2a1b10;
  --accent: #e2522b;
  --accent-ink: #ffffff;
  --px-1: #e2522b;
  --px-2: #1e7f74;
  --px-3: #e7a928;
  --px-4: #c98f4f;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.035em;
  --display-transform: none;
  --body: 'Bricolage Grotesque', system-ui, sans-serif;
  --label: 'Silkscreen', ui-monospace, monospace;
  --label-size: 11px;
  --label-tracking: 0.02em;
  --radius: 10px;
  --border: 2px;
  --shadow: 4px 4px 0 #2a1b10;
  --shadow-hover: 6px 6px 0 #2a1b10;
  --btn-bg: #e2522b;
  --btn-ink: #ffffff;
  --btn-bg-hover: #2a1b10;
  --btn-ink-hover: #ffffff;
  --corners: none;
  --hero-highlight: transparent;
}

[data-theme='arcade'] {
  --bg: #f2efff;
  --bg-pattern: radial-gradient(circle, #d6cdf6 1.3px, transparent 1.6px) 0 0 / 16px 16px;
  --surface: #ffffff;
  --surface-2: #ece6ff;
  --ink: #1b1340;
  --ink-2: #665e8e;
  --line: #d4ccf3;
  --line-strong: #1b1340;
  --accent: #ff3d8b;
  --accent-ink: #ffffff;
  --px-1: #ff3d8b;
  --px-2: #00b3d6;
  --px-3: #8fd92b;
  --px-4: #6c4cff;
  --display: 'Pixelify Sans', system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --display-transform: none;
  --body: 'DM Sans', system-ui, sans-serif;
  --label: 'Silkscreen', ui-monospace, monospace;
  --label-size: 11px;
  --label-tracking: 0.03em;
  --radius: 0px;
  --border: 3px;
  --shadow: 5px 5px 0 #1b1340;
  --shadow-hover: 7px 7px 0 #1b1340;
  --btn-bg: #ff3d8b;
  --btn-ink: #ffffff;
  --btn-bg-hover: #6c4cff;
  --btn-ink-hover: #ffffff;
  --corners: none;
  --hero-highlight: transparent;
}

[data-theme='lab'] {
  --bg: #f3f6fa;
  --bg-pattern:
    linear-gradient(to right, rgb(24 70 245 / 0.11) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, rgb(24 70 245 / 0.11) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to right, rgb(24 70 245 / 0.045) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(to bottom, rgb(24 70 245 / 0.045) 1px, transparent 1px) 0 0 / 8px 8px;
  --surface: #ffffff;
  --surface-2: #eaf0f8;
  --ink: #0a1a33;
  --ink-2: #53637c;
  --line: #c5d2e3;
  --line-strong: #0a1a33;
  --accent: #1846f5;
  --accent-ink: #ffffff;
  --px-1: #1846f5;
  --px-2: #ffb000;
  --px-3: #f0443a;
  --px-4: #0a1a33;
  --display: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.025em;
  --display-transform: none;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --label: 'IBM Plex Mono', ui-monospace, monospace;
  --label-size: 11.5px;
  --label-tracking: 0.06em;
  --radius: 2px;
  --border: 1px;
  --shadow: none;
  --shadow-hover: none;
  --btn-bg: #1846f5;
  --btn-ink: #ffffff;
  --btn-bg-hover: #0a1a33;
  --btn-ink-hover: #ffffff;
  --corners: block;
  --hero-highlight: transparent;
}

/* Semantic colours shared by every theme (crowd bar, verdicts). */
:root {
  --ok: #1a9e55;
  --meh: #f2c511;
  --bad-1: #f28a1a;
  --bad: #e2362a;
}