/* ==================================================================
   Mathew — the wiki's skin for lean4web.

   Lean4web paints its whole interface — the top bar, menus, modals and
   the Monaco editor itself — with the CSS custom properties its VS Code
   theme defines (`--vscode-*`), and its app root carries the
   `monaco-editor` class so those variables reach every corner of the
   page. This layer therefore does not fight the editor's styling: it
   redefines that same vocabulary with the wiki's tokens — Computer
   Modern for the chrome, the wiki's paper-and-slate surfaces, its
   violet for focus, selection and links.

   The wiki opens the frame as ?theme=light|dark and the companion
   theme-init.js records that on <html data-mathew-theme> before the
   first paint; with no parameter (a direct visit) the browser's
   preference decides, exactly as lean4web's own default does. The
   editor thus opens matching the page around it; the wiki's own theme
   switch takes effect on the frame's next mount, not mid-edit — a live
   swap would tear down a running Lean session.

   The rules that target elements directly (rather than through the
   --vscode variables) carry an `html[data-mathew-theme]` prefix: the
   client bundles its own stylesheets through JavaScript, which can land
   after this link, so specificity, not source order, is what holds.
   ================================================================== */

/* ---------- the wiki's typeface ---------- */
/* Computer Modern, the wiki's reading face. CMU ships only two weights,
   so intermediate weights map onto real faces the way the wiki's own
   stylesheet does. */
@font-face {
  font-family: 'Computer Modern';
  src: url('/fonts/cmunrm.ttf') format('truetype');
  font-weight: 100 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Computer Modern';
  src: url('/fonts/cmunti.ttf') format('truetype');
  font-weight: 100 550;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Computer Modern';
  src: url('/fonts/cmunbx.ttf') format('truetype');
  font-weight: 551 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Computer Modern';
  src: url('/fonts/cmunbi.ttf') format('truetype');
  font-weight: 551 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- the wiki's palette, as the editor knows it ---------- */
html[data-mathew-theme='light'], html:not([data-mathew-theme]) {
  color-scheme: light;
  --mw-bg: #f7f8fb;
  --mw-bg-elev: #ffffff;
  --mw-surface: #ffffff;
  --mw-surface-2: #eef1f7;
  --mw-input-bg: #ffffff;
  --mw-border: #e2e6ef;
  --mw-text: #1b2130;
  --mw-muted: #5b6478;
  --mw-accent: #4f5fe8;
  --mw-accent-strong: #3d4dd6;
  --mw-on-accent: #ffffff;
  --mw-danger: #d1344b;
  --mw-warning: #d97706;
  --mw-shadow: 0 4px 12px rgb(16 24 40 / 8%), 0 16px 40px -12px rgb(16 24 40 / 18%);
}

html[data-mathew-theme='dark'] {
  color-scheme: dark;
  --mw-bg: #0a0c12;
  --mw-bg-elev: #10131c;
  --mw-surface: #141826;
  --mw-surface-2: #1a2030;
  --mw-input-bg: #0c0f16;
  --mw-border: #232a3c;
  --mw-text: #e7eaf3;
  --mw-muted: #99a1b5;
  --mw-accent: #7c8cff;
  --mw-accent-strong: #99a5ff;
  --mw-on-accent: #0a0c12;
  --mw-danger: #f47085;
  --mw-warning: #f5a83c;
  --mw-shadow: 0 4px 16px rgb(0 0 0 / 40%), 0 24px 48px -16px rgb(0 0 0 / 55%);
}

/* ---------- the same vocabulary, in Mathew's colours ----------
   The app root (`.app.monaco-editor`) is where the editor's theme
   service publishes --vscode-*; redefining the same names on it, with
   an attribute selector for company, outranks the generated rules and
   the whole interface — editor included — follows the wiki instead. */
html[data-mathew-theme] body,
html[data-mathew-theme] .monaco-editor {
  /* the editor paper */
  --vscode-editor-background: var(--mw-surface);
  --vscode-editor-foreground: var(--mw-text);
  --vscode-editor-selectionBackground: color-mix(in srgb, var(--mw-accent) 26%, transparent);
  --vscode-editorCursor-foreground: var(--mw-accent);
  --vscode-editorLineNumber-activeForeground: var(--mw-accent);
  --vscode-editorGutter-background: var(--mw-surface);

  /* chrome: the top bar, menus, popups, hover */
  --vscode-menu-background: var(--mw-bg-elev);
  --vscode-menu-foreground: var(--mw-text);
  --vscode-menu-separatorBackground: var(--mw-border);
  --vscode-menu-selectionBackground: var(--mw-surface-2);
  --vscode-menu-selectionForeground: var(--mw-text);
  --vscode-panel-border: var(--mw-border);
  --vscode-widget-shadow: var(--mw-shadow);

  /* hovers and suggestions the editor paints */
  --vscode-editorWidget-border: var(--mw-border);
  --vscode-editorHoverWidget-background: var(--mw-bg-elev);
  --vscode-editorHoverWidget-foreground: var(--mw-text);
  --vscode-editorHoverWidget-border: var(--mw-border);

  /* form controls, buttons, links */
  --vscode-input-background: var(--mw-input-bg);
  --vscode-input-foreground: var(--mw-text);
  --vscode-inputOption-activeForeground: var(--mw-accent);
  --vscode-button-background: var(--mw-accent);
  --vscode-button-hoverBackground: var(--mw-accent-strong);
  --vscode-button-foreground: var(--mw-on-accent);
  --vscode-button-border: transparent;
  --vscode-textLink-foreground: var(--mw-accent-strong);
  --vscode-focusBorder: var(--mw-accent);

  /* lists (the file and project pickers) */
  --vscode-list-hoverBackground: var(--mw-surface-2);
  --vscode-list-dropBackground: color-mix(in srgb, var(--mw-accent) 12%, transparent);

  /* the editor draws its own scrollbars — same subtle wash as the wiki's */
  --vscode-scrollbarSlider-background: color-mix(in srgb, var(--mw-text) 18%, transparent);
  --vscode-scrollbarSlider-hoverBackground: color-mix(in srgb, var(--mw-text) 30%, transparent);
  --vscode-scrollbarSlider-activeBackground: color-mix(in srgb, var(--mw-text) 40%, transparent);

  /* messages and marks, in the wiki's reds and ambers */
  --vscode-notifications-background: var(--mw-bg-elev);
  --vscode-notificationsErrorIcon-foreground: var(--mw-danger);
  --vscode-editorError-foreground: var(--mw-danger);
  --vscode-editorWarning-foreground: var(--mw-warning);
  --vscode-editorWarning-background: color-mix(in srgb, var(--mw-warning) 14%, transparent);
  --vscode-editorOverviewRuler-warningForeground: var(--mw-warning);

  /* inline code, as the wiki sets it */
  --vscode-textPreformat-background: var(--mw-surface-2);
  --vscode-textPreformat-foreground: var(--mw-text);
}

/* ---------- the chrome, wearing the wiki ---------- */
/* The body: index.css paints it #2b2b2b / white by media query; the
   wiki's own ground wins that tie by specificity. */
html[data-mathew-theme] body {
  margin: 0;
  font-family: 'Computer Modern', 'CMU Serif', Georgia, 'Times New Roman', serif;
  background: var(--mw-bg);
  color: var(--mw-text);
}

/* Form controls answer to the system font unless told; the editor keeps
   its monospace (the wiki sets its own code the same way). */
html[data-mathew-theme] button,
html[data-mathew-theme] input,
html[data-mathew-theme] select,
html[data-mathew-theme] textarea {
  font-family: inherit;
}

/* The top bar: the wiki's hairline, and its menu row rounded to a chip */
html[data-mathew-theme] nav {
  border-bottom: 1px solid var(--mw-border);
}
html[data-mathew-theme] nav .nav-link,
html[data-mathew-theme] nav select {
  border-radius: 8px;
}

/* Syntax errors and warnings read in the wiki's danger red / amber */
html[data-mathew-theme] .loading-ring:after {
  border-color: var(--mw-accent) transparent var(--mw-accent) transparent;
}

/* Selection, like the wiki's — accent wash, not system blue */
html[data-mathew-theme] ::selection {
  background: color-mix(in srgb, var(--mw-accent) 30%, transparent);
}

/* Scrollbars, the wiki's subtle shape (mirrors its _base.scss) */
html[data-mathew-theme] ::-webkit-scrollbar {
  width: 11px;
  height: 10px;
}
html[data-mathew-theme] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--mw-text) 18%, transparent);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
html[data-mathew-theme] ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--mw-text) 30%, transparent);
  background-clip: content-box;
}
html[data-mathew-theme] ::-webkit-scrollbar-track {
  background: transparent;
}