/* Design tokens for the whole site: the SPA imports this file into its bundle (src/assets/style.css), the Flask templates link it via asset_url(). One copy. Colours are HSL triplets so `hsl(var(--x) / alpha)` works everywhere. Same system as chempirical.com and martymonero.com; the accent is Pinterest pink, darker in light for contrast, brighter in dark. Theme: data-theme on , else the system. */ @font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --background: 240 20% 99%; --background-subtle: 240 12.5% 96.9%; --card: 0 0% 100%; --popover: 0 0% 100%; --surface-raised: 240 10% 96.1%; --surface-hover: 240 9.7% 93.9%; --border: 240 10.6% 90.8%; --border-strong: 240 8.9% 84.5%; --input: 240 10.6% 90.8%; --foreground: 220 10.3% 5.7%; --card-foreground: 220 10.3% 5.7%; --popover-foreground: 220 10.3% 5.7%; --muted: 240 10% 96.1%; --muted-foreground: 222 6.5% 39%; --subtle: 220 5.6% 42.4%; --primary: 220 8.1% 7.3%; --primary-foreground: 0 0% 100%; --secondary: 240 10% 96.1%; --secondary-foreground: 220 10.3% 5.7%; --accent: 334 73.6% 46.1%; --accent-foreground: 0 0% 100%; --accent-text: 335 77.6% 42%; --partner: 262 83.3% 57.8%; --ring: 334 73.6% 46.1%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 0 0% 100%; --success: 142 71.8% 29.2%; --warning: 26 90.5% 37.1%; --info: 221 83.2% 53.3%; --grid-line: rgb(15 16 20 / 0.05); --glow: rgb(204 31 107 / 0.12); --elevation-small: 0 1px 2px rgb(16 17 20 / 0.06); --elevation-medium: 0 4px 16px -4px rgb(16 17 20 / 0.12), 0 1px 3px rgb(16 17 20 / 0.06); --elevation-large: 0 24px 64px -16px rgb(16 17 20 / 0.28), 0 2px 8px rgb(16 17 20 / 0.08); --highlight: inset 0 1px 0 rgb(255 255 255 / 0.6); --header-height: 56px; --content-width: 1280px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: 210 11.1% 3.5%; --background-subtle: 220 11.1% 5.3%; --card: 220 8.1% 7.3%; --popover: 225 8.3% 9.4%; --surface-raised: 225 8.3% 9.4%; --surface-hover: 228 8.2% 12%; --border: 230 7.9% 14.9%; --border-strong: 225 7.8% 20%; --input: 225 7.8% 20%; --foreground: 240 10% 96.1%; --card-foreground: 240 10% 96.1%; --popover-foreground: 240 10% 96.1%; --muted: 225 8.3% 9.4%; --muted-foreground: 224 6% 64.1%; --subtle: 225 4.8% 51%; --primary: 240 10% 96.1%; --primary-foreground: 240 4.3% 4.5%; --secondary: 225 8.3% 9.4%; --secondary-foreground: 240 10% 96.1%; --accent: 329 85.5% 70.2%; --accent-foreground: 328 63.2% 7.5%; --accent-text: 327 87.1% 81.8%; --partner: 255 91.7% 76.3%; --ring: 329 85.5% 70.2%; --destructive: 0 90.6% 70.8%; --destructive-foreground: 0 0% 4%; --success: 142 69.2% 58%; --warning: 43 96.4% 56.3%; --info: 222 100% 73.9%; --grid-line: rgb(255 255 255 / 0.035); --glow: rgb(244 114 182 / 0.1); --elevation-small: 0 1px 2px rgb(0 0 0 / 0.4); --elevation-medium: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.4); --elevation-large: 0 32px 80px -16px rgb(0 0 0 / 0.75), 0 2px 10px rgb(0 0 0 / 0.5); --highlight: inset 0 1px 0 rgb(255 255 255 / 0.04); color-scheme: dark; } } :root[data-theme="dark"] { --background: 210 11.1% 3.5%; --background-subtle: 220 11.1% 5.3%; --card: 220 8.1% 7.3%; --popover: 225 8.3% 9.4%; --surface-raised: 225 8.3% 9.4%; --surface-hover: 228 8.2% 12%; --border: 230 7.9% 14.9%; --border-strong: 225 7.8% 20%; --input: 225 7.8% 20%; --foreground: 240 10% 96.1%; --card-foreground: 240 10% 96.1%; --popover-foreground: 240 10% 96.1%; --muted: 225 8.3% 9.4%; --muted-foreground: 224 6% 64.1%; --subtle: 225 4.8% 51%; --primary: 240 10% 96.1%; --primary-foreground: 240 4.3% 4.5%; --secondary: 225 8.3% 9.4%; --secondary-foreground: 240 10% 96.1%; --accent: 329 85.5% 70.2%; --accent-foreground: 328 63.2% 7.5%; --accent-text: 327 87.1% 81.8%; --partner: 255 91.7% 76.3%; --ring: 329 85.5% 70.2%; --destructive: 0 90.6% 70.8%; --destructive-foreground: 0 0% 4%; --success: 142 69.2% 58%; --warning: 43 96.4% 56.3%; --info: 222 100% 73.9%; --grid-line: rgb(255 255 255 / 0.035); --glow: rgb(244 114 182 / 0.1); --elevation-small: 0 1px 2px rgb(0 0 0 / 0.4); --elevation-medium: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.4); --elevation-large: 0 32px 80px -16px rgb(0 0 0 / 0.75), 0 2px 10px rgb(0 0 0 / 0.5); --highlight: inset 0 1px 0 rgb(255 255 255 / 0.04); color-scheme: dark; }