/* Shared dark-theme tokens: surfaces, borders, text, controls and semantic state. */ :root { color-scheme: dark; /* Neutral surfaces; additive grain lifts their effective brightness. */ --surface-base: #0a0a0a; --surface-sidebar: #080808; --surface-sunken: #0e0e0e; --surface-raised: #131313; --surface-hover: rgba(255, 255, 255, 0.05); --surface-active: rgba(255, 255, 255, 0.075); --surface-gradient: linear-gradient(51deg, #0a0a0a, #141414); /* Hairlines. The UI leans on 1px separation rather than shadow. */ --line: #222222; --line-strong: #2e2e2e; /* Foregrounds. */ --text: #fafafa; --text-muted: #a0a0a0; --text-faint: #8c8c8c; /* Neutral interactive accent. Dark --on-accent text preserves contrast on danger fills. */ --accent: #e6e6e6; --accent-bright: #ffffff; --accent-soft: rgba(255, 255, 255, 0.10); --on-accent: #0a0a0a; /* Tinted controls derive their fill and edge from --tint; keep texture off glossy faces. */ /* Unused since the actions became one matte pad. Kept as the default any future tinted control would inherit. */ --tint: var(--accent); /* Shared lighting direction: above and slightly left. */ /* Recessed fields/tracks invert the raised surface's lit and shadowed edges. */ --recessed: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 2px 5px -2px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.045); /* Raised knobs, thumbs and small tiles: lit above, shadowed below. */ --raised: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 8px -2px rgba(0, 0, 0, 0.35); /* Glass overlays combine blur with a lit edge and inset rim shadow. */ --glass-blur: blur(22px) saturate(1.5); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 -1px 0 rgba(0, 0, 0, 0.35), inset 0 8px 22px -14px rgba(255, 255, 255, 0.16); /* Metallic action sheen moves by transform to avoid repainting the face. */ --metal-face: linear-gradient( 177deg, rgba(255, 255, 255, 0.115) 0%, rgba(255, 255, 255, 0.075) 34%, rgba(255, 255, 255, 0.035) 62%, rgba(0, 0, 0, 0.06) 100% ); --metal-edge: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.055), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); --metal-sheen: linear-gradient( 100deg, transparent 12%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.08) 58%, transparent 88% ); /* State. */ /* Chart colors are separate from semantic error colors. */ --series-temp: #ff5f57; --series-temp-soft: rgba(255, 95, 87, 0.7); /* Usage is the other half of the same chart and had no token: it was drawn in --accent-bright, so the two series were told apart by shape alone. Blue against the temperature red, and the same blue the Home cards already use, so the app agrees with itself. */ --series-usage: #4f9cf9; --series-usage-soft: rgba(79, 156, 249, 0.7); --ok: #55c785; --ok-soft: rgba(85, 199, 133, 0.14); --warn: #dda44f; --warn-soft: rgba(221, 164, 79, 0.14); --danger: #e5686d; --danger-soft: rgba(229, 104, 109, 0.14); /* Higher-contrast text for danger-soft fills; marks retain the stronger hue. */ --danger-text: #f0949a; /* Layers that float above the page, lighter than any card so their edges remain visible against whatever they cover. */ --surface-floating: #181818; --line-raised: #3a3a3a; /* Overlay and focus. */ --overlay: rgba(0, 0, 0, 0.38); --focus-ring: #ffffff; /* Inline textures require no fetch. Composite grain normally, not with blend * modes that suppress it on dark surfaces. Use --grain-layer; bias/gain sets * coverage, while gain sets speck brightness. */ --texture-dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='%23fff'%3E%3Crect x='0' y='0' width='4' height='4' opacity='0.22'/%3E%3Crect x='18' y='0' width='4' height='4' opacity='0.8'/%3E%3Crect x='24' y='0' width='4' height='4' opacity='0.22'/%3E%3Crect x='36' y='0' width='4' height='4' opacity='0.45'/%3E%3Crect x='42' y='0' width='4' height='4' opacity='0.8'/%3E%3Crect x='6' y='6' width='4' height='4' opacity='0.8'/%3E%3Crect x='24' y='6' width='4' height='4' opacity='0.8'/%3E%3Crect x='6' y='12' width='4' height='4' opacity='0.22'/%3E%3Crect x='12' y='12' width='4' height='4' opacity='0.8'/%3E%3Crect x='18' y='12' width='4' height='4' opacity='0.45'/%3E%3Crect x='24' y='12' width='4' height='4' opacity='0.22'/%3E%3Crect x='36' y='12' width='4' height='4' opacity='0.22'/%3E%3Crect x='6' y='18' width='4' height='4' opacity='0.45'/%3E%3Crect x='18' y='18' width='4' height='4' opacity='0.45'/%3E%3Crect x='36' y='18' width='4' height='4' opacity='0.22'/%3E%3Crect x='42' y='18' width='4' height='4' opacity='0.22'/%3E%3Crect x='0' y='24' width='4' height='4' opacity='0.45'/%3E%3Crect x='6' y='24' width='4' height='4' opacity='0.45'/%3E%3Crect x='12' y='24' width='4' height='4' opacity='0.45'/%3E%3Crect x='18' y='24' width='4' height='4' opacity='0.22'/%3E%3Crect x='42' y='24' width='4' height='4' opacity='0.22'/%3E%3Crect x='12' y='30' width='4' height='4' opacity='0.45'/%3E%3Crect x='24' y='30' width='4' height='4' opacity='0.45'/%3E%3Crect x='30' y='30' width='4' height='4' opacity='0.22'/%3E%3Crect x='0' y='36' width='4' height='4' opacity='0.22'/%3E%3Crect x='18' y='36' width='4' height='4' opacity='0.45'/%3E%3Crect x='24' y='36' width='4' height='4' opacity='0.22'/%3E%3Crect x='36' y='36' width='4' height='4' opacity='0.22'/%3E%3Crect x='42' y='36' width='4' height='4' opacity='0.22'/%3E%3Crect x='6' y='42' width='4' height='4' opacity='0.22'/%3E%3Crect x='24' y='42' width='4' height='4' opacity='0.22'/%3E%3C/svg%3E"); --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.0875 0.0875 0 0 -0.085'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); --texture-grain-size: 220px; /* Card texture: background: var(--grain-layer), var(--surface-raised). * Strength is baked into the tile; background layers have no opacity property. */ --grain-layer: var(--texture-grain) 0 0 / var(--texture-grain-size) var(--texture-grain-size) repeat; /* Complete card surface: grain over a subtle tonal gradient. */ --card: var(--grain-layer), linear-gradient(158deg, #151515 0%, #141414 46%, #131313 100%); --texture-dither-size: 48px; /* Shape. */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; /* Card corner radii. */ --radius-xl: 26px; /* Pill radius for controls that opt into it. */ --radius-pill: 999px; /* The soft field. One blur radius and one mark size across the app, so the heroes read as the same object in different colours rather than as several unrelated decorations. */ --field-blur: 46px; --field-height: 168px; --mark-size: 68px; /* Type. The face ships with the app; the stack after it is a local fallback so a missing font file degrades rather than breaking layout. */ --font: "Cal Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; --font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace; /* Motion. Durations are frame-aligned at 60Hz (5, 10, 15 frames). */ --motion-press: 83ms; --motion-fast: 167ms; --motion-normal: 250ms; --ease-out: cubic-bezier(0, 0, 0, 1); /* Layout constants shared between the shell and its views. */ --titlebar-height: 44px; --sidebar-width: 244px; /* Stacking order, declared once so no component invents its own z-index. */ --z-sticky: 10; --z-titlebar: 20; --z-flyout: 40; --z-backdrop: 80; --z-modal: 90; /* Tooltips must appear above their modal controls but below toasts. */ --z-tooltip: 95; --z-toast: 100; } /* Users who ask the OS for less motion get none of the decorative kind. */ @media (prefers-reduced-motion: reduce) { :root { --motion-press: 0ms; --motion-fast: 0ms; --motion-normal: 0ms; } }