/* SAIGE (Safe AI Germany) design tokens. Source of truth: README.md in this folder.
Fonts are self-hosted from ./fonts (do not load them from Google Fonts on the website: GDPR, LG München 3 O 17493/20).
Usage: and copy the fonts folder next to it. */
/* ---------- Fonts ---------- */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
src: url("/fonts/newsreader-latin-standard-normal.woff2") format("woff2-variations");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
src: url("/fonts/newsreader-latin-ext-standard-normal.woff2") format("woff2-variations");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
src: url("/fonts/newsreader-latin-standard-italic.woff2") format("woff2-variations");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
src: url("/fonts/newsreader-latin-ext-standard-italic.woff2") format("woff2-variations");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
/* ---------- Core colours (Moss & Butter) ---------- */
--saige-deep-sage: #5F7A59; /* logo and logotype only (4.4:1 on cream) */
--saige-sage: #8EA583; /* brand green: tags, tiles, illustration, accents. Never body text */
--saige-moss: #34421F; /* primary buttons, links, dark sections, italic emphasis */
--saige-butter: #F3D35B; /* highlights, tags, link underlines. Never text */
--saige-periwinkle: #AFC0F4; /* secondary accent: tags, tiles */
--saige-ink: #1E2414; /* body text and headings */
--saige-ink-2: #4A4F3C; /* secondary text */
--saige-cream: #F8F6EC; /* page background; text on dark */
--saige-white: #FFFFFF; /* cards on cream, if needed */
--saige-line: #E5E1CD; /* hairlines and borders on cream */
--saige-on-moss: #D9DCC8; /* secondary text on moss */
/* ---------- Programme colours ---------- */
--saige-incubator: #4E7F47; /* green: small text on it in white (4.7:1); cream only for large headlines */
--saige-maths: #2F6FC4; /* blue */
--saige-maths-accent-on-dark: #8FB6EC;
--saige-hubs: var(--saige-butter); /* butter yellow: pair with ink text, never cream */
--saige-future: #6B4E9B; /* purple: reserved for a future programme */
--saige-future-accent-on-dark: #C4B1E6;
/* ---------- Maths pattern (technical programmes, e.g. Maths Workshop): triangles on blue ---------- */
--saige-maths-on: #DCE7F7; /* secondary text on maths blue */
--saige-maths-lit: #D3E2F8; /* italic emphasis and lit triangles on maths blue */
--saige-tri-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='41.569' viewBox='0 0 24 41.569'%3E%3Cpath d='M0 .5H24M0 20.785H24M0 0L24 41.569M24 0L0 41.569' fill='none' stroke='%23E8F0FB' stroke-opacity='.26'/%3E%3C/svg%3E"); /* still triangle lattice, 24 px */
/* ---------- Type ---------- */
--saige-font-serif: "Newsreader", Georgia, "Times New Roman", serif; /* headlines, logotype, quotes, big numbers */
--saige-font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; /* body, UI, buttons, labels */
--saige-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* technical programmes only */
--saige-text-display: clamp(40px, 6vw, 72px); /* homepage hero h1: serif 400, lh 1.02, tracking -0.02em */
--saige-text-h2: clamp(30px, 3.8vw, 44px); /* section titles: serif 400, lh 1.1, tracking -0.015em */
--saige-text-h3: clamp(22px, 2.2vw, 26px); /* card titles: serif 400, lh 1.15 */
--saige-text-lede: 19px; /* intro paragraphs: sans 400, lh 1.5 */
--saige-text-body: 17px; /* body: sans 400, lh 1.55 */
--saige-text-small: 14px; /* captions, meta, nav links (14.5px) */
--saige-text-label: 12px; /* eyebrows: sans 600, uppercase, tracking 0.12em */
--saige-text-mono: 12px; /* technical metadata: mono 400, tracking 0.03em */
/* ---------- Space, shape, layout ---------- */
--saige-space-1: 4px; --saige-space-2: 8px; --saige-space-3: 12px; --saige-space-4: 16px;
--saige-space-5: 24px; --saige-space-6: 32px; --saige-space-7: 48px; --saige-space-8: 64px;
--saige-space-9: 96px; --saige-space-10: 128px;
--saige-radius-control: 3px; /* buttons, inputs, tags */
--saige-radius-card: 12px; /* cards, image tiles, panels */
--saige-container: 1200px; /* max content width */
--saige-measure: 68ch; /* max line length for running text */
--saige-gutter: 24px; /* page side padding (16px under 600px) */
}
/* ---------- Optional helpers ---------- */
/* Maths blue with a still triangle lattice, for small elements (date tiles, cards). Large bands use the
interactive version: a