:root {
  /* - Keep ~80% neutral (black/white/silver/gray), ~20% red accents */

  /* Primary */
  --rpi-black:   #000000;
  --rpi-white:   #FFFFFF;
  --rpi-red:     #D6001C;     /* Use as accents */

  /* Secondary (subtle UI fills, separators) */
  --rpi-silver:  #E1EDF5;
  --rpi-gray:    #B9CCD8;

  /* Palette */
  --bg:          var(--rpi-white);
  --bg-muted:    var(--rpi-silver);
  --surface:     #ffffff;
  --surface-alt: #f7f9fb;

  --text:        var(--rpi-black);
  --text-muted:  #2a2a2a;         /* deep gray for body copy */
  --text-soft:   #444;            /* captions / secondary text */

  --accent:      var(--rpi-red);    /* accent uses brand red */
  --accent-ink:  #ffffff;         /* text on red */

  --border:      #d6dde4;         /* neutral border */
  --ring:        var(--rpi-red);    /* focus ring uses red */

  text-decoration: none;
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

/* Fonts */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Accent bar for section headings */
main h2 {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  padding-left: 0.75rem;
  border-left: 4px solid var(--accent);
  color: var(--text);
  line-height: 1.3;
}

/* Typography */
body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;          /* body = 14–18px */
  line-height: 1.65;         /* 140% */
  color: var(--text);
  background: var(--bg);
}

/* Headlines (≥36px) */
h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  /* 40px minimum, grows with viewport, caps at 56px */
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  line-height: 1.15;
  margin: 1.25rem 0 .75rem;
  color: var(--text);
}

h2 {
  font-family: var(--font-sans);
  font-weight: 600;              /* give it more presence */
  /* 22px minimum, grows, caps at 32px */
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.25;
  margin: 1rem 0 .5rem;
  color: var(--text);
}

p, li {
  font-family: var(--font-sans);
  font-weight: 400;         /* Regular (use 500 for a bit more punch) */
  font-size: 1.0625rem;          /* 14–18 allowed */
  line-height: 1.65;         /* 140% */
  color: var(--text-muted);
}

.caption {
  font-family: var(--font-mono);
  font-size: 13px;          /* ≤14px */
  line-height: 1.3;         /* 130% */
  color: var(--text-soft);
}

a {
    text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--accent);
}