/* ============================================================ C64 Modernized Color Palette Accessible (WCAG AA) — both light and dark themes Usage: add data-theme="light" or data-theme="dark" to Default: dark (the C64's natural habitat) ============================================================ */ :root, [data-theme="dark"] { /* --- Backgrounds --- */ --color-bg-page: #1A1A2E; /* deep navy-black — page background */ --color-bg-card: #242438; /* slightly lifted surface */ --color-bg-hover: #2E2E48; /* hover / active state */ --color-bg-border: #3A3A54; /* dividers, rules */ /* --- Text --- */ --color-text-primary: #F0EDE0; /* warm cream — body text */ --color-text-secondary: #B0AEBF; /* light gray — muted / meta */ --color-text-tertiary: #7A7A8A; /* mid gray — placeholders */ /* --- Brand colors (foreground use on dark bg) --- */ --color-blue: #5A7EC5; /* light blue — primary / interactive */ --color-purple: #A07CC8; /* light purple — secondary / accent */ --color-cyan: #3AAFAF; /* light cyan — info */ --color-green: #4AAF70; /* light green — success */ --color-red: #C45E52; /* light red — error */ --color-yellow: #E8AA20; /* amber-yellow — CTA */ --color-orange: #D4784A; /* warm orange — warning */ --color-brown: #A06840; /* tan brown — tag / accent */ /* --- Semantic surfaces (tinted bg + matching text) --- */ --color-bg-info: #1C2E42; --color-text-info: #5A7EC5; --color-bg-success: #1A2E22; --color-text-success: #4AAF70; --color-bg-warning: #2E2210; --color-text-warning: #E8AA20; --color-bg-danger: #2E1C1A; --color-text-danger: #C45E52; /* --- Tag backgrounds --- */ --color-tag-bg-blue: #1E2A3A; --color-tag-bg-purple: #2A1E3A; --color-tag-bg-cyan: #1A2E2E; --color-tag-bg-orange: #2E1E0A; --color-tag-bg-yellow: #2E220A; --color-tag-bg-green: #1E3A1E; } [data-theme="light"] { /* --- Backgrounds --- */ --color-bg-page: #F5F2E8; /* warm cream — page background */ --color-bg-card: #FFFFFF; /* white — card surfaces */ --color-bg-hover: #EAE7D8; /* hover cream — hover / active state */ --color-bg-border: #D9D4C0; /* tan — dividers, rules */ /* --- Text --- */ --color-text-primary: #1A1A2E; /* ink navy — body text 18.9:1 */ --color-text-secondary: #4A4A5A; /* dark gray — muted text 9.1:1 */ --color-text-tertiary: #7A7A8A; /* mid gray — placeholders 4.6:1 */ /* --- Brand colors (foreground use on light bg) --- */ --color-blue: #2456A4; /* blue — primary / interactive 6.2:1 */ --color-purple: #7B4FA6; /* purple — secondary / accent 4.8:1 */ --color-cyan: #1A8C8C; /* cyan — info 4.6:1 */ --color-green: #2E7D4F; /* green — success 5.1:1 */ --color-red: #C0392B; /* red — error 5.3:1 */ --color-yellow: #C8960C; /* amber-yellow — CTA 4.5:1 */ --color-orange: #B85C1A; /* orange — warning 5.4:1 */ --color-brown: #7A4A2A; /* brown — tag / accent 7.1:1 */ /* --- Semantic surfaces (tinted bg + matching text) --- */ --color-bg-info: #EBF1FA; --color-text-info: #2456A4; --color-bg-success: #EAF5F0; --color-text-success: #2E7D4F; --color-bg-warning: #FDF8E8; --color-text-warning: #C8960C; --color-bg-danger: #FBEAEA; --color-text-danger: #C0392B; /* --- Tag backgrounds --- */ --color-tag-bg-blue: #EBF1FA; --color-tag-bg-purple: #F2EBF9; --color-tag-bg-cyan: #E8F7F7; --color-tag-bg-orange: #FDF0E8; --color-tag-bg-yellow: #FDF8E8; --color-tag-bg-green: #EAF5F0; } /* ============================================================ Auto dark mode fallback (if no data-theme attribute is set, respects the OS preference instead) ============================================================ */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg-page: #F5F2E8; --color-bg-card: #FFFFFF; --color-bg-hover: #EAE7D8; --color-bg-border: #D9D4C0; --color-text-primary: #1A1A2E; --color-text-secondary: #4A4A5A; --color-text-tertiary: #7A7A8A; --color-blue: #2456A4; --color-purple: #7B4FA6; --color-cyan: #1A8C8C; --color-green: #2E7D4F; --color-red: #C0392B; --color-yellow: #C8960C; --color-orange: #B85C1A; --color-brown: #7A4A2A; --color-bg-info: #EBF1FA; --color-text-info: #2456A4; --color-bg-success: #EAF5F0; --color-text-success: #2E7D4F; --color-bg-warning: #FDF8E8; --color-text-warning: #C8960C; --color-bg-danger: #FBEAEA; --color-text-danger: #C0392B; --color-tag-bg-blue: #EBF1FA; --color-tag-bg-purple: #F2EBF9; --color-tag-bg-cyan: #E8F7F7; --color-tag-bg-orange: #FDF0E8; --color-tag-bg-yellow: #FDF8E8; --color-tag-bg-green: #EAF5F0; } }