/* ============================================================ omgfixmd 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); --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: #9b9a97; --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; /* ---------- 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); --ring: rgba(253, 230, 138, 0.95); /* 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; /* ---------- Motion --------------------------------------- */ --ease-quiet: cubic-bezier(.2, .8, .2, 1); --ease-considered: cubic-bezier(.22, 1, .36, 1); --ease-overshoot: cubic-bezier(.34, 1.56, .64, 1); /* Docked-rail width. The app defines this inline in index.html for the SPA rail; mirrored here so the static content-page rail (.site-rail in components.css) offsets its content column by the identical width. */ --dock-w: 300px; } /* ============================================================ Dark theme — warm editorial. Pairs with the existing warm ink palette and brand-yellow. Canvas around #1a1815 (warm near-black). Surfaces lighten as elevation rises. Off-white text #ece9e1 (never #ffffff). ============================================================ */ [data-theme="dark"] { color-scheme: dark; --surface-0: #14110e; /* sub-canvas, code wells */ --surface-1: #1a1815; /* primary canvas */ --surface-2: #22201d; /* raised, hovers */ --surface-3: #2c2a26; /* cards, popovers */ --surface-4: #36332e; /* dialogs */ --bg: var(--surface-1); --bg-sub: var(--surface-2); /* --bg-cream stays warm-paper. Sticky-notes get dimmed via filter on the parent (see components.css) so the cream doesn't blast as a headlight against the dark canvas. */ --text-primary: #ece9e1; --text-secondary: #b0aaa0; --text-muted: #8c857b; --text-disabled: #7a7268; --text-on-emphasis: #1a1815; --ink: var(--text-primary); --ink-2: var(--text-secondary); --muted: var(--text-muted); /* Edges as rgba(white, alpha) so they composite correctly across multiple surface elevations. */ --edge: rgba(255, 255, 255, 0.12); --edge-strong: rgba(255, 255, 255, 0.22); --edge-subtle: rgba(255, 255, 255, 0.06); --hl-fill: #fcd34d; --hl-fill-soft: rgba(252, 211, 77, 0.78); --hl-edge: #f59e0b; --del-wash: rgba(248, 113, 113, 0.07); --del-mark: #f0a39d; --del-edge: #f0a39d; --diff-add-ink: #7fc596; --diff-add-line: #8fd0a4; --diff-add-rail: rgba(127, 197, 150, 0.50); --diff-del-ink: #e8a39c; --diff-del-line: #efb0a9; --diff-del-rail: rgba(232, 163, 156, 0.46); --link-accent: var(--hl-fill); --link-accent-soft: rgba(252, 211, 77, 0.32); --ring: rgba(252, 211, 77, 0.95); --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-large: 0 12px 32px rgba(0, 0, 0, 0.65); --img-filter: brightness(0.85) contrast(1.10); --topbar-blur: rgba(26, 24, 21, 0.85); --scrim: rgba(0, 0, 0, 0.62); } /* ============================================================ System preference fallback. When the user is on "System" the boot script removes any data-theme attribute. This block then takes over via the OS preference. The :not([data-theme]) guard keeps an explicit Light or Dark choice from being overridden. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --surface-0: #14110e; --surface-1: #1a1815; --surface-2: #22201d; --surface-3: #2c2a26; --surface-4: #36332e; --bg: var(--surface-1); --bg-sub: var(--surface-2); --text-primary: #ece9e1; --text-secondary: #b0aaa0; --text-muted: #8c857b; --text-disabled: #7a7268; --text-on-emphasis: #1a1815; --ink: var(--text-primary); --ink-2: var(--text-secondary); --muted: var(--text-muted); --edge: rgba(255, 255, 255, 0.12); --edge-strong: rgba(255, 255, 255, 0.22); --edge-subtle: rgba(255, 255, 255, 0.06); --hl-fill: #fcd34d; --hl-fill-soft: rgba(252, 211, 77, 0.78); --del-wash: rgba(248, 113, 113, 0.07); --del-mark: #f0a39d; --del-edge: #f0a39d; --diff-add-ink: #7fc596; --diff-add-line: #8fd0a4; --diff-add-rail: rgba(127, 197, 150, 0.50); --diff-del-ink: #e8a39c; --diff-del-line: #efb0a9; --diff-del-rail: rgba(232, 163, 156, 0.46); --link-accent: var(--hl-fill); --link-accent-soft: rgba(252, 211, 77, 0.32); --ring: rgba(252, 211, 77, 0.95); --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-large: 0 12px 32px rgba(0, 0, 0, 0.65); --img-filter: brightness(0.85) contrast(1.10); --topbar-blur: rgba(26, 24, 21, 0.85); --scrim: rgba(0, 0, 0, 0.62); } }