/* ============================================================ * GoIDEA — theme system (dark default + light override) * * Activation: * → explicit dark (default) * → explicit light * → follows OS prefers-color-scheme * * Persistence: localStorage["goidea-theme"] (handled in theme-toggle.js). * Stamping happens BEFORE first paint to avoid FOUC (script in ). * ============================================================ */ /* ---- LIGHT (explicit) ---- */ :root[data-theme="light"] { /* Surfaces */ --bg: var(--color-neutral-1000); /* #FFFFFF */ --bg-subtle: var(--color-neutral-950); --bg-elevated: var(--color-neutral-1000); /* cards same as bg; separated by border */ --bg-callout: var(--color-neutral-900); /* #EEEEEF — pullquote wyraźnie ciemniejszy od bieli strony */ --bg-elevated-2: var(--color-neutral-950); --bg-inverse: var(--color-neutral-0); /* Text */ --fg: var(--color-neutral-0); --fg-1: var(--color-neutral-0); --fg-2: var(--color-neutral-300); --fg-3: var(--color-neutral-400); --fg-muted: var(--color-neutral-500); --fg-disabled: var(--color-neutral-600); --fg-inverse: var(--color-neutral-1000); /* Borders */ --border: rgba(10, 10, 11, 0.10); --border-strong: rgba(10, 10, 11, 0.22); --border-subtle: rgba(10, 10, 11, 0.05); --border-brand: var(--color-orange-500); /* Accent — fill stays orange-500, TEXT switches to orange-800 (AA on white) */ --accent: var(--color-orange-500); --accent-on-bg: var(--color-orange-800); /* 6.56:1 on #FFF — AA */ --accent-hover: var(--color-orange-600); --accent-press: var(--color-orange-700); --on-accent: #1A1000; /* Status — text-on-light variants for readability */ --success: var(--color-teal-500); --success-on-bg: var(--color-teal-700); --warning: var(--color-orange-500); --warning-on-bg: var(--color-orange-700); --danger: var(--color-coral-500); --danger-on-bg: var(--color-coral-700); --info: var(--color-claris-blue-500); --info-on-bg: var(--color-claris-blue-600); /* Shadows — softer in light, but actually visible */ --shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.06); --shadow-sm: 0 2px 6px rgba(10, 10, 11, 0.08); --shadow-md: 0 8px 20px rgba(10, 10, 11, 0.10); --shadow-lg: 0 20px 48px rgba(10, 10, 11, 0.14); --shadow-glow: 0 16px 60px rgba(255, 153, 0, 0.34); /* wzmocnione dla CTA hover */ /* Overlays */ --overlay-scrim: rgba(10, 10, 11, 0.40); --overlay-glass: rgba(10, 10, 11, 0.04); /* Header */ --header-bg: rgba(255, 255, 255, 0.78); --header-blur: 16px; } /* ---- System preference fallback (only when author hasn't picked) ---- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: var(--color-neutral-1000); --bg-subtle: var(--color-neutral-950); --bg-elevated: var(--color-neutral-1000); --bg-callout: var(--color-neutral-900); /* #EEEEEF — pullquote wyraźnie ciemniejszy od bieli strony */ --bg-elevated-2: var(--color-neutral-950); --bg-inverse: var(--color-neutral-0); --fg: var(--color-neutral-0); --fg-1: var(--color-neutral-0); --fg-2: var(--color-neutral-300); --fg-3: var(--color-neutral-400); --fg-muted: var(--color-neutral-500); --fg-disabled: var(--color-neutral-600); --fg-inverse: var(--color-neutral-1000); --border: rgba(10, 10, 11, 0.10); --border-strong: rgba(10, 10, 11, 0.22); --border-subtle: rgba(10, 10, 11, 0.05); --accent-on-bg: var(--color-orange-800); --accent-hover: var(--color-orange-600); --accent-press: var(--color-orange-700); --success-on-bg: var(--color-teal-700); --warning-on-bg: var(--color-orange-700); --danger-on-bg: var(--color-coral-700); --info-on-bg: var(--color-claris-blue-600); --shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.06); --shadow-sm: 0 2px 6px rgba(10, 10, 11, 0.08); --shadow-md: 0 8px 20px rgba(10, 10, 11, 0.10); --shadow-lg: 0 20px 48px rgba(10, 10, 11, 0.14); --shadow-glow: 0 12px 40px rgba(255, 153, 0, 0.20); --overlay-scrim: rgba(10, 10, 11, 0.40); --overlay-glass: rgba(10, 10, 11, 0.04); --header-bg: rgba(255, 255, 255, 0.78); } } /* ---- Theme-aware portrait swap (Bartek light/dark photo) ---- */ .portrait-bartek { background-image: url("../img/bartek/bartek_dark.png"); } :root[data-theme="light"] .portrait-bartek, :root:not([data-theme]) .portrait-bartek { /* Default to dark image; light theme overrides below via @media */ } :root[data-theme="light"] .portrait-bartek { background-image: url("../img/bartek/bartek_light.png"); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .portrait-bartek { background-image: url("../img/bartek/bartek_light.png"); } } /* Same swap for uses — handled via JS to avoid downloading both */ /* ---- Logo swap (white wordmark on dark, black on light) ---- */ .logo-img--auto { /* Defaults to white logo */ } :root[data-theme="dark"] .logo-img--auto[data-light] { display: none; } :root[data-theme="dark"] .logo-img--auto[data-dark] { display: inline-block; } :root[data-theme="light"] .logo-img--auto[data-light] { display: inline-block; } :root[data-theme="light"] .logo-img--auto[data-dark] { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .logo-img--auto[data-light] { display: inline-block; } :root:not([data-theme]) .logo-img--auto[data-dark] { display: none; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .logo-img--auto[data-light] { display: none; } :root:not([data-theme]) .logo-img--auto[data-dark] { display: inline-block; } }