/* ───────────────────────────────────────────────────────────────────── pennapay-theme.css — light/dark token palette for pennapay.com marketing. PennaPay keeps its OWN brand colours: WHITE + SLATE-GRAY + GOLD. This is deliberately NOT the pennasystems.com cream palette (penna-tokens.css / marketing-theme.css → --paper #F5EFE3 / --ink #1B1A17). pennapay marketing pages must NEVER load those; they load THIS instead. Token vocabulary is namespaced --pp-* so there is zero chance of inheriting the cream --paper/--ink even if both stylesheets co-exist on a page (e.g. pricing.html, which also pulls pennasystems-styles.css and maps the cream vocabulary onto these --pp-* values under `body.is-pennapay`). LIGHT values are the canonical pennapay white/slate/gold scheme, taken verbatim from the slate ladder for-freelancers.html already shipped, so tokenising the existing pages reproduces today's light appearance exactly. DARK is a slate-derived deep theme (Rune-chosen direction). Theme is selected by `data-theme` on , set before first paint by the inline FOUC bootstrap in each page's (byte-identical to the #483 dashboard bootstrap), persisted under localStorage 'penna-theme', defaulting to prefers-color-scheme. js/theme-toggle.js flips + persists it. ───────────────────────────────────────────────────────────────────── */ /* Default (no explicit data-theme yet) == light. The FOUC bootstrap always sets one or the other before paint; this is belt-and-suspenders. */ :root, :root[data-theme="light"] { --pp-bg: #ffffff; /* page background */ --pp-surface: #f8fafc; /* slate-50 — section bands, ghost btns */ --pp-surface-2: #f1f5f9; /* slate-100 — subtle raised fills */ --pp-heading: #0f172a; /* slate-900 — headings, strong text */ --pp-text: #1e293b; /* slate-800 — body text, dark wordmark */ --pp-text-2: #475569; /* slate-600 — secondary text */ --pp-text-3: #374151; /* gray-700 — dense list copy */ --pp-muted: #64748b; /* slate-500 — muted/supporting text */ --pp-muted-2: #94a3b8; /* slate-400 — faint notes, captions */ --pp-border: #e2e8f0; /* slate-200 — card / control borders */ --pp-border-2: #e5e7eb; /* gray-200 — hairline rules, nav edge */ --pp-border-3: #cbd5e1; /* slate-300 — stronger borders, dashes */ --pp-accent: #c9a05a; /* PennaPay gold (default accent) */ --pp-accent-strong: #b58a3f; /* darker gold — hover / gradient anchor */ --pp-accent-soft: rgba(201,160,90,.10); /* gold tint backgrounds */ --pp-accent-shadow: rgba(201,160,90,.08); /* gold-tinted hover shadow */ --pp-on-accent: #ffffff; /* text/icons on a gold (or green) fill */ --pp-success: #16a34a; /* green-600 — included/✓ checks */ --pp-danger: #c0392b; /* destructive (logout) text */ --pp-danger-soft: #fff5f5; /* destructive hover background */ --pp-band-dark: #1b1a17; /* intentionally-dark CTA / footer band */ --pp-on-band: #ffffff; /* text on a dark band */ } :root[data-theme="dark"] { --pp-bg: #0f172a; /* slate-900 */ --pp-surface: #1e293b; /* slate-800 */ --pp-surface-2: #273449; /* between 800/700 */ --pp-heading: #f1f5f9; /* slate-100 */ --pp-text: #e2e8f0; /* slate-200 */ --pp-text-2: #cbd5e1; /* slate-300 */ --pp-text-3: #cbd5e1; /* slate-300 */ --pp-muted: #94a3b8; /* slate-400 */ --pp-muted-2: #7c8ba1; /* dimmer caption grey */ --pp-border: #334155; /* slate-700 */ --pp-border-2: #334155; /* slate-700 */ --pp-border-3: #475569; /* slate-600 */ --pp-accent: #c9a05a; /* gold — same brand gold in dark mode */ --pp-accent-strong: #b58a3f; /* hover / gradient anchor */ --pp-accent-soft: rgba(201,160,90,.14); --pp-accent-shadow: rgba(201,160,90,.12); --pp-on-accent: #ffffff; /* white still reads on the gold/green */ --pp-success: #22c55e; /* green-500 — brighter ✓ on slate */ --pp-danger: #f87171; /* red-400 */ --pp-danger-soft: #2a1416; /* deep red wash */ /* The dark bands stay their designed near-black in dark mode too — they read as a slightly deeper deck against the slate page (--pp-bg). */ --pp-band-dark: #14130f; --pp-on-band: #ffffff; } /* ── Theme-toggle button ────────────────────────────────────────────── Ported from marketing-theme.css but token-mapped onto --pp-* so the pennapay pages get the identical toggle without loading the cream stylesheet. js/theme-toggle.js injects the sun + moon glyphs and the .theme-toggle class; CSS shows exactly one per [data-theme]. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--pp-border); border-radius: 999px; background: transparent; color: var(--pp-text-2); cursor: pointer; line-height: 0; flex-shrink: 0; transition: color .15s, border-color .15s; } .theme-toggle:hover { color: var(--pp-heading); border-color: var(--pp-heading); } .theme-toggle:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* Show moon in light mode (→ click to go dark), sun in dark mode (→ light). */ .theme-toggle .ic-sun { display: none; } .theme-toggle .ic-moon { display: block; } :root[data-theme="dark"] .theme-toggle .ic-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }