/* de Verteuil — theme tokens. Light is the default palette on :root; .dark redefines the same names. Tailwind's config maps every color to var(--token), so flipping the class on repaints the whole site without any dark: variants in markup. */ :root { color-scheme: light; --surface: #fbf9f8; --background: #fbf9f8; --surface-bright: #fbf9f8; --surface-dim: #dbd9d9; --surface-variant: #e4e2e2; --surface-container-lowest: #ffffff; --surface-container-low: #f5f3f3; --surface-container: #efeded; --surface-container-high: #eae8e7; --surface-container-highest: #e4e2e2; --surface-tint: #5f5e5e; --primary: #000000; --on-primary: #ffffff; --primary-container: #1c1b1b; --on-primary-container: #858383; --primary-fixed: #e5e2e1; --primary-fixed-dim: #c8c6c5; --on-primary-fixed: #1c1b1b; --on-primary-fixed-variant: #474746; --inverse-primary: #c8c6c5; --secondary: #5e5e5d; --on-secondary: #ffffff; --secondary-container: #e0dfde; --on-secondary-container: #626361; --secondary-fixed: #e3e2e0; --secondary-fixed-dim: #c7c6c5; --on-secondary-fixed: #1a1c1b; --on-secondary-fixed-variant: #464746; --tertiary: #000000; --on-tertiary: #ffffff; --tertiary-container: #0d1e20; --on-tertiary-container: #758789; --tertiary-fixed: #d3e6e8; --tertiary-fixed-dim: #b7cacc; --on-tertiary-fixed: #0d1e20; --on-tertiary-fixed-variant: #384a4c; --on-surface: #1b1c1c; --on-surface-variant: #444748; --on-background: #1b1c1c; --inverse-surface: #303030; --inverse-on-surface: #f2f0f0; --outline: #747878; --outline-variant: #c4c7c7; --error: #ba1a1a; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #93000a; /* Editorial imagery sits on paper in light mode. */ --figure-blend: multiply; --figure-opacity: 0.9; } html.dark { color-scheme: dark; --surface: #121313; --background: #121313; --surface-bright: #383a3a; --surface-dim: #0d0e0e; --surface-variant: #43474a; --surface-container-lowest: #0c0e0e; --surface-container-low: #1a1b1b; --surface-container: #1e1f1f; --surface-container-high: #282929; --surface-container-highest: #333434; --surface-tint: #c8c6c5; /* primary inverts: it is the ink of the page and the fill of every CTA */ --primary: #f2f0ef; --on-primary: #1b1c1c; --primary-container: #e5e2e1; --on-primary-container: #858383; --primary-fixed: #e5e2e1; --primary-fixed-dim: #c8c6c5; --on-primary-fixed: #1c1b1b; --on-primary-fixed-variant: #474746; --inverse-primary: #1b1c1c; --secondary: #a4a3a1; --on-secondary: #1b1c1c; --secondary-container: #464746; --on-secondary-container: #d6d4d2; --secondary-fixed: #e3e2e0; --secondary-fixed-dim: #c7c6c5; --on-secondary-fixed: #1a1c1b; --on-secondary-fixed-variant: #c7c6c5; --tertiary: #f2f0ef; --on-tertiary: #1b1c1c; --tertiary-container: #384a4c; --on-tertiary-container: #b7cacc; --tertiary-fixed: #d3e6e8; --tertiary-fixed-dim: #b7cacc; --on-tertiary-fixed: #0d1e20; --on-tertiary-fixed-variant: #b7cacc; --on-surface: #e4e2e0; --on-surface-variant: #bfc2c3; --on-background: #e4e2e0; --inverse-surface: #e4e2e0; --inverse-on-surface: #303030; --outline: #8e9192; --outline-variant: #3c3f40; --error: #ffb4ab; --on-error: #690005; --error-container: #93000a; --on-error-container: #ffdad6; /* Multiply against a dark ground crushes the image to black. */ --figure-blend: normal; --figure-opacity: 0.72; } /* Editorial figures follow the theme rather than the utility class. */ .dark img.mix-blend-multiply, img.mix-blend-multiply { mix-blend-mode: var(--figure-blend); opacity: var(--figure-opacity); } html.dark img[src$="alex.png"] { opacity: 0.92; } /* Theme toggle */ .dv-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--secondary); background: transparent; border: 1px solid transparent; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease; } .dv-theme-toggle:hover { color: var(--primary); } .dv-theme-toggle:focus-visible { outline: none; border-color: var(--outline); color: var(--primary); } .dv-theme-toggle svg { width: 18px; height: 18px; display: block; } .dv-theme-toggle .dv-icon-moon { display: none; } html.dark .dv-theme-toggle .dv-icon-moon { display: block; } html.dark .dv-theme-toggle .dv-icon-sun { display: none; } @media (prefers-reduced-motion: reduce) { .dv-theme-toggle { transition: none; } }