/* Type: Clash Display is the one characterful voice on the page - used
   only for the wordmark, the hero statement, and section titles, never
   for body text. General Sans (from the same foundry, drawn to pair with
   Clash Display) carries everything you actually read. JetBrains Mono is
   kept for exactly one job - code samples - because that's the one place
   a monospace grid is actually correct, not a personality choice.
   All self-hosted (see /static/fonts) - no font CDN. */
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Medium.bd4fc3d5ccaf.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Semibold.7a0dc3a5ab12.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Bold.d0de554307b4.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Regular.a5eb56832538.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Italic.d4d489b0d370.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Medium.44306bd3e670.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Semibold.a41291516086.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.2c73f943e70d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Medium.63282f58f349.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-SemiBold.523baf59e648.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.c3ccd2e626d7.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Clash Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale - step-5 exists for exactly one thing, the hero
     statement, so it's allowed to be genuinely oversized. */
  --step--1: clamp(0.83rem, 0.8rem + 0.16vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.86rem, 1.6rem + 1.3vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem);
  --step-5: clamp(3rem, 2.2rem + 4.5vw, 6rem);

  --leading-tight: 1.05;
  --leading-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  /* Layout */
  --content-width: 38rem;
  --content-width-wide: 56rem;
  --wide-width: 76rem;
  --spine-width: 16rem;
  --border-width: 1px;
  --radius: 0;

  /* Color - "studio index" palette: a cool paper ground and a warm
     near-black ink (the colour of carbon fibre, not of a dark-mode IDE),
     with a single deliberate accent - a deep cobalt, the one saturated
     colour on an otherwise monochrome page. */
  --color-paper: #eef0ec;
  --color-ink: #17160f;
  --color-graphite: #131210;

  --color-bg: var(--color-paper);
  --color-bg-elevated: #f7f8f5;
  --color-text: var(--color-ink);
  --color-text-muted: #6b6a5f;
  --color-line: #d5d4c8;
  --color-accent: #2c3fcf;
  --color-accent-contrast: #f3f3ee;
  --color-focus: #2c3fcf;
  --color-danger: #a3312a;
  --color-danger-bg: #f3e2df;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-graphite);
    --color-bg-elevated: #1a1916;
    --color-text: #ece9e0;
    --color-text-muted: #9c9a8d;
    --color-line: #33322b;
    --color-accent: #8fa0ff;
    --color-accent-contrast: #131210;
    --color-danger: #e28f88;
    --color-danger-bg: #33201d;
  }
}

/* The viewer's explicit theme toggle (data-theme) wins over the OS
   preference in both directions. */
:root[data-theme="dark"] {
  --color-bg: var(--color-graphite);
  --color-bg-elevated: #1a1916;
  --color-text: #ece9e0;
  --color-text-muted: #9c9a8d;
  --color-line: #33322b;
  --color-accent: #8fa0ff;
  --color-accent-contrast: #131210;
  --color-danger: #e28f88;
  --color-danger-bg: #33201d;
}

:root[data-theme="light"] {
  --color-bg: var(--color-paper);
  --color-bg-elevated: #f7f8f5;
  --color-text: var(--color-ink);
  --color-text-muted: #6b6a5f;
  --color-line: #d5d4c8;
  --color-accent: #2c3fcf;
  --color-accent-contrast: #f3f3ee;
  --color-danger: #a3312a;
  --color-danger-bg: #f3e2df;
}