/* ============================================================ DARK THEME — "Daybreak After Dark" The same Colorful Daybreak palette, inverted onto a deep violet-black surface. Applied when the root carries data-theme="dark" (set by the no-flash script in ), and — for no-JS visitors — when the OS asks for dark and the reader has not explicitly chosen light. NOTE: the two token blocks below are intentional twins. Keep them in sync: the first serves the explicit/stored choice, the second the OS preference without JavaScript. ============================================================ */ [data-theme="dark"] { color-scheme: dark; /* Primary scale is inverted: the 50–300 steps become dark surfaces, the 700–950 steps become light ink, so every component that tints with them flips automatically. */ --color-primary-50: #1B1636; --color-primary-100: #241D47; --color-primary-200: #2E2559; --color-primary-300: #3B2F72; --color-primary-400: #A78BFA; --color-primary-500: #A78BFA; --color-primary-600: #C4B5FD; --color-primary-700: #D5C9FF; --color-primary-800: #E4DBFF; --color-primary-900: #F1ECFF; --color-primary-950: #FAF8FF; --color-accent-100: #3A2E12; --color-accent-200: #4A3A16; --color-accent-300: #FDE047; --color-accent-400: #FACC15; --color-accent-500: #FBBF24; --color-accent-600: #FCD34D; --color-orange-400: #FDBA74; --color-orange-500: #FB923C; --color-orange-600: #FDBA74; --color-bg: #12101F; --color-bg-secondary: #191530; --color-surface: #1D1838; --color-border: #362F5C; --color-border-accent: #5A4A9C; --color-text: #F4F1FF; --color-text-body: #D8D1F2; --color-text-muted: #ADA5CC; --color-code-bg: #1B1733; --color-code-border: #3A3164; --color-link: #C4B5FD; --color-link-hover: #FDBA74; --color-cta-primary: #8B5CF6; --color-cta-hover: #A78BFA; --gradient-brand-soft: linear-gradient(135deg, #2A2154 0%, #3A2E12 100%); --gradient-hero: linear-gradient(135deg, #100C24 0%, #2E1065 45%, #5B21B6 75%, #B45309 100%); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.65); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-primary-50: #1B1636; --color-primary-100: #241D47; --color-primary-200: #2E2559; --color-primary-300: #3B2F72; --color-primary-400: #A78BFA; --color-primary-500: #A78BFA; --color-primary-600: #C4B5FD; --color-primary-700: #D5C9FF; --color-primary-800: #E4DBFF; --color-primary-900: #F1ECFF; --color-primary-950: #FAF8FF; --color-accent-100: #3A2E12; --color-accent-200: #4A3A16; --color-accent-300: #FDE047; --color-accent-400: #FACC15; --color-accent-500: #FBBF24; --color-accent-600: #FCD34D; --color-orange-400: #FDBA74; --color-orange-500: #FB923C; --color-orange-600: #FDBA74; --color-bg: #12101F; --color-bg-secondary: #191530; --color-surface: #1D1838; --color-border: #362F5C; --color-border-accent: #5A4A9C; --color-text: #F4F1FF; --color-text-body: #D8D1F2; --color-text-muted: #ADA5CC; --color-code-bg: #1B1733; --color-code-border: #3A3164; --color-link: #C4B5FD; --color-link-hover: #FDBA74; --color-cta-primary: #8B5CF6; --color-cta-hover: #A78BFA; --gradient-brand-soft: linear-gradient(135deg, #2A2154 0%, #3A2E12 100%); --gradient-hero: linear-gradient(135deg, #100C24 0%, #2E1065 45%, #5B21B6 75%, #B45309 100%); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.65); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.35); } } /* ── Surfaces that hardcode a light value in the base sheets ── */ [data-theme="dark"] .site-header, :root:not([data-theme="light"]) .site-header { background: rgba(18, 16, 31, 0.92); border-bottom-color: var(--color-border); } [data-theme="dark"] .main-nav, :root:not([data-theme="light"]) .main-nav { background: rgba(21, 18, 40, 0.97); } /* The footer is already an inverted surface in light mode; in dark it must invert the other way or it becomes the brightest thing on the page. */ [data-theme="dark"] .site-footer { background: #0D0A1A; color: var(--color-text-body); border-top: 1px solid var(--color-border); } [data-theme="dark"] .footer-tagline, [data-theme="dark"] .footer-col a { color: #C3BBE2; } [data-theme="dark"] .footer-col h4 { color: #FCD34D; } [data-theme="dark"] .footer-col a:hover { color: #FDBA74; } [data-theme="dark"] .footer-bottom { color: #A79FC7; } [data-theme="dark"] .footer-grid { border-bottom-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .topic-icon--orange { background: #4A3A16; } [data-theme="dark"] .topic-icon--teal { background: #123528; } /* ── Code blocks ── */ [data-theme="dark"] pre[class*="language-"], [data-theme="dark"] pre { background: #16122B; border-color: var(--color-code-border); } [data-theme="dark"] code[class*="language-"], [data-theme="dark"] pre[class*="language-"] code { color: #EDE9FE; } [data-theme="dark"] .token.comment, [data-theme="dark"] .token.prolog, [data-theme="dark"] .token.doctype, [data-theme="dark"] .token.cdata { color: #A79FC7; } [data-theme="dark"] .token.punctuation { color: #C4B5FD; } [data-theme="dark"] .token.property, [data-theme="dark"] .token.tag, [data-theme="dark"] .token.constant, [data-theme="dark"] .token.symbol, [data-theme="dark"] .token.deleted { color: #FCA5A5; } [data-theme="dark"] .token.boolean, [data-theme="dark"] .token.number, [data-theme="dark"] .token.selector, [data-theme="dark"] .token.attr-name, [data-theme="dark"] .token.string, [data-theme="dark"] .token.char, [data-theme="dark"] .token.builtin, [data-theme="dark"] .token.inserted { color: #6EE7B7; } [data-theme="dark"] .token.operator, [data-theme="dark"] .token.entity, [data-theme="dark"] .token.url, [data-theme="dark"] .token.variable { color: #FCD34D; } [data-theme="dark"] .token.atrule, [data-theme="dark"] .token.attr-value, [data-theme="dark"] .token.keyword, [data-theme="dark"] .token.function, [data-theme="dark"] .token.class-name { color: #C4B5FD; } [data-theme="dark"] .token.regex, [data-theme="dark"] .token.important { color: #FDBA74; } /* ============================================================ INLINE SVG INTERIORS The `svg-theme-vars` build transform rewrites every authored fill/stroke hex in the article body to var(--svg-, ) — light keeps the authored colour through the fallback, and the dark theme redirects it here. Roles: t = label ink, f = shape fill, s = stroke. ============================================================ */ [data-theme="dark"] { /* label ink → lightened so it reads on the dark canvas */ --svgt-1c1917: #EDE9FE; --svgt-1a1a1a: #EDE9FE; --svgt-1e1b4b: #EDE9FE; --svgt-312e81: #EDE9FE; --svgt-4c1d95: #EDE9FE; --svgt-5b21b6: #EDE9FE; --svgt-4338ca: #EDE9FE; --svgt-2e1065: #EDE9FE; --svgt-6b7280: #B9B1D8; --svgt-9ca3af: #B9B1D8; --svgt-696878: #B9B1D8; --svgt-7c3aed: #C4B5FD; --svgt-6d28d9: #C4B5FD; --svgt-8b5cf6: #C4B5FD; --svgt-a78bfa: #C4B5FD; --svgt-b45309: #FCD34D; --svgt-92400e: #FCD34D; --svgt-d97706: #FCD34D; --svgt-c76b00: #FCD34D; --svgt-f59e0b: #FCD34D; --svgt-b84f08: #FCD34D; --svgt-fbbf24: #FCD34D; --svgt-ca8a04: #FCD34D; --svgt-c2410c: #FDBA74; --svgt-ea580c: #FDBA74; --svgt-f97316: #FDBA74; --svgt-fb923c: #FDBA74; --svgt-b91c1c: #FCA5A5; --svgt-7f1d1d: #FCA5A5; --svgt-dc2626: #FCA5A5; --svgt-b00020: #FCA5A5; --svgt-ef4444: #FCA5A5; --svgt-f87171: #FCA5A5; --svgt-047857: #6EE7B7; --svgt-065f46: #6EE7B7; --svgt-059669: #6EE7B7; --svgt-16a34a: #6EE7B7; --svgt-1a7a1a: #6EE7B7; --svgt-22c55e: #6EE7B7; --svgt-10b981: #6EE7B7; --svgt-34d399: #6EE7B7; --svgt-52b052: #6EE7B7; --svgt-0369a1: #7DD3FC; --svgt-005fa3: #7DD3FC; /* shape fills → light card interiors become dark panels */ --svgf-faf8ff: #241D47; --svgf-faf7ff: #241D47; --svgf-f3f0ff: #241D47; --svgf-f5e6ff: #241D47; --svgf-ede8fb: #241D47; --svgf-ede9fe: #241D47; --svgf-fdfcff: #241D47; --svgf-f5f3ff: #241D47; --svgf-fefefe: #241D47; --svgf-e0d7f7: #2E2559; --svgf-f8fafc: #2E2559; --svgf-c4b5fd: #2E2559; --svgf-ddd6fe: #2E2559; --svgf-e2e0f0: #2E2559; --svgf-fefce8: #45350F; --svgf-fef3c7: #45350F; --svgf-ffedd5: #45350F; --svgf-ffe8cc: #45350F; --svgf-fef9c3: #45350F; --svgf-fef08a: #45350F; --svgf-e9f7e9: #123528; --svgf-d1fae5: #123528; --svgf-dff0ff: #14253D; --svgf-e0f2fe: #14253D; --svgf-ffd6d6: #401A1A; --svgf-fca5a5: #401A1A; --svgf-fee2e2: #401A1A; --svgf-ffffff: #1D1838; --svgf-1c1917: #322A5C; --svgf-1a1a1a: #322A5C; --svgf-1e1b4b: #322A5C; --svgf-312e81: #322A5C; /* hairlines drawn for a light canvas */ --svgs-e0d7f7: #4A3F78; --svgs-ede9fe: #4A3F78; --svgs-c4b5fd: #4A3F78; --svgs-ddd6fe: #4A3F78; --svgs-f3f0ff: #4A3F78; --svgs-e2e0f0: #4A3F78; --svgs-6b7280: #9A92BC; --svgs-9ca3af: #9A92BC; --svgs-1e1b4b: #B9B1D8; --svgs-1c1917: #B9B1D8; --svgs-312e81: #B9B1D8; --svgs-1a1a1a: #B9B1D8; }