/* Design tokens. Components use these and never raw colours, so a theme is
   one block below. Theme is set on <html data-theme="light|dark|win98">. */

/* ---------- fonts (self-hosted from the repo root) ---------- */
@font-face { font-family: 'Lexend'; src: url('/Fonts/Lexend%20Family/webfonts/Lexend-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/Fonts/Lexend%20Family/webfonts/Lexend-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/Fonts/Lexend%20Family/webfonts/Lexend-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/Fonts/Jetbrains/woff2/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/Fonts/Jetbrains/woff2/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* MS W98 UI: conversion of Microsoft Sans Serif by Lev Leontev, released by
   martyr (martyr.shop/fonts/ms-w98-ui/). Already used by the site's win95 theme. */
@font-face { font-family: 'MS W98 UI'; src: url('/Web-TT/MSW98UI-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'MS W98 UI'; src: url('/Web-TT/MSW98UI-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ---------- light (default) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --font-ui: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--font-ui);
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  --desk: #f3f1ec;
  --desk-dot: #dcd8cf;
  --surface: #ffffff;
  --surface-2: #f8f7f4;
  --surface-sunk: #eeece6;
  --surface-hover: #f2f0eb;
  --border: #e5e2db;
  --border-strong: #d0ccc2;
  --text: #1c1c21;
  --text-2: #5c5c66;
  --text-3: #8c8c95;
  --text-on-accent: #ffffff;

  --accent: #2f5fe6;
  --accent-hover: #244fcc;
  --accent-soft: #e9eefd;
  --accent-ring: rgba(47, 95, 230, 0.35);
  --good: #18874a;
  --good-soft: #e3f4ea;
  --warn: #b26a00;
  --warn-soft: #fbf0dc;
  --bad: #cc3b2c;
  --bad-soft: #fbe8e5;

  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(28, 28, 33, 0.06), 0 1px 1px rgba(28, 28, 33, 0.03);
  --shadow-2: 0 4px 14px rgba(28, 28, 33, 0.08), 0 1px 3px rgba(28, 28, 33, 0.05);
  --shadow-pop: 0 18px 48px rgba(28, 28, 33, 0.16), 0 3px 10px rgba(28, 28, 33, 0.08);
  --backdrop: rgba(28, 28, 33, 0.32);

  --header-h: 56px;
  --speed: 140ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* breadboard art, the same in every theme */
  --bb-plastic: #f7f5f0;
  --bb-hole: #3b3a37;
  --bb-red: #d9483b;
  --bb-blue: #2f6bd8;
  --pcb: #1f6b4a;
}

/* ---------- dark ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --desk: #131417;
  --desk-dot: #26282e;
  --surface: #1c1d22;
  --surface-2: #212228;
  --surface-sunk: #17181c;
  --surface-hover: #26272e;
  --border: #2d2f36;
  --border-strong: #3d4049;
  --text: #ececf0;
  --text-2: #a6a7b1;
  --text-3: #767884;
  --text-on-accent: #ffffff;

  --accent: #6b8cff;
  --accent-hover: #86a1ff;
  --accent-soft: rgba(107, 140, 255, 0.14);
  --accent-ring: rgba(107, 140, 255, 0.45);
  --good: #4cc07e;
  --good-soft: rgba(76, 192, 126, 0.14);
  --warn: #e0a43a;
  --warn-soft: rgba(224, 164, 58, 0.14);
  --bad: #f06b5b;
  --bad-soft: rgba(240, 107, 91, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.6), 0 3px 10px rgba(0, 0, 0, 0.4);
  --backdrop: rgba(0, 0, 0, 0.55);
}

/* ---------- Windows 98 ---------- */
:root[data-theme="win98"] {
  color-scheme: light;

  --font-ui: 'MS W98 UI', 'Tahoma', sans-serif;
  --font-display: 'MS W98 UI', 'Tahoma', sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --weight-medium: 400;
  --weight-strong: 700;

  --desk: #008080;
  --desk-dot: #007070;
  --surface: #c0c0c0;
  --surface-2: #c0c0c0;
  --surface-sunk: #ffffff;
  --surface-hover: #c0c0c0;
  --border: #808080;
  --border-strong: #000000;
  --text: #000000;
  --text-2: #222222;
  --text-3: #555555;
  --text-on-accent: #ffffff;

  --accent: #000080;
  --accent-hover: #000080;
  --accent-soft: #000080;
  --accent-ring: transparent;
  --good: #008000;
  --good-soft: #c0c0c0;
  --warn: #806000;
  --warn-soft: #ffffe1;
  --bad: #a00000;
  --bad-soft: #c0c0c0;

  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-pill: 0;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-pop: none;
  --backdrop: transparent;
  --speed: 0ms;

  /* bevel colours */
  --w98-light: #ffffff;
  --w98-face: #c0c0c0;
  --w98-shadow: #808080;
  --w98-dark: #000000;
  --w98-face-light: #dfdfdf;
  --w98-title: linear-gradient(90deg, #000080, #1084d0);
  --w98-title-inactive: linear-gradient(90deg, #808080, #b5b5b5);
}

/* ---------- code editor colours ---------- */
:root, :root[data-theme="light"] {
  --code-size: 13px;
  --code-bg: #fffefb;
  --code-gutter: #f7f5f0;
  --code-active: rgba(47, 95, 230, 0.06);
  --code-selection: rgba(47, 95, 230, 0.18);
  --code-match: rgba(47, 95, 230, 0.12);
  --code-pin-block: #f2f5fd;
  --code-keyword: #8d3fbf;
  --code-string: #1e7a3c;
  --code-comment: #8c8c95;
  --code-number: #b4561a;
  --code-function: #2f5fe6;
  --code-def: #1c1c21;
  --code-class: #b8336a;
  --code-property: #2a6a8f;
  --code-operator: #5c5c66;
}
:root[data-theme="dark"] {
  --code-bg: #18191d;
  --code-gutter: #1c1d22;
  --code-active: rgba(107, 140, 255, 0.07);
  --code-selection: rgba(107, 140, 255, 0.28);
  --code-match: rgba(107, 140, 255, 0.18);
  --code-pin-block: #1e2230;
  --code-keyword: #c792ea;
  --code-string: #a5d6a7;
  --code-comment: #7c7f8b;
  --code-number: #f2a56b;
  --code-function: #82aaff;
  --code-def: #ececf0;
  --code-class: #f48fb1;
  --code-property: #89ddff;
  --code-operator: #a6a7b1;
}
:root[data-theme="win98"] {
  --code-size: 13px;
  --code-bg: #ffffff;
  --code-gutter: #c0c0c0;
  --code-active: #ffffe1;
  --code-selection: #000080;
  --code-match: #c0c0c0;
  --code-pin-block: #e8e8e8;
  --code-keyword: #00007f;
  --code-string: #7f0000;
  --code-comment: #007f00;
  --code-number: #7f007f;
  --code-function: #000000;
  --code-def: #000000;
  --code-class: #00007f;
  --code-property: #000000;
  --code-operator: #000000;
}