/* ========================================================================== Color tokens — light + dark Extracted from Figma "Portflolio Branding" and extended for AA compliance. Figma source values: ink #111 · secondary #707070 · inactive rgba(17,17,17,.6) hairline #D9D9D9 · accent pink #F67599 · surface #FFF IMPORTANT — there is exactly ONE pink (#F67599), and it is the INTERACTIVE accent, never a resting one. It is NEVER pink text on a light surface (~2.3:1 — fails). It MAY fill a button on hover, but only under a DARK (ink) label: ink on pink = 6.4:1 (AA), whereas white on pink = 2.7:1 (fails). Otherwise it's a thin graphic — rules, underlines, dots, selection. Dark mode is a pure token swap. It is gated three ways so it can be killed site-wide from one flag in assets/theme.js (DARK_MODE_ENABLED): 1. @media (prefers-color-scheme: dark) — system preference 2. :root[data-theme="dark"] — explicit toggle 3. forcing [data-theme="light"] on disables BOTH of the above ========================================================================== */ :root { /* --- Surfaces --- */ --pf-surface: #ffffff; /* page background */ --pf-surface-sunken: #f6f6f6; /* swatches, code, subtle section fills */ --pf-surface-inverse: #111111; /* occasional dark bands (e.g. "say hello")*/ /* --- Ink (text) --- */ --pf-ink: #111111; /* primary text — 18.9:1 on white */ --pf-ink-secondary: #707070; /* meta, overline — 4.95:1 (AA) */ --pf-ink-tertiary: rgba(17, 17, 17, 0.6); /* inactive nav (large text) */ --pf-ink-inverse: #ffffff; /* text on inverse surfaces */ /* --- Lines --- */ --pf-hairline: #d9d9d9; /* 1px dividers (decorative) */ --pf-hairline-strong: #bcbcbc; /* heavier rules */ /* --- Accent (Rapha-flavoured rose) --- ONE pink, the interactive accent. Two accessible uses: (1) a thin GRAPHIC element — rule, underline, dot, selection; (2) a hover FILL on buttons, always under a DARK ink label (never white). NEVER pink text on a light surface. Mirrors Rapha — whose buttons fill pink and text links turn pink on hover, while resting states stay black — kept AA via ink (not white) on the pink, so one hex still covers everything. */ --pf-accent: #f67599; /* --- Roles --- */ --pf-focus: var(--pf-ink); /* high-contrast focus ring, not pink */ --pf-link: var(--pf-ink); /* links are ink; pink only underlines */ --pf-selection-bg: var(--pf-accent); --pf-selection-fg: #111111; /* ink on pink = 6.4:1 */ } /* System dark — applies only when light hasn't been forced. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pf-surface: #121212; --pf-surface-sunken: #1c1c1c; --pf-surface-inverse: #f2f2f2; --pf-ink: #f2f2f2; /* 17.2:1 on #121212 */ --pf-ink-secondary: #a6a6a6; /* 7.9:1 (AA) */ --pf-ink-tertiary: rgba(242, 242, 242, 0.6); --pf-ink-inverse: #111111; --pf-hairline: #333333; --pf-hairline-strong: #4d4d4d; --pf-accent: #f67599; /* same single pink on dark */ --pf-link: var(--pf-ink); --pf-selection-fg: #111111; /* ink on pink stays readable */ } } /* Explicit dark — the toggle always wins over system preference. */ :root[data-theme="dark"] { --pf-surface: #121212; --pf-surface-sunken: #1c1c1c; --pf-surface-inverse: #f2f2f2; --pf-ink: #f2f2f2; --pf-ink-secondary: #a6a6a6; --pf-ink-tertiary: rgba(242, 242, 242, 0.6); --pf-ink-inverse: #111111; --pf-hairline: #333333; --pf-hairline-strong: #4d4d4d; --pf-accent: #f67599; --pf-link: var(--pf-ink); --pf-selection-fg: #111111; } ::selection { background: var(--pf-selection-bg); color: var(--pf-selection-fg); }