/* * Shared colour tokens for sergioazevedo.pt (landing) and work.sergioazevedo.pt (portfolio). * SOURCE OF TRUTH: portfolio/app/theme.css. The landing gets a copy via `npm run sync-theme`. * * Theme resolution: * [data-theme="light"|"dark"] on -> explicit choice (cookie "theme", shared across *.sergioazevedo.pt) * no attribute -> follows prefers-color-scheme * * "band" colours are the always-dark sections (contact, positioning, footer, lightbox). * They stay dark in both themes; in dark mode they lift slightly so they still separate from the canvas. */ :root { color-scheme: light; --c-canvas: #ffffff; --c-surface: #f5f5f7; --c-ink: #111111; --c-ink-2: #555555; --c-ink-3: #767676; --c-ink-4: #888888; --c-line: #e2e2ea; --c-rule: #111111; --c-brand: #345cff; --c-brand-deep: #2547e0; --c-brand-ink: #345cff; --c-on-brand: #ffffff; --c-band: #0a0a0a; --c-band-2: #1a1a1a; --c-band-line: #2a2a2a; --c-field: #161616; --c-void: #000000; --c-on-band: #f5f2eb; --c-on-band-2: #a8a59e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-canvas: #0b0b0c; --c-surface: #141416; --c-ink: #f5f2eb; --c-ink-2: #b4b1aa; --c-ink-3: #94918b; --c-ink-4: #8a8883; --c-line: #2a2a2e; --c-rule: #f5f2eb; --c-brand: #345cff; --c-brand-deep: #4a6dff; --c-brand-ink: #7d95ff; --c-on-brand: #ffffff; --c-band: #161618; --c-band-2: #242428; --c-band-line: #34343a; --c-field: #0f0f11; --c-void: #000000; --c-on-band: #f5f2eb; --c-on-band-2: #a8a59e; } } :root[data-theme="dark"] { color-scheme: dark; --c-canvas: #0b0b0c; --c-surface: #141416; --c-ink: #f5f2eb; --c-ink-2: #b4b1aa; --c-ink-3: #94918b; --c-ink-4: #8a8883; --c-line: #2a2a2e; --c-rule: #f5f2eb; --c-brand: #345cff; --c-brand-deep: #4a6dff; --c-brand-ink: #7d95ff; --c-on-brand: #ffffff; --c-band: #161618; --c-band-2: #242428; --c-band-line: #34343a; --c-field: #0f0f11; --c-void: #000000; --c-on-band: #f5f2eb; --c-on-band-2: #a8a59e; } /* Theme toggle icon: shows the theme you'd switch TO. Pure CSS so the server HTML never mismatches. */ .theme-to-dark { display: inline-flex; } .theme-to-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-to-dark { display: none; } :root:not([data-theme="light"]) .theme-to-light { display: inline-flex; } } :root[data-theme="dark"] .theme-to-dark { display: none; } :root[data-theme="dark"] .theme-to-light { display: inline-flex; } /* Print always uses the light palette. */ @media print { :root, :root[data-theme], :root:not([data-theme="light"]) { color-scheme: light; --c-canvas: #ffffff; --c-surface: #f5f5f7; --c-ink: #111111; --c-ink-2: #555555; --c-ink-3: #767676; --c-ink-4: #888888; --c-line: #e2e2ea; --c-rule: #111111; --c-brand-ink: #345cff; --c-brand-deep: #2547e0; } }