/* Semantic color tokens. Light at :root, dark under .dark — dark mode keys off a .dark class on , never prefers-color-scheme. Values are verbatim from styles/canvas.css in bnannier/canvas. */ :root{ --background:oklch(1 0 0); --foreground:oklch(0.141 0.005 285.823); --card:oklch(1 0 0); --card-foreground:oklch(0.141 0.005 285.823); --popover:oklch(1 0 0); --popover-foreground:oklch(0.141 0.005 285.823); --primary:oklch(0.511 0.262 276.966); --primary-foreground:oklch(0.985 0 0); --secondary:oklch(0.967 0.001 286.375); --secondary-foreground:oklch(0.21 0.006 285.885); --muted:oklch(0.967 0.001 286.375); --muted-foreground:oklch(0.552 0.016 285.938); --accent:oklch(0.967 0.001 286.375); --accent-foreground:oklch(0.21 0.006 285.885); --destructive:oklch(0.577 0.245 27.325); --destructive-foreground:oklch(0.985 0 0); --success:oklch(0.627 0.17 149.214); --success-foreground:oklch(1 0 0); --warning:oklch(0.666 0.157 58.318); --warning-foreground:oklch(1 0 0); --border:oklch(0.92 0.004 286.32); --input:oklch(0.92 0.004 286.32); /* The focus ring is ONE value in both schemes (indigo-500), not the per-scheme primary. It has to read against a light page, a dark page, and the primary fill itself, and a ring equal to that fill disappears on the control it is marking. */ --ring:oklch(0.585 0.233 277.117); /* Data-viz series palette. Fixed assignment order — series 1 is always chart-1, never re-ranked when a series is filtered out. Same values in both schemes. */ --chart-1:#6366f1; --chart-2:#0d9488; --chart-3:#ea580c; --chart-4:#f43f5e; --chart-5:#8b5cf6; --chart-6:#0891b2; --chart-7:#059669; --chart-8:#ec4899; /* Brand constants (do not flip with theme): avatar gradient, sign-in orbs. */ --orb-indigo:#6366f1; --orb-violet:#8b5cf6; --orb-cyan:#06b6d4; /* Stats delta tone: a rise is green-600, a decline red-600 (400 in dark). */ --p-menu-destructive:#dc2626; --panel-danger:#b91c1c; --delta-up:#16a34a; --delta-down:#dc2626; /* Glass: the FUNCTIONAL layer's material (bars, sheets, popovers, controls) floating above the content layer, which stays solid. It is a LENS, not a frost: the bend concentrates at the RIM, so a pane's centre is flat and the highlight rings the edge. `--glass-lens` is that filter (the page supplies #cds-glass-lens), `--glass-frost` the fallback where SVG backdrop filters are unavailable. Why, and the per-platform build: src/style/glass-surface. */ --glass-tint:rgba(255,255,255,0.20); --glass-blur:28px; --glass-frost:blur(28px) saturate(190%) /* @kind other */; --glass-lens:url(#cds-glass-lens) /* @kind other */; --glass-illumination:radial-gradient(130% 130% at 50% 50%,rgba(255,255,255,0) 54%,rgba(255,255,255,0.14) 88%,rgba(255,255,255,0.30) 100%) /* @kind other */; --glass-edge:rgba(255,255,255,0.62); --glass-specular:inset 1.5px 1.5px 0 rgba(255,255,255,0.90),inset -1.5px -1.5px 0 rgba(255,255,255,0.30),inset 0 0 10px rgba(255,255,255,0.20),0 10px 34px rgba(0,0,0,0.15) /* @kind shadow */; /* Scroll edge effect: content dissolves into the backdrop as it passes under a floating bar, which is what keeps the bar's labels legible over moving content. */ --glass-scroll-edge:76px /* @kind shadow */; } .dark{ --background:oklch(0.141 0.005 285.823); --foreground:oklch(0.985 0 0); --card:oklch(0.21 0.006 285.885); --card-foreground:oklch(0.985 0 0); --popover:oklch(0.21 0.006 285.885); --popover-foreground:oklch(0.985 0 0); --primary:oklch(0.585 0.233 277.117); --primary-foreground:oklch(0.985 0 0); --secondary:oklch(0.274 0.006 286.033); --secondary-foreground:oklch(0.985 0 0); --muted:oklch(0.274 0.006 286.033); --muted-foreground:oklch(0.705 0.015 286.067); --accent:oklch(0.274 0.006 286.033); --accent-foreground:oklch(0.985 0 0); --destructive:oklch(0.704 0.191 22.216); --destructive-foreground:oklch(0.985 0 0); --success:oklch(0.723 0.192 149.579); --success-foreground:oklch(0.266 0.063 152.934); --warning:oklch(0.769 0.165 70.08); --warning-foreground:oklch(0.279 0.074 45.635); --border:oklch(0.274 0.006 286.033); --input:oklch(0.274 0.006 286.033); --ring:oklch(0.585 0.233 277.117); --p-menu-destructive:#f87171; /* iOS resolves its drawer scrim per scheme: 0.2 light, 0.48 dark. */ --panel-danger:#f87171; --delta-up:#4ade80; --delta-down:#f87171; /* Dark glass: less light behind it to bend, so the tint drops further and the rim carries more of the read. Apple's dark material is dimmer, not brighter. */ --glass-tint:rgba(22,22,28,0.30); --glass-frost:blur(28px) saturate(200%) /* @kind other */; --glass-illumination:radial-gradient(130% 130% at 50% 50%,rgba(255,255,255,0) 54%,rgba(255,255,255,0.05) 88%,rgba(255,255,255,0.13) 100%) /* @kind other */; --glass-edge:rgba(255,255,255,0.20); --glass-specular:inset 1.5px 1.5px 0 rgba(255,255,255,0.24),inset -1.5px -1.5px 0 rgba(255,255,255,0.07),inset 0 0 10px rgba(255,255,255,0.06),0 12px 38px rgba(0,0,0,0.50) /* @kind shadow */; }