/* ============================================================================= * NACRE — token surface * ----------------------------------------------------------------------------- * The single source of truth for every visual primitive in the NACRE builder. * RULE: no component, module, or effect may hardcode a color, font, or timing * value. Everything reads from a token declared here (or a theme override that * the token-engine swaps inline onto :root at runtime). * * VOCABULARY (adopted verbatim from the ACC design-token framework) * ---------------------------------------------------------------------------- * Core / brand --accent · --text-on-accent · --surface-bg · --surface-fg-mix * Text ramp --text-1 (strongest) … --text-4 (faintest) * Fonts --font-display · --font-sans · --font-mono * Type scale --fs-* font sizes (xs … 4xl) * --lh-* line heights (tight/base/loose) * --ls-* letter spacing (tight/normal/wide) * Spacing --gap-* flex/grid gaps (2xs … 2xl) * --pad-* inner padding (2xs … 2xl) * Shape --radius-* corner radii (sm/md/lg/xl/pill) * Elevation --shadow-* drop shadows (sm/md/lg/xl) * Motion --transition-fast/base/slow/slower * Depth --blur-* backdrop blur (sm/md/lg) * Status --status-ok / --status-warn / --status-danger / --status-info * Derived surface/accent tints produced with color-mix() so a theme * only needs to declare a handful of seeds. * * EXTENSION CATEGORY — `--fx-*` (NACRE-specific, NOT part of stock ACC) * ---------------------------------------------------------------------------- * The `--fx-*` tokens are the bridge between the *UI* design system and the * *WebGL effect* layer. Effect templates never read UI tokens directly and * never hardcode a color/speed. Instead every effect parameter whose default * is visual (a palette color, a speed, a density) resolves its default from an * `--fx-*` token via getComputedStyle() at mount time, and re-resolves on the * `nacre:theme-change` event. This keeps the 3D layer theme-reactive for free. * * --fx-color-1/2/3 the effect palette (theme-driven) * --fx-bg effect clear/background color * --fx-speed base animation speed multiplier (unitless) * --fx-density particle / element density (unitless) * --fx-scale geometry scale multiplier (unitless) * --fx-glow glow / bloom intensity (unitless) * --fx-morph-duration morph/transition duration (ms) * ========================================================================== */ :root { /* ---- Core / brand ---------------------------------------------------- */ --accent: #6fe4d6; --text-on-accent: #041014; --surface-bg: #060a12; --surface-fg-mix: #cfe6f0; /* the "ink" mixed into surfaces + text ramp */ /* ---- Derived surfaces (color-mix off the two seeds above) ------------ */ --surface-1: color-mix(in srgb, var(--surface-fg-mix) 4%, var(--surface-bg)); --surface-2: color-mix(in srgb, var(--surface-fg-mix) 8%, var(--surface-bg)); --surface-3: color-mix(in srgb, var(--surface-fg-mix) 13%, var(--surface-bg)); --surface-border: color-mix(in srgb, var(--surface-fg-mix) 16%, transparent); --surface-border-strong: color-mix(in srgb, var(--surface-fg-mix) 30%, transparent); /* ---- Derived accent tints -------------------------------------------- */ --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent); --accent-hover: color-mix(in srgb, var(--accent) 82%, white); --accent-muted: color-mix(in srgb, var(--accent) 45%, var(--surface-bg)); /* ---- Text ramp ------------------------------------------------------- */ --text-1: color-mix(in srgb, var(--surface-fg-mix) 96%, transparent); --text-2: color-mix(in srgb, var(--surface-fg-mix) 74%, transparent); --text-3: color-mix(in srgb, var(--surface-fg-mix) 52%, transparent); --text-4: color-mix(in srgb, var(--surface-fg-mix) 34%, transparent); /* ---- Fonts ----------------------------------------------------------- */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace; /* ---- Type scale ------------------------------------------------------ */ --fs-2xs: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.375rem; --fs-xl: 1.875rem; --fs-2xl: 2.5rem; --fs-3xl: 3.5rem; --fs-4xl: 4.75rem; --lh-tight: 1.08; --lh-base: 1.5; --lh-loose: 1.75; --ls-tight: -0.02em; --ls-normal: 0em; --ls-wide: 0.08em; /* ---- Spacing --------------------------------------------------------- */ --gap-2xs: 0.25rem; --gap-xs: 0.5rem; --gap-sm: 0.75rem; --gap-md: 1rem; --gap-lg: 1.5rem; --gap-xl: 2.5rem; --gap-2xl: 4rem; --pad-2xs: 0.25rem; --pad-xs: 0.5rem; --pad-sm: 0.75rem; --pad-md: 1rem; --pad-lg: 1.5rem; --pad-xl: 2.5rem; --pad-2xl: 4rem; /* ---- Shape ----------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---- Elevation ------------------------------------------------------- */ --shadow-sm: 0 1px 2px color-mix(in srgb, black 40%, transparent); --shadow-md: 0 6px 20px color-mix(in srgb, black 45%, transparent); --shadow-lg: 0 18px 48px color-mix(in srgb, black 55%, transparent); --shadow-xl: 0 32px 80px color-mix(in srgb, black 62%, transparent); --shadow-glow: 0 0 32px var(--accent-soft); /* ---- Motion ---------------------------------------------------------- */ --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: 720ms cubic-bezier(0.33, 1, 0.68, 1); /* ---- Depth ----------------------------------------------------------- */ --blur-sm: 6px; --blur-md: 14px; --blur-lg: 28px; /* ---- Status ---------------------------------------------------------- */ --status-ok: #58d9a3; --status-warn: #e6c15a; --status-danger: #e46f7c; --status-info: #6fb2e4; /* ---- FX extension category (theme-driven effect layer) --------------- */ --fx-color-1: #6fe4d6; --fx-color-2: #7d6fe4; --fx-color-3: #e46fb2; --fx-bg: #05070e; --fx-speed: 1; --fx-density: 1; --fx-scale: 1; --fx-glow: 1; --fx-morph-duration: 4200; } /* Density attribute — compacts spacing + type without touching component CSS */ :root[data-density="compact"] { --pad-md: 0.75rem; --pad-lg: 1.15rem; --gap-md: 0.75rem; --gap-lg: 1.15rem; --fs-base: 0.875rem; } :root[data-density="cozy"] { --pad-lg: 1.85rem; --gap-lg: 1.85rem; }