/*
 * Foundation — design tokens, fonts, and base element defaults.
 *
 * Tokens are copied verbatim from the explain-html style guide
 * (tortoise-skills/skills/explain-html/style-guide.html) so the app matches
 * agent-rendered explanation pages. Do not invent new colors, fonts, or
 * spacing — use the variables.
 */

@font-face {
  font-family: "iA Writer Quattro S";
  src: url("/assets/iAWriterQuattro-V-d6a0fc89.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "iA Writer Quattro S";
  src: url("/assets/iAWriterQuattro-V-Italic-9fb582f6.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("/assets/IBMPlexSerif-Regular-6d43cc95.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lilex";
  src: url("/assets/Lilex-Variable-e8108b06.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lilex";
  src: url("/assets/Lilex-Variable-Italic-6b34ee83.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root,
[data-theme="light"] {
  --bg: #f7f6f2;
  --fg: #4b5362;
  --full-contrast: #191d26;
  --title-color: #094eCE;
  --accent: #094eCE;
  --green: #188554;
  --amber: #994000;
  --red: #c22a1e;
  --purple: #7c3aed;
  --muted: #6e7686;
  --border: hsl(220, 13%, 80%);
  --border-light: hsl(220, 13%, 90%);
  --border-subtle: rgba(25, 29, 38, 0.14);
  --surface-hover: rgba(25, 29, 38, 0.045);
  --surface-subtle: rgba(25, 29, 38, 0.02);
  --backdrop-bg: rgba(25, 29, 38, 0.5);
  --sidebar-backdrop: rgba(25, 29, 38, 0.25);
  --tooltip-bg: #191d26;
  --tooltip-fg: #ffffff;
  --link: hsl(220, 92%, 42%);
  --link-underline: rgba(9, 78, 206, 0.2);
  --inline-code-bg: rgba(9, 78, 206, 0.09);
  --inline-code-fg: #301900;
  --pre-bg: #ffffff;
  --pre-border: rgba(9, 78, 206, 0.3);
  --pre-shadow: rgba(9, 78, 206, 0.07);
  --note-bg: #f1f6f9;
  --note-border: #c7dde5;
  --warn-bg: rgba(255, 196, 0, 0.08);
  --warn-border: #ffd2b2;
  --ok-bg: #eef7f0;
  --ok-border: #bfdec9;
  --table-border: rgba(9, 78, 206, 0.15);
  --table-header-bg: #d9e1f2;
  --table-alternate-bg: rgba(9, 78, 206, 0.035);
  --highlight-bg: #5fd47e;
  --highlight-border: #2e8b4a;
  --highlight-hover: #4dbb6a;
  --highlight-fg: #191d26;
  --selection-bg: rgba(9, 78, 206, 0.14);
  --font: "iA Writer Quattro S", -apple-system, "Segoe UI", Roboto, sans-serif;
  --title-font: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --mono-font: "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #13161c;
  --fg: #b8c1cf;
  --full-contrast: #eef2f7;
  --title-color: #60a5fa;
  --accent: #5b95ff;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --purple: #c084fc;
  --muted: #7c889b;
  --border: hsl(220, 14%, 28%);
  --border-light: hsl(220, 14%, 20%);
  --border-subtle: rgba(255, 255, 255, 0.14);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-subtle: rgba(255, 255, 255, 0.03);
  --backdrop-bg: rgba(0, 0, 0, 0.7);
  --sidebar-backdrop: rgba(0, 0, 0, 0.55);
  --tooltip-bg: #2d3340;
  --tooltip-fg: #f3f4f6;
  --link: #60a5fa;
  --link-underline: rgba(96, 165, 250, 0.3);
  --inline-code-bg: rgba(91, 149, 255, 0.15);
  --inline-code-fg: #f3f4f6;
  --pre-bg: #1c202a;
  --pre-border: rgba(91, 149, 255, 0.28);
  --pre-shadow: rgba(0, 0, 0, 0.45);
  --note-bg: #172232;
  --note-border: #243a59;
  --warn-bg: rgba(251, 191, 36, 0.1);
  --warn-border: rgba(251, 191, 36, 0.25);
  --ok-bg: rgba(52, 211, 153, 0.1);
  --ok-border: rgba(52, 211, 153, 0.25);
  --table-border: rgba(91, 149, 255, 0.2);
  --table-header-bg: #222936;
  --table-alternate-bg: rgba(255, 255, 255, 0.02);
  --highlight-bg: rgba(46, 139, 74, 0.45);
  --highlight-border: #34d399;
  --highlight-hover: rgba(46, 139, 74, 0.65);
  --highlight-fg: #eef2f7;
  --selection-bg: rgba(91, 149, 255, 0.25);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #13161c;
    --fg: #b8c1cf;
    --full-contrast: #eef2f7;
    --title-color: #60a5fa;
    --accent: #5b95ff;
    --green: #34d399;
    --amber: #fbbf24;
    --red: #f87171;
    --purple: #c084fc;
    --muted: #7c889b;
    --border: hsl(220, 14%, 28%);
    --border-light: hsl(220, 14%, 20%);
    --border-subtle: rgba(255, 255, 255, 0.14);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --surface-subtle: rgba(255, 255, 255, 0.03);
    --backdrop-bg: rgba(0, 0, 0, 0.7);
    --sidebar-backdrop: rgba(0, 0, 0, 0.55);
    --tooltip-bg: #2d3340;
    --tooltip-fg: #f3f4f6;
    --link: #60a5fa;
    --link-underline: rgba(96, 165, 250, 0.3);
    --inline-code-bg: rgba(91, 149, 255, 0.15);
    --inline-code-fg: #f3f4f6;
    --pre-bg: #1c202a;
    --pre-border: rgba(91, 149, 255, 0.28);
    --pre-shadow: rgba(0, 0, 0, 0.45);
    --note-bg: #172232;
    --note-border: #243a59;
    --warn-bg: rgba(251, 191, 36, 0.1);
    --warn-border: rgba(251, 191, 36, 0.25);
    --ok-bg: rgba(52, 211, 153, 0.1);
    --ok-border: rgba(52, 211, 153, 0.25);
    --table-border: rgba(91, 149, 255, 0.2);
    --table-header-bg: #222936;
    --table-alternate-bg: rgba(255, 255, 255, 0.02);
    --highlight-bg: rgba(46, 139, 74, 0.45);
    --highlight-border: #34d399;
    --highlight-hover: rgba(46, 139, 74, 0.65);
    --highlight-fg: #eef2f7;
    --selection-bg: rgba(91, 149, 255, 0.25);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle film-grain over the whole app, same as the style guide pages */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.024;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-color: rgba(9, 78, 206, 0.5);
}

strong {
  color: var(--full-contrast);
}

::selection {
  background: var(--selection-bg);
}