:root { /* The default (light) theme. Dark mode lives in the :root[data-theme="dark"] block below and is toggled by scripts/theme.js (which also seeds the initial value from localStorage / the OS preference before first paint). Every surface across the site is token-driven, so a theme is just this set of overrides — no per-component dark rules. color-scheme keeps native widgets (form controls, scrollbars) in step. */ color-scheme: light; /* Brand blues — referenced as "structural" (header/CTA/markers) and "text emphasis" (titles/links). Tweaking the palette is a one-line edit per token. */ --color-primary: #1e88e5; --color-primary-dark: #1565c0; --color-primary-soft: #e3f2fd; --color-primary-softer: #f8fbff; --color-primary-hover: #bbdefb; /* Text greys — four steps from black to soft. Used in copy/meta/dates. */ --color-text: #333; --color-text-strong: #000; --color-text-soft: #666; /* Neutral surfaces & borders. --color-bg is the page; --color-surface is the raised card/panel layer (was a hardcoded `white` before dark mode — now a token so it flips). */ --color-bg: #f4f4f4; --color-surface: #ffffff; --color-surface-code: #f0f0f0; --color-border: #eee; --color-border-input: #ddd; /* Elevation. --shadow-card is the page card; --shadow-image is photos/figures; --shadow-soft is the lightest tile shadow; --shadow-modal is the lightbox image. */ --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-image: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-card: 0 0 10px rgba(0, 0, 0, 0.1); --shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.5); /* Radii. --radius-sm is the default card/image; --radius-md tags/tiles; --radius-lg hero/callout; --radius-pill the rounded buttons; --radius-circle for photos and marker dots. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --radius-circle: 50%; /* Page-content width — shared by the header band and the article container. The mobile breakpoint (600px) cannot live here: plain CSS does not resolve custom properties inside @media queries, so it stays as a literal across stylesheets. */ --page-width: 800px; /* Motion. --transition-fast is the default hover; --transition-base is reserved for richer About page interactions (tabs / projects / panel fades). */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; /* Type scale around the 16px body default. --font-size-lg is for prominent in-page titles (article title in the list, error page heading, search heading, header logo); --font-size-sm is the standard secondary copy (descriptions, callouts, search input, footer); --font-size-xs is the chip / pill / small-date scale; --font-size-xxs is the meta-label scale (stat labels, project meta, AI caption, dates in tiles). */ --font-size-lg: 1.2rem; --font-size-sm: 0.95rem; --font-size-xs: 0.85rem; --font-size-xxs: 0.82rem; /* Pill controls — header nav links, the search bar, the About contact pills. The callout CTA in the homepage hero is intentionally taller (40px) and does NOT use --pill-height. */ --pill-height: 35px; --pill-min-width: 115px; } /* ========== Dark theme (IntelliJ "Darcula" palette) ========== Only the colour / elevation tokens are overridden — every dimension token (radii, type scale, pills, page width, motion) is theme-agnostic and stays in :root. Activated by data-theme="dark" on (set by scripts/theme.js); the printable CV (/cv.html) never sets the attribute, so it stays light. Two things worth flagging about the mapping: • --color-primary-dark is the "text emphasis" token (titles, links). On a dark surface that has to be LIGHTER than --color-primary, so the dark/soft naming inverts in intent here — read it as "emphasis". • --color-surface-code is pushed slightly darker than --color-surface so fenced code reads as inset; Prism keeps its own Darcula theme for highlighted blocks. */ :root[data-theme="dark"] { color-scheme: dark; --color-primary: #4d9de8; /* structural accent — header band, CTAs, markers, filled pills */ --color-primary-dark: #6cb5ff; /* emphasis — titles & links on dark surfaces (brighter, not darker) */ --color-primary-soft: #2f4257; /* tinted chip / tag background */ --color-primary-softer: #2f3742;/* subtle boxed-section background (hero, recent, nav cards) */ --color-primary-hover: #3a5470; /* pill hover */ --color-text: #a9b7c6; /* Darcula editor foreground */ --color-text-strong: #e6e6e6; --color-text-soft: #8a929e; --color-bg: #2f3742; /* page — the soft blue-grey the About boxes use, lifted behind the content */ --color-surface: #2b2b2b; /* content panel (article list, article body, About) — Darcula EDITOR bg: the darkest, "recessed" reading layer, mirroring the IDE editor pane */ --color-surface-code: #232525; /* inset code box, a touch below the panel */ --color-border: #4b4f51; --color-border-input: #5a5d5f; --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-image: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-card: 0 0 12px rgba(0, 0, 0, 0.55); } body { margin: 0; padding: 0; background-color: var(--color-bg); color: var(--color-text); font-family: Arial, sans-serif; line-height: 1.6; } h2 { color: var(--color-primary); } code { padding: 2px 6px; background-color: var(--color-surface-code); border-radius: var(--radius-sm); } /* Mobile: shrink the whole UI ~10% proportionally. The design is almost entirely rem-based (the --font-size-* tokens, every font-size, and most spacing), so dialing the root font-size down to 90% scales text and rem spacing together across every page in one rule. Structural px values (the profile photo, pill heights, 1px borders, radii) stay fixed on purpose — keeps tap targets usable and borders crisp. The 600px breakpoint matches the per-surface stylesheets; their existing mobile rules inherit this smaller rem automatically. */ @media (max-width: 600px) { html { font-size: 90%; } }