/* Predditors brand tokens (login and start page). Colours and @font-face live only here. */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/chakra-petch-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/chakra-petch-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/chakra-petch-latin-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-500.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --void: #04090f;
  --hull: #0a1520;
  --line: #18324a;
  --strategy: #3cc8ff;
  --ops: #ffb02e;
  --admin: #9fb1c1;
  --hostile: #ff4d57;
  --text: #e8f1f8;
  --text-muted: #8fa4b6;
  /* Supporting shades from the final mockups */
  --header-bg: #050c14;
  --header-line: #142a3e;
  --text-soft: #a9bccb;
  --text-dim: #6f8699;
  --strategy-hover: #8fe0ff;
  --strategy-fill: #0d8fd0;
  --strategy-fill-hover: #13a9e8;
  --strategy-edge: #1d3a54;
  --strategy-cell: #071420;
  --strategy-grid: #16304a;
  --strategy-chip-hover: #4b6a86;
  --lock-edge: #23405a;
  --lock-edge-strong: #2a4a66;
  --lock-icon: #3e5a74;
  --lock-bar: #1a2c3d;
  --lock-cell: #060e16;
  --ops-text: #c7b99e;
  --ops-text-dim: #b0a184;
  --ops-value: #f4ead6;
  --ops-fill: #e89a12;
  --ops-ink: #140d02;
  --ops-edge: #4a3a1c;
  --ops-grid: #3a2e16;
  --ops-cell: #120e06;
  --ops-chip-hover: #7a6230;
  --ops-lock-icon: #6a5530;
  --ops-lock-glyph: #9a8a68;
  --ops-lock-title: #8a7a5c;
  --ops-lock-bar: #2a2416;
  --ops-lock-cell: #0c0a06;
  --warn-edge: #5a4318;
  --warn-bg: #140f06;
  --warn-text: #ffcf7a;
  --cmd-edge: #2b3946;
  --cmd-divider: #1d2731;
  --cmd-text: #c3ced8;
  --cmd-sub: #8a9aa8;
  --cmd-title: #dfe7ee;
  --cmd-open-edge: #5d6f80;
  --font-display: "Chakra Petch", Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font-body: Inter, system-ui, "Segoe UI", sans-serif;
}

.scanlines { background: repeating-linear-gradient(0deg, rgba(60, 200, 255, .05) 0 1px, transparent 1px 4px); }
.cut-22 { clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.cut-14 { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.cut-12 { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; }
.wordmark span { color: var(--strategy); }
.mono { font-family: var(--font-mono); }