/*
* Design token CSS custom properties for nexus-modular.
*
* SELECTOR BRIDGE NOTE:
* The Vitessce style guides reference [data-theme="light"] (Vitessce convention).
* This application uses [data-mantine-color-scheme="light"] (Mantine's attribute,
* toggled automatically by MantineProvider when the user switches color scheme).
* They are equivalent for our purposes. Do NOT introduce a data-theme attribute
* on — that would cause double-toggling with Mantine's own attribute.
*
* Dark mode values are the :root defaults (Catppuccin Mocha-derived palette).
* Light mode values override under [data-mantine-color-scheme="light"].
*/
/* ─── Dark mode defaults ─────────────────────────────────────────────────── */
:root {
/* Fonts */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Backgrounds */
--color-canvas: #10131f;
--color-app: #1c1f30;
--color-subtle: #131623;
--color-surface: #2f3346;
--color-elevated: #42485d;
--color-overlay: #545c74;
/* Text */
--color-text-primary: #ccdbf5;
--color-text-secondary: #b8c6e0;
--color-text-muted: #a3b0cb;
--color-text-faint: #7a86a1;
--color-text-ghost: #67718b;
--color-text-on-accent: #1c1f30;
/* Borders */
--color-border-strong: #545c74;
--color-border-default: #42485d;
--color-border-subtle: #2f3346;
/* Accent */
--color-accent: #7eadfb;
--color-accent-hover: #6a9ef0;
--color-accent-soft: #b3c7ff;
/* Semantic */
--color-success: #a6e3a1;
--color-warning: #f9e2af;
--color-error: #f38ba8;
--color-info: #89dceb;
/* Palette (Catppuccin Mocha) */
--color-ctp-teal: #94e2d5;
--color-ctp-peach: #fab387;
--color-ctp-sky: #89dceb;
--color-ctp-sapphire: #74c7ec;
--color-ctp-green: #a6e3a1;
--color-ctp-yellow: #f9e2af;
--color-ctp-red: #f38ba8;
--color-ctp-maroon: #eba0ac;
--color-ctp-mauve: #7eadfb;
--color-ctp-blue: #87c2fc;
--color-ctp-lavender: #b3c7ff;
}
/* ─── Motion tokens ─────────────────────────────────────────────────────── */
/*
* Use these in framer-motion via:
* getComputedStyle(document.documentElement).getPropertyValue('--motion-duration-normal')
* rather than hardcoding 0.15 / 200 in transition objects.
*/
:root {
--motion-duration-fast: 130ms;
--motion-duration-normal: 150ms;
--motion-duration-slow: 200ms;
--motion-ease-default: ease;
--motion-ease-out: ease-out;
}
/* ─── Body + Mantine body token ─────────────────────────────────────────── */
/*
* body background: tokens.css is a static loaded before emotion injects
* Mantine's