/* ============================================================
   FIELD NOTES THEME — design tokens & foundations
   The visual system of the Dutch identity. Portable across
   projects (h15n.org, p./r. subdomains, ultreia, bahn …).

   Usage: copy this folder, then in your CSS:
       @import "/field-notes-theme/tokens.css";
   or link it before your project stylesheet. Fonts are
   self-hosted (no CDN); adjust the /field-notes-theme/fonts/
   paths below if you mount it elsewhere.
   ============================================================ */

/* --- Fonts: slab headlines, readable serif prose, sans UI, typewriter stamp --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900; /* variable */
  font-display: swap;
  src: url("/field-notes-theme/fonts/inter-var.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/field-notes-theme/fonts/zilla-slab-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/field-notes-theme/fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/field-notes-theme/fonts/source-serif-4-600.woff2") format("woff2");
}
/* Special Elite — distressed typewriter, the "stamp" voice (data/numerals only) */
@font-face {
  font-family: "Special Elite";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/field-notes-theme/fonts/special-elite-400.woff2") format("woff2");
}

:root {
  /* Type families — four voices, never blurred */
  --font-slab:  "Zilla Slab", Georgia, "Times New Roman", serif;   /* headlines */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* prose / reading text */
  --font-sans:  Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* UI: buttons, tags, labels */
  --stamp:      "Special Elite", ui-monospace, Menlo, Consolas, monospace; /* stamped data: numerals, ticket values, short metadata */

  /* Surfaces — a deliberate duotone: warm cream vs. charcoal */
  --cream:       #E7E1D6;  /* light page base */
  --cream-deep:  #D8D1C4;  /* gradient floor */
  --card:        rgba(255, 250, 239, 0.68); /* light glass card */
  --card-dark:   rgba(15, 15, 16, 0.92);    /* dark panel */

  /* Ink */
  --char: #0F0F10;  /* near-black: headlines, strong */
  --ink:  #171615;  /* body text */
  --ash:  #6E6A65;  /* muted / metadata */

  /* Accent — "red ink" */
  --rust:      #B23A2B;  /* primary accent, active states */
  --rust-dark: #7A2A1F;  /* links, accent text on light */

  /* Lines, depth, geometry */
  --line:   rgba(15, 15, 16, 0.16);
  --shadow: 0 28px 80px rgba(15, 15, 16, 0.20);
  --radius:    28px;  /* large cards/panels */
  --radius-sm: 22px;  /* buttons, tiles */
  --radius-pill: 999px;

  /* Rhythm */
  --gap: 28px;
}

/* --- Foundations --- */
* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--cream);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  /* Reading text defaults to SERIF — "make text serif".
     On UI-dense surfaces (a link hub), you may set this to
     var(--font-sans) and let prose blocks opt back into serif. */
  font-family: var(--font-serif);
  line-height: 1.65;
  /* The paper: warm gradient + two faint rust glows */
  background:
    radial-gradient(circle at 20% 10%, rgba(178, 58, 43, 0.16), transparent 32rem),
    radial-gradient(circle at 90% 25%, rgba(122, 42, 31, 0.15), transparent 28rem),
    linear-gradient(135deg, var(--cream), #f2ebdc 48%, var(--cream-deep));
  overflow-x: hidden;
}

/* Tactile dot-grid texture (subtract this layer for a flat look) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(rgba(15, 15, 16, 0.18) 0.7px, transparent 0.7px),
    radial-gradient(rgba(15, 15, 16, 0.10) 0.5px, transparent 0.5px);
  background-position: 0 0, 12px 18px;
  background-size: 26px 26px, 34px 34px;
}

/* Headlines = SLAB */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-slab);
  font-weight: 700;
  color: var(--char);
  letter-spacing: -0.02em;
}
h1 { line-height: 0.98; }

/* Links inherit color; accent on prose links handled per-project */
a { color: inherit; text-decoration: none; }

/* --- Family utilities: override the defaults anywhere ---
   "make text serif, make buttons sans": apply .fnt-sans to
   buttons, nav, tags, labels, and any interactive/meta UI. */
.fnt-slab  { font-family: var(--font-slab); }
.fnt-serif { font-family: var(--font-serif); }
.fnt-sans  { font-family: var(--font-sans); }
.fnt-stamp { font-family: var(--stamp); }  /* reserve for numerals / stamped values */

/* UI chrome that should always be sans regardless of body default */
button, input, select, textarea,
.tag, .eyebrow, .label, [class*="label"], nav {
  font-family: var(--font-sans);
}