/* ════════════════════════════════════════════════════════════════
Hodhod Design System — design tokens
----------------------------------------------------------------
Source of truth for colour, radius and typography across
hodhod-design.com. Light values are the default; dark values apply
when is set by the shared theme controller
(portfolio/theme.js).
Reuse on a new page:
then reference the variables, e.g. color: var(--pf-text);
(See design-system/README.md for the full page starter + components.)
Values verified against the Hodhod Design System Figma file
(node 12:4, dark mode). Names match the --pf-* convention already
used by portfolio.css / archive.html.
════════════════════════════════════════════════════════════════ */
:root {
/* ── Colour — light (default) ── */
--pf-bg: #F8F8F6; /* page background */
--pf-card-bg: #FFFFFF; /* cards / raised surfaces */
--pf-text: #111111; /* primary text */
--pf-text-2: #777772; /* secondary / muted text */
--pf-accent: #0047FF; /* primary accent (actions) */
--pf-line: #E7E7E2; /* borders / hairlines */
--pf-tag-bg: #EFEFEA; /* tag / chip background */
--pf-tag-text: #56564F; /* tag / chip text */
--pf-tag-bg-h: #DDE4FF; /* tag / chip hover background */
/* ── Radius ── */
--pf-radius: 16px;
/* ── Typography ── */
--pf-font-display: "Fraunces", Georgia, serif; /* headings (never italic) */
--pf-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
color-scheme: light;
}
:root[data-theme="dark"] {
/* ── Colour — dark (Hodhod Design System) ── */
--pf-bg: #14141A;
--pf-card-bg: #1C1C22; /* = DS surface */
--pf-text: #F1F1EF;
--pf-text-2: #ABABA6; /* = DS muted */
--pf-accent: #5C8DFF; /* lighter accent for contrast on dark */
--pf-line: #6E6E7A; /* = DS border */
--pf-tag-bg: #26262E;
--pf-tag-text: #ABABA6;
--pf-tag-bg-h: #2B3363;
color-scheme: dark;
}