/* ciphertext.blog theme tokens
   - semantic colors (not named hues)
   - light + dark palettes
   - designed for long-form reading + math + code + interactive demos
*/

:root {
  --font-serif: "IBM Plex Serif", serif;
  --font-prose: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "Monaspace Neon", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-math: "STIX Two Math", "Cambria Math", "Latin Modern Math", serif;

  --text-size: 1rem;
  --line-height: 1.65;
  --measure: 72ch;

  --radius-sm: 8px;
  --radius-md: 12px;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Shadow (subtle, theme-adjusted) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);

  /* Semantic roles (assigned per theme below) */
  --bg: #fff;
  --bg-elev: #fff;
  --surface: #fff;
  --surface-2: #fff;
  --text: #111;
  --text-muted: #555;
  --text-faint: #777;
  --border: #ddd;
  --border-strong: #bbb;

  --accent: #6a5acd;
  /* primary (lavender) */
  --accent-2: #4aa381;
  /* positive (sage) */
  --accent-3: #d06a7a;
  /* negative (rose) */
  --accent-4: #b9852d;
  /* note (ochre) */

  --link: var(--accent);
  --link-visited: color-mix(in srgb, var(--accent) 70%, var(--text) 30%);

  --focus: color-mix(in srgb, var(--accent) 55%, white 45%);

  /* Code */
  --code-bg: #f6f5f9;
  --code-text: #17151f;
  --code-border: color-mix(in srgb, var(--accent) 18%, var(--border) 82%);

  /* Selection */
  --selection-bg: color-mix(in srgb, var(--accent) 25%, white 75%);

  color-scheme: light dark;
}

/* Light mode (paper notebook) */
:root[data-theme="light"] {
  --bg: #fbfaf7;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f4f0;

  --text: #151316;
  --text-muted: #4d4850;
  --text-faint: #6b6470;

  --border: #e7e1ea;
  --border-strong: #d5cdd9;

  --accent: #7a63d2;
  /* dusty lavender */
  --accent-2: #3f9b7a;
  /* sage */
  --accent-3: #c95f73;
  /* muted rose */
  --accent-4: #b37f2a;
  /* soft ochre */

  --code-bg: #f3f0f7;
  --code-text: #191622;
  --code-border: color-mix(in srgb, var(--accent) 18%, var(--border) 82%);

  --selection-bg: color-mix(in srgb, var(--accent) 22%, white 78%);
  --shadow-1: 0 1px 2px rgba(15, 10, 20, 0.06), 0 14px 40px rgba(15, 10, 20, 0.08);
}

/* Dark mode (ink, not neon) */
:root[data-theme="dark"] {
  --bg: #0f0e12;
  --bg-elev: #13121a;
  --surface: #151420;
  --surface-2: #1a1826;

  --text: #eeedf6;
  --text-muted: #bdb8cc;
  --text-faint: #9a93aa;

  --border: #2a2636;
  --border-strong: #3a334a;

  --accent: #b8a6ff;
  /* soft lilac */
  --accent-2: #7fd5b3;
  /* muted mint */
  --accent-3: #ff9fb0;
  /* dusty coral */
  --accent-4: #f0c074;
  /* warm sand */

  --code-bg: #141225;
  --code-text: #f2f1fb;
  --code-border: color-mix(in srgb, var(--accent) 22%, var(--border) 78%);

  --selection-bg: color-mix(in srgb, var(--accent) 22%, black 78%);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 18px 60px rgba(0, 0, 0, 0.35);
}

/* Prefer system theme unless user sets data-theme explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0f0e12;
    --bg-elev: #13121a;
    --surface: #151420;
    --surface-2: #1a1826;

    --text: #eeedf6;
    --text-muted: #bdb8cc;
    --text-faint: #9a93aa;

    --border: #2a2636;
    --border-strong: #3a334a;

    --accent: #b8a6ff;
    --accent-2: #7fd5b3;
    --accent-3: #ff9fb0;
    --accent-4: #f0c074;

    --code-bg: #141225;
    --code-text: #f2f1fb;
    --code-border: color-mix(in srgb, var(--accent) 22%, var(--border) 78%);

    --selection-bg: color-mix(in srgb, var(--accent) 22%, black 78%);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 18px 60px rgba(0, 0, 0, 0.35);
  }
}

/* Global base */
html,
body {
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--font-prose);
  font-size: var(--text-size);
  line-height: var(--line-height);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Constrain reading width */
main,
article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.08em;
}

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Selection */
::selection {
  background: var(--selection-bg);
}

/* Headings */
h1,
h2,
h3,
h4 {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.65rem;
}

h2 {
  font-size: var(--text-size);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--text-size);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

/* Inline code */
code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  /* 0.95em; */
}

:not(pre)>code {
  background: color-mix(in srgb, var(--code-bg) 85%, var(--surface) 15%);
  border: 1px solid var(--code-border);
  border-radius: 8px;
  padding: 0.12em 0.35em;
}

/* Code blocks */
pre {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow: auto;
  box-shadow: var(--shadow-1);
}

pre[data-language] {
  position: relative;
}

pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: color-mix(in srgb, var(--code-bg) 85%, var(--surface) 15%);
  border: 1px solid var(--code-border);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

/* Blockquotes */
blockquote {
  margin: 0;
  /* padding-top: 0.1mm; */
    /* padding: var(--space-2); */
  padding: var(--space-2) var(--space-4);
  border-left: 4px solid color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-2) 30%);
  border-radius: var(--radius-sm);
}

blockquote p {
  padding: 0;
  margin: 0;
}

/* Callouts (optional classes you can use in Markdown) */
.callout {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.callout.note {
  border-color: color-mix(in srgb, var(--accent-4) 35%, var(--border) 65%);
}

.callout.good {
  border-color: color-mix(in srgb, var(--accent-2) 35%, var(--border) 65%);
}

.callout.bad {
  border-color: color-mix(in srgb, var(--accent-3) 35%, var(--border) 65%);
}

/* Math (works for KaTeX/MathJax wrappers; adjust selectors as needed) */
.katex,
.math,
.math-inline,
.math-display {
  font-family: var(--font-math);
}

.math-display,
.katex-display {
  margin: var(--space-6) 0;
}

/* Subtle UI surfaces */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

img,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

/* IBM Plex Sans */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/IBMPlexSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/IBMPlexSans-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Serif */

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

@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex/IBMPlexSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex/IBMPlexSerif-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex/IBMPlexSerif-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex/IBMPlexSerif-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Monaspace Neon */

@font-face {
  font-family: "Monaspace Neon";
  src: url("/fonts/monaspace/MonaspaceNeon-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Monaspace Neon";
  src: url("/fonts/monaspace/MonaspaceNeon-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* STIX Two Math */

@font-face {
  font-family: "STIX Two Math";
  src: url("/fonts/stix-two/STIXTwoMath-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}