/* ============================================================
   base.css — one theme. One type scale.
   ============================================================ */

:root {
  /* Colour — base */
  --bg:             #fcfcfb;
  --fg:             #1a1a1a;
  --muted:          #6b6b6b;
  --subtle:         #a8a49e;
  --rule:           #ebe9e5;

  /* Colour — surfaces (hover tints, code, alerts) */
  --surface:        #f6f5f1;  /* soft hover / pre bg */
  --surface-sunken: #f1efea;  /* inline code, entry hover */

  /* Colour — semantic */
  --info:           #3b7ea1;
  --info-bg:        #eef4f8;
  --warn:           #b8860b;
  --warn-bg:        #fbf5e7;

  /* Fonts */
  --font:      "Geist Variable", "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Type scale — used site-wide */
  --t-xs:   0.75rem;     /* 12px — mono, dates, labels */
  --t-sm:   0.875rem;    /* 14px — nav, back link, footer, secondary */
  --t-base: 1rem;        /* 16px — body, entries */
  --t-h3:   1.0625rem;   /* 17px — sub-section headings */
  --t-lede: 1.125rem;    /* 18px — lede, emphasised intro */
  --t-h2:   1.1875rem;   /* 19px — section headings */
  --t-h1:   clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem);  /* 24–30px page titles */
  --t-pill: 0.6875rem;   /* 11px — tag pills, mono labels */

  /* Line heights */
  --lh-tight:   1.25;
  --lh-body:    1.7;
  --lh-relaxed: 1.55;  /* lede, alert, muted descriptions */

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;

  /* Radii */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   10px;
  --r-full: 999px;

  /* Layout */
  --measure:  34rem;
  --gutter:   clamp(1.25rem, 4vw, 2rem);

  /* Motion */
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:   200ms;
}

:root[data-theme="dark"] {
  --bg:             #111111;
  --fg:             #ececea;
  --muted:          #9c9c9a;
  --subtle:         #6a6a68;
  --rule:           #262625;

  --surface:        #1a1a1a;
  --surface-sunken: #222220;

  --info:           #7ab9d8;
  --info-bg:        #16242d;
  --warn:           #e0b859;
  --warn-bg:        #2a2315;

  color-scheme: dark;
}

:root[data-theme="dark"] ::selection { background: #ececea; color: #111111; }

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "ss03";
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

a:hover { border-bottom-color: var(--fg); }

img, svg, video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}

::selection { background: #111; color: #fcfcfb; }

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

main:focus { outline: none; }

/* Skip link for keyboard / screen reader users */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--fg);
  color: var(--bg);
  border: 0;
  border-radius: 4px;
  font-size: var(--t-sm);
  z-index: 100;
  transform: translateY(-200%);
  transition: transform 150ms var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- Typography ---------- */
h1 {
  font-size: var(--t-h1);
  font-weight: var(--w-medium);
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  color: var(--fg);
}

h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg);
  margin-top: 3rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
  letter-spacing: -0.005em;
  color: var(--fg);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

p {
  color: var(--fg);
  font-size: var(--t-base);
  line-height: var(--lh-body);
}

em  { font-style: italic; }
strong { font-weight: var(--w-medium); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}