/* ============================================================ TOKENS — the single source of truth for the whole site. Import this FIRST, before any other stylesheet, on every page. Nothing downstream should hard-code a colour, a font stack, or a border value; if a value is missing here, add it here. Two token sets existed before this file: the main site pages (about/talks/home) carried one inline copy each, and journal/src/styles/tokens.css carried an older, differently- NAMED set. They disagreed on real values — page background, primary text, and both typefaces — so the journal and the site would not have matched. This file is the reconciliation. Canonical values come from the main site pages, which are the newer Figma pass. Section 3 keeps the journal's legacy names alive as aliases so it renders correctly the moment this file is dropped in, and can be migrated file by file rather than in one risky pass. Delete an alias only once nothing references it (see docs/DESIGN-SYSTEM.md §6). ============================================================ */ :root{ /* ---------- 1 · TYPE ---------- Loaded from Google Fonts in each page head. The comp specifies MD System Trial (UI) and Lab Grotesque (display) — both licensed and not on a CDN. Gothic A1 and Bitter are the stand-ins actually in use. Swapping later means changing the and these two lines only. */ --sans: 'Gothic A1', 'A1 Gothic', -apple-system, 'Helvetica Neue', Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'Martel', Georgia, 'Times New Roman', serif; /* ---------- 2 · CANONICAL PALETTE ---------- Names match the Figma variable set. Use these everywhere. */ /* surfaces */ --bg-page: #E0E0E0; /* default site page background */ --bg-surface: #ffffff; /* every card, panel, sidebar */ --bg-panel: #ececec; /* recessed / placeholder blocks */ /* lines */ --border-light: #d3d3d3; /* default card + panel edge */ --border-strong: #a5a5a5; /* emphasis edge, pin cards, dashed rules */ --border-default: #0b0b0b; /* full-contrast edge, active states */ /* text */ --text-primary: #0b0b0b; --text-secondary: #454545; --text-tertiary: #777777; --text-caption: #545454; --text-placeholder: #979797; /* card header strips, meta labels */ --text-disabled: #c2c2c2; /* unavailable or deliberately de-emphasised text */ --text-inverse: #ffffff; /* on --button-bg and filled accents */ /* controls */ --button-bg: #0b0b0b; --button-text: #ffffff; --button-tertiary-bg: #f2f2f2; /* active pagination pill */ /* icons */ --icon-primary: #737373; --icon-secondary: #aaa8a8; /* the 4px separator dot between tags */ --icon-disabled: #c2c2c2; /* ---------- 3 · CONTENT-TYPE ACCENTS ---------- These are semantic, not decorative: each entry type owns one colour, used for the 10px square on a journal row and its filter tab. Do not reuse them for anything else. See docs/JOURNAL-STRUCTURE.md §3. */ --type-essay: #a728ff; /* purple */ --type-note: #ff5700; /* orange */ --type-talk: #00728a; /* teal */ --type-image: #8b5cf6; /* violet */ --accent: #4eff7b; /* green — UI affordance only (active Search) */ --link: #0b56ff; /* palette extras the reading system needs and the site does not */ --style-yellow1: #ffff00; /* beta badge */ --style-yellow2: #fef98d; /* visitors card */ --style-orange2: #ff7a29; /* note dot */ --style-green2: #2ecc71; /* demo dot */ --success: #27ae60; /* question dot */ --style-blue2: #3498db; /* experiment dot */ --style-red2: #e74c3c; /* archived dot */ --style-brown2: #dfe6c5; /* hover-preview card ground */ --red: #ff2313; /* citation markers, selection tint */ --dot: #e2e2da; /* lighter dot color for dense background grid */ /* ---------- 4 · THE READING RIG ---------- Live custom properties the customise bar writes to at runtime and the article stylesheets read. Defaults only — reading-lab.js overwrites them. Never set these from a component. */ --r-size: 18px; --r-weight: 400; --r-leading: 1.72; --r-measure: 60ch; --r-measure-px: 620px; /* frozen ch→px, so a font swap can't resize the column */ --r-contrast: 1; } /* ============================================================ 5 · LEGACY ALIASES — journal/src/styles/* only. Temporary. Each line is a rename the journal still depends on; migrate the consumer, then delete the alias. Tracked in docs/DESIGN-SYSTEM.md §6. ============================================================ */ :root{ --page-bg: var(--bg-page); /* NOTE: name was reversed, and the old value was #e4e4e4 — this deliberately snaps the journal to the site's #e0e0e0 */ --outline: var(--border-light); --line-dashed: var(--border-strong); --line: #e1e1e1; /* no canonical equivalent; keep */ --ink: var(--text-primary); /* was pure #000 */ --text-heading:var(--text-primary); /* was #323232 */ --blue-tag: var(--link); --style-purple1: var(--type-essay); --style-orange1: var(--type-note); --style-green1: var(--type-talk); --style-purple2: #c9b8fc; --style-red1: #ff0000; --green: #209600; --purple: var(--type-essay); --orange: var(--type-note); --teal: var(--type-talk); /* grays: the reading system uses five, the canonical set has three text tones. Mapped to the nearest rather than kept as separate values. */ --gray-1: var(--text-secondary); --gray-2: var(--text-secondary); --gray-3: var(--text-tertiary); --gray-4: var(--text-tertiary); --gray-5: var(--text-tertiary); } /* ============================================================ 6 · NIGHT MODE Swaps the variables rather than shipping a parallel stylesheet, so any component reading var(--…) inherits the dark palette for free. --text-inverse and --accent deliberately do NOT invert: they pair with filled surfaces that stay dark in both themes. ============================================================ */ body.night{ --bg-page:#161616; --bg-surface:#1e1e1e; --bg-panel:#242424; --border-light:#3a3a3a; --border-strong:#555; --border-default:#e8e8e8; --text-primary:#f0f0f0; --text-secondary:#c7c7c7; --text-tertiary:#9a9a9a; --text-caption:#b5b5b5; --text-placeholder:#7a7a7a; --text-disabled:#555; --button-bg:#2c2c2c; --icon-primary:#a8a8a8; --icon-disabled:#555; --dot:#2c2c2c; }