/* ============================================================================
   base.css — shared design tokens for BOTH the website and the print CV.
   One brand, two surfaces. Screen- and print-specific rules live in
   screen.css / print.css; this file is the single source of visual truth.
   ============================================================================ */

/* --- Self-hosted brand fonts (work for both WeasyPrint PDF and the site) ----
   url() resolves relative to THIS stylesheet (site/static/css/), so fonts are
   one level up under ../fonts/. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

:root {
  /* --- Palette ----------------------------------------------------------- */
  /* Clean technical brand: white paper, near-black ink, one slate-blue accent.*/
  --paper:        #ffffff;   /* page background                              */
  --paper-2:      #f6f7f8;   /* faint panels / hairline fills               */
  --ink:          #15171a;   /* primary text                                */
  --ink-soft:     #3d4248;   /* secondary text                              */
  --ink-faint:    #6b7178;   /* meta / dates / captions                     */
  --rule:         #e3e6e9;   /* hairlines                                   */
  --rule-strong:  #cfd4d9;
  --accent:       #2b5ca8;   /* slate blue — links, marks, the rail          */
  --accent-soft:  #4a78c0;

  /* --- Type families ----------------------------------------------------- */
  /* One sans (Inter) for display + body; mono for meta. Self-hosted above.   */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Newsreader", Georgia, serif;   /* kept available; not core */

  /* --- Type scale (modular, ~1.25) --------------------------------------- */
  --fs-xs:   0.72rem;
  --fs-sm:   0.82rem;
  --fs-base: 1rem;
  --fs-md:   1.18rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.85rem;
  --fs-3xl:  4.2rem;
  --fs-4xl:  6rem;

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

  --measure: 64ch;            /* comfortable reading width                   */
  --rail-w: 2px;              /* width of the vertical role rail             */
}

/* --- Reset-ish ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--accent);
  text-decoration: none;
}

/* Small-caps section eyebrow — reused on web + print as section markers. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* Monospace meta (dates, locations) — the connective tissue of the brand. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}