/* ============================================================ PassbackAI design tokens — single source of truth. Linked from every HTML entry + the React SPA. Any token used on this site must live here. THREE LAYERS: - :root light theme (default values) - [data-theme="dark"] dark theme overrides — applied by the boot script in when the user has picked Dark, or when on System and the OS prefers dark - [data-theme="light"] explicit light pin — beats system Components consume only the semantic names. Theme switching is a pure data flip; no component code knows which theme is active. ============================================================ */ :root { color-scheme: light; /* ---------- Surfaces (low → high elevation) --------------- New code uses --surface-N. Existing references to --bg / --bg-sub keep working via aliases below. In LIGHT: surfaces stay near-white; elevation expressed via shadows + borders. In DARK: surfaces lighten as elevation rises (Material rule); shadows do almost no visual work on dark canvases. */ --surface-0: #fbfbfa; /* recessed/inset (code wells) */ --surface-1: #ffffff; /* primary canvas */ --surface-2: #fbfbfa; /* slightly raised, hovers */ --surface-3: #f7f7f6; /* cards, popovers */ --surface-4: #ffffff; /* dialogs, top elevation */ /* Surface aliases — the existing ~400 references go through these. */ --bg: var(--surface-1); --bg-sub: var(--surface-2); /* Chip fills — promoted from the SPA shell (index.html keeps an identical copy) so static pages stop falling back to --bg-sub, which is invisible against a white popover. */ --chip-bg: #f1f1ef; --chip-bg-hover: #e8e8e6; --bg-cream: #faf8f3; /* paper-warm; doesn't flip per-theme */ /* ---------- Ink / text ----------------------------------- New code prefers --text-primary/secondary/muted/disabled. Legacy --ink/--ink-2/--muted aliased on top. Warm-neutral in both themes — never pure black, never pure white. */ --text-primary: #37352f; --text-secondary: #5c5b57; --text-muted: #6f6e6c; --text-disabled: #b7b3ad; --text-on-emphasis: #ffffff; /* ink on a dark/colored surface */ --ink: var(--text-primary); --ink-2: var(--text-secondary); --muted: var(--text-muted); /* ---------- Edges (borders, dividers) -------------------- */ --edge: #ebebea; --edge-strong: #d9d9d6; --edge-subtle: #f2f2f1; --border: var(--edge); --border-strong: var(--edge-strong); --border-subtle: var(--edge-subtle); /* ---------- Brand accent — yellow highlight -------------- The one color that's unmistakably this product. Used as edge and underline; never as a background for UI chrome. Stays warm-yellow in both themes — slightly more saturated in dark for stronger 3:1 focus contrast on dark surfaces. */ --hl-fill: #fde68a; --hl-fill-soft: #fef3c7; --hl-edge: #f59e0b; /* AREA wash — table row/column/cell tints, where the highlight covers a SLAB of layout, not a span of text. Light: same butter as the soft fill. Dark: a low-alpha amber — the near-solid dark --hl-fill-soft is documented as "too hot as a full fill", and a whole highlighted column in it outshouts everything on the canvas. */ --hl-wash: #fef3c7; /* [Delete]-labelled area wash — the dusty-red slab variant of the same. */ --hl-del-wash: #f7e9e9; /* Ink ON the highlight fill. The fill stays butter-yellow in BOTH themes, so the text sitting on it must stay dark in both — it must NOT follow --ink, which flips to off-white in dark (off-white on yellow ≈ 1.5:1). Same literal value in every theme block, on purpose. */ --text-on-hl: #37352f; /* ---------- Deferred-delete (inline undo) ---------------- A navigator row armed for deletion. One restrained danger signal — the brick-red trash mark — over a near-neutral warm wash so the row reads "set apart", not "alarm". The draining hairline tracks the mark's hue (NOT the brand amber, which is the affirmative accent) — solid so the countdown is actually legible against the row. */ --del-wash: rgba(120, 95, 90, 0.055); --del-mark: #b23b34; --del-edge: #c0392c; /* ---------- Version-diff lens ---------------------------- Convention coloring: green = added, red = removed. Kept editorial — low chroma, pulled toward the warm canvas — so a dense RTL paragraph with many marks stays calm. The CSS restates the encoding dual-channel (add = underline, del = strikethrough), so color only reinforces. Diff-red is a deliberate SIBLING of the brand brick --del-mark, not a reuse: "armed for deletion" and "word was removed" must not read as the same signal. -ink = the gentle word ink, -line = the decoration line, -rail = the whole-block spine. */ --diff-add-ink: #3f7d52; --diff-add-line: #4f9568; --diff-add-rail: rgba(63, 125, 82, 0.55); --diff-del-ink: #a8514a; --diff-del-line: #b85c54; --diff-del-rail: rgba(168, 81, 74, 0.50); /* ---------- Sticky-note pastels -------------------------- Paper fills for in-post callouts (.verdict, .pullquote) and the homepage audience cards. Butter is the default; blush and sage are editorial variants. NOT flipped per theme — paper stays paper. In dark mode the parent gets a brightness/contrast filter so they don't read as headlights against the near-black canvas. */ --note-butter: #fff1c6; --note-blush: #ffdcd8; --note-sage: #dae9d0; /* ---------- Interactive accent --------------------------- The marker yellow. Same --hl-fill the hero uses for the .mark band, so every interactive hit on the site carries the same brand signal and nothing ever shifts to orange. */ --link-accent: var(--hl-fill); --link-accent-soft: rgba(253, 230, 138, 0.55); /* Focus ring. The brand butter-yellow is ~1.3:1 on a white canvas — keyboard focus was effectively invisible in light. amber-700, the darker sibling of --hl-edge, keeps the ring in the brand family at ~5:1 on white and ≥3:1 on the amber chips it sometimes wraps. Dark keeps the bright #fcd34d ring (great on near-black). */ --ring: #b45309; /* The brand amber doing INK duty (eyebrows, small labels) — darker than --hl-edge so it holds AA contrast as text on the light canvas; flips to a bright apricot in dark. Components must consume the token, not remix their own amber. */ --accent-deep: #b35900; /* Legacy alias — the old --accent was #2383e2, a generic blue that had no relationship to the rest of the palette. */ --accent: var(--link-accent); /* ---------- Shadows -------------------------------------- In light: standard cool drop-shadows do the elevation work. In dark: shadows are weaker but still present; tonal lift (lighter surface) does most of the work. */ --shadow-small: 0 1px 2px rgba(15, 15, 15, 0.06), 0 1px 3px rgba(15, 15, 15, 0.04); --shadow-medium: 0 4px 12px rgba(15, 15, 15, 0.08); --shadow-large: 0 12px 32px rgba(15, 15, 15, 0.12); /* ---------- Scrim ---------------------------------------- Backdrop behind modal dialogs. Light: a soft ink wash. Dark: deeper, since the canvas is already near-black and a light wash would do no separating work. */ --scrim: rgba(15, 15, 15, 0.42); /* ---------- Image dimming -------------------------------- */ --img-filter: none; /* ---------- Topbar blur background ----------------------- Sticky topbar uses backdrop-filter over a translucent fill. Light: white-ish. Dark: warm near-black. */ --topbar-blur: rgba(255, 255, 255, 0.88); /* ---------- Typography ----------------------------------- */ --reading-font: 'Noto Serif', Georgia, 'Times New Roman', serif; --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* ---------- Editorial scale — ONE system for content pages ----- The single type + space + grid scale every ☰-menu content page (about / manifesto / privacy / connect / blog + posts / for/*) composes from. Before this block each page carried its OWN