/* Shared by the landing pages and the blog (Hugo + PaperMod), so there are no rules for bare
   elements here: theme tokens, fonts, the blinking cursor and the analytics consent banner only.
   Values come from the approved boards in docs/design/2026-09-18-landing/. */

/* ---- Theme tokens ------------------------------------------------------------------------- */

/* Light is the default: it is what a visitor gets when the system reports no preference. */
:root {
  color-scheme: light;
  --bg: #f6f4ee;
  --bg2: #efece4;
  --panel: #ffffff;
  --card: #ffffff;
  --line: #e4e0d5;
  --line2: #dedad0;
  --line3: #cfcabd;
  --fg: #17160f;
  --muted: #5f5c52;
  --dim: #6b685e;
  --dot: #e2ded2;
  --code: #ebe7dc;
  --input: #ffffff;
  --tborder: #0f100e;
  --fill: #ffb02e;
  --on-fill: #15130d;
  /* Not amber: amber text on a light background fails contrast. */
  --ink: #9a5700;
  --ok: #1f7a3a;
  --bad: #c0392b;
  --shadow: rgba(40, 30, 10, 0.14);
}

/* An explicit choice, stored by the toggle (landing) or by PaperMod (blog) under "pref-theme".
   The dark block below repeats on purpose: a media query cannot be merged with a selector. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f100e;
  --bg2: #0b0c0a;
  --panel: #151613;
  --card: #1b1c18;
  --line: #22231f;
  --line2: #2a2b27;
  --line3: #3a3b36;
  --fg: #ece9e1;
  --muted: #a29f95;
  --dim: #8a877e;
  --dot: #1d1e1b;
  --code: #22231f;
  --input: #0b0c0a;
  --tborder: #2a2b27;
  --fill: #ffb02e;
  --on-fill: #15130d;
  --ink: #ffb02e;
  --ok: #7ddc8f;
  --bad: #ff6b5b;
  --shadow: rgba(0, 0, 0, 0.5);
}

/* No stored choice: follow the system. Works without JavaScript. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f100e;
    --bg2: #0b0c0a;
    --panel: #151613;
    --card: #1b1c18;
    --line: #22231f;
    --line2: #2a2b27;
    --line3: #3a3b36;
    --fg: #ece9e1;
    --muted: #a29f95;
    --dim: #8a877e;
    --dot: #1d1e1b;
    --code: #22231f;
    --input: #0b0c0a;
    --tborder: #2a2b27;
    --fill: #ffb02e;
    --on-fill: #15130d;
    --ink: #ffb02e;
    --ok: #7ddc8f;
    --bad: #ff6b5b;
    --shadow: rgba(0, 0, 0, 0.5);
  }
}

/* ---- Fonts: OFL, latin subset, served by us. Absolute paths so /blog/ finds them too. ------ */

@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/martian-mono-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/martian-mono-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
}

/* ---- Blinking block cursor (after the logo, at the terminal prompt) ----------------------- */

@keyframes fmp-blink {
  50% {
    opacity: 0;
  }
}

.fmp-cursor {
  animation: fmp-blink 1.1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fmp-cursor {
    animation: none;
  }
}

/* ---- Analytics consent banner (markup built by /assets/consent.js) ------------------------
   Every property the blog theme might also set is spelled out: the banner must look the same
   on top of PaperMod as on the landing. Not a modal: nothing behind it is blocked. */

.fmp-consent {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1000;
  box-sizing: border-box;
  width: 400px;
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line3);
  border-radius: 12px;
  box-shadow: 0 20px 60px var(--shadow);
  color: var(--fg);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}

.fmp-consent *,
.fmp-consent *::before,
.fmp-consent *::after {
  box-sizing: border-box;
}

.fmp-consent-title {
  margin: 0;
  color: var(--fg);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}

.fmp-consent-text {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.fmp-consent-text a {
  color: var(--fg);
  text-decoration: underline;
}

.fmp-consent-text a:hover {
  color: var(--ink);
}

.fmp-consent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Decline and Accept look exactly alike: refusing is never harder than agreeing. */
.fmp-consent-button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line3);
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font: 500 15px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.fmp-consent-button:hover {
  color: var(--ink);
}

.fmp-consent-text a:focus-visible,
.fmp-consent-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Narrow screens: a bottom sheet across the full width. */
@media (max-width: 640px) {
  .fmp-consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    padding: 20px 16px 24px;
    gap: 12px;
    border: 0;
    border-top: 1px solid var(--line3);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -16px 40px var(--shadow);
  }

  .fmp-consent-button {
    height: 48px;
  }
}