/* ============================================================================= AlphaFlux design tokens ----------------------------------------------------------------------------- THE ONE SOURCE OF TRUTH for colour, type, space, radius, elevation, motion and depth. Both surfaces read this file: - the marketing site (alphaflux-web/assets/site.css imports these roles) - the console (web/console/*) Change a value here and both move together. That is the point. Two layers, and the split is enforced by convention: PRIMITIVES raw values. A component must NEVER reference one. SEMANTIC roles. The only layer a component may touch. If a component needs a value with no semantic name, the system is missing a role. Add the role; do not reach past the semantic layer for a primitive. Identity decisions, inherited from the marketing site where they were already made deliberately (see alphaflux-web/assets/site.css): radius 2 / 4 / 6 / 10 precise and industrial; not soft, not the 0px costume ratio ~1.2 on UI steps tight reads technical motion 90 / 120 / 180 / 240ms fast reads industrial neutral cool, hue 222, taken from the product's own navy #0a1220 The console adds nothing to those. It takes them at admin density and speed. ========================================================================== */ /* --- 1. PRIMITIVES ------------------------------------------------------- */ :root { /* Cool neutral ramp, hue 222, anchored on the product's navy. */ --neutral-0: #ffffff; --neutral-50: #f5f7fb; --neutral-100: #e9eef6; --neutral-200: #d5deeb; --neutral-300: #b4c1d6; --neutral-400: #8798b4; --neutral-500: #5f7191; --neutral-600: #46587a; --neutral-700: #31425f; --neutral-800: #1e2b44; --neutral-900: #131d31; --neutral-950: #0a1220; /* Brand. 500 is the product's blue. 300 exists because dark mode steps UP the ramp; a saturated step tuned for white vibrates on near-black. */ --brand-100: #d9e8fd; --brand-300: #79b0f6; --brand-500: #0263e0; --brand-600: #0250bb; --brand-700: #013c8c; /* The signal accent. Live telemetry marks only: never text, never a button. Permitted once per screen, which is what keeps it reading as a signal. */ --signal-400: #7ae4f7; --signal-500: #2fd0f0; --signal-600: #12a8c9; /* Status ramps, deliberately clear of the brand hue so a status never reads as branding. Each has a 100 tint, a 500 base, a 600 text-on-tint step and a 300 for dark surfaces. */ --green-100: #d8f3e2; --green-300: #57c98a; --green-500: #17914f; --green-600: #116b3a; --amber-100: #fbeccf; --amber-300: #e0ab4a; --amber-500: #b87810; --amber-600: #8d5a08; --red-100: #fbdcdc; --red-300: #e37777; --red-500: #c62f2f; --red-600: #9c1f1f; --teal-100: #d3f0ed; --teal-300: #52bdb5; --teal-500: #0d8d84; --teal-600: #0a6b64; /* Chart series 3, 4 and 6 have no status or brand equivalent, so they need their own primitives rather than an inline literal. Six is the ceiling for series a reader can distinguish. */ --violet-500: #6d4fd6; --violet-300: #a58bf5; --orange-500: #c2650f; --orange-300: #e0913f; --magenta-500: #b83b86; --magenta-300: #e07bb8; /* Shadow tints, derived from the neutral ramp's own hue. Pure black over a cool neutral reads muddy. */ --tint-05: rgba(10, 18, 32, .05); --tint-06: rgba(10, 18, 32, .06); --tint-07: rgba(10, 18, 32, .07); --tint-10: rgba(10, 18, 32, .10); --tint-13: rgba(10, 18, 32, .13); } /* --- 2. SEMANTIC, LIGHT -------------------------------------------------- */ :root { --background: var(--neutral-50); --surface: var(--neutral-0); --surface-secondary: var(--neutral-50); --surface-elevated: var(--neutral-0); --surface-inverted: var(--neutral-950); --surface-hover: var(--neutral-50); --surface-active: var(--neutral-100); --surface-selected: var(--brand-100); --surface-sunken: var(--neutral-100); --foreground: var(--neutral-950); --foreground-secondary: var(--neutral-700); --muted-foreground: var(--neutral-600); /* 4.9:1 on --surface, verified */ --foreground-inverted: var(--neutral-0); --foreground-on-brand: var(--neutral-0); --border: var(--neutral-200); --border-strong: var(--neutral-300); --border-subtle: var(--neutral-100); --primary: var(--brand-500); --primary-hover: var(--brand-600); --primary-active: var(--brand-700); --primary-foreground: var(--neutral-0); --primary-subtle: var(--brand-100); --accent-signal: var(--signal-600); --accent-signal-subtle: var(--signal-400); --success: var(--green-500); --success-subtle: var(--green-100); --success-foreground: var(--green-600); --warning: var(--amber-500); --warning-subtle: var(--amber-100); --warning-foreground: var(--amber-600); --destructive: var(--red-500); --destructive-hover: var(--red-600); --destructive-subtle: var(--red-100); --destructive-foreground: var(--red-600); --info: var(--teal-500); --info-subtle: var(--teal-100); --info-foreground: var(--teal-600); --chart-1: var(--brand-500); --chart-2: var(--signal-600); --chart-3: var(--violet-500); --chart-4: var(--orange-500); --chart-5: var(--teal-500); --chart-6: var(--magenta-500); --ring: var(--brand-500); --ring-offset: var(--surface); --ring-width: 2px; --ring-offset-width: 2px; --shadow-sm: 0 1px 2px var(--tint-06); --shadow-md: 0 2px 6px var(--tint-07), 0 1px 2px var(--tint-05); --shadow-lg: 0 10px 28px var(--tint-10); --shadow-xl: 0 18px 44px var(--tint-13); } /* --- 3. SEMANTIC, DARK --------------------------------------------------- */ /* Elevation inverts: a raised surface is LIGHTER, never more shadowed. */ :root[data-theme="dark"] { --background: var(--neutral-950); --surface: var(--neutral-900); --surface-secondary: var(--neutral-900); --surface-elevated: var(--neutral-800); --surface-inverted: var(--neutral-0); --surface-hover: var(--neutral-800); --surface-active: var(--neutral-700); --surface-selected: color-mix(in oklab, var(--brand-500) 22%, var(--neutral-900)); --surface-sunken: var(--neutral-950); --foreground: var(--neutral-100); --foreground-secondary: var(--neutral-300); --muted-foreground: var(--neutral-400); --foreground-inverted: var(--neutral-900); --foreground-on-brand: var(--neutral-950); --border: var(--neutral-800); --border-strong: var(--neutral-700); --border-subtle: var(--neutral-900); --primary: var(--brand-300); --primary-hover: var(--brand-100); --primary-active: var(--brand-100); --primary-foreground: var(--neutral-950); --primary-subtle: color-mix(in oklab, var(--brand-500) 20%, var(--neutral-900)); /* Subtle status backgrounds mix INTO the dark surface. Reusing the light tint produces a bright patch against near-black. */ --success-subtle: color-mix(in oklab, var(--green-500) 20%, var(--neutral-900)); --success-foreground: var(--green-300); --warning-subtle: color-mix(in oklab, var(--amber-500) 20%, var(--neutral-900)); --warning-foreground: var(--amber-300); --destructive-subtle: color-mix(in oklab, var(--red-500) 20%, var(--neutral-900)); --destructive-foreground: var(--red-300); --info-subtle: color-mix(in oklab, var(--teal-500) 20%, var(--neutral-900)); --info-foreground: var(--teal-300); --chart-1: var(--brand-300); --chart-2: var(--signal-400); --chart-3: var(--violet-300); --chart-4: var(--orange-300); --chart-5: var(--teal-300); --chart-6: var(--magenta-300); --ring: var(--brand-300); --ring-offset: var(--background); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 2px 8px rgba(0, 0, 0, .48), 0 1px 2px rgba(0, 0, 0, .36); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .56); --shadow-xl: 0 20px 48px rgba(0, 0, 0, .62); } /* --- 4. SCALES ----------------------------------------------------------- */ :root { --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; --space-10: 4rem; --space-11: 5rem; --container-max: 1180px; --container-wide: 1560px; --container-text: 68ch; --grid-gap: var(--space-6); --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px; --radius-full: 9999px; --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --text-display: clamp(2.5rem, 1.35rem + 4.4vw, 4.75rem); --text-h1: clamp(2rem, 1.3rem + 2.7vw, 3.25rem); --text-h2: clamp(1.5rem, 1.2rem + 1.35vw, 2.125rem); --text-h3: clamp(1.1875rem, 1.1rem + .45vw, 1.4375rem); --text-h4: 1.0625rem; --text-title: 1rem; --text-body: 1rem; --text-body-sm: .9375rem; --text-label: .8125rem; --text-caption: .75rem; --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.6; --leading-relaxed: 1.7; --tracking-display: -.022em; --tracking-heading: -.016em; --tracking-normal: 0; --tracking-label: .04em; --duration-instant: 90ms; --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 240ms; --duration-slower: 420ms; --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-in: cubic-bezier(.6, .05, .9, .4); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --density: 1; --control-h-sm: calc(2rem * var(--density)); --control-h-md: calc(2.5rem * var(--density)); --control-h-lg: calc(3rem * var(--density)); --row-h: calc(2.75rem * var(--density)); --rail-w: 16.5rem; --header-height: 3.5rem; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-overlay: 400; --z-dialog: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; } [data-density="compact"] { --density: 0.88; } [data-density="comfortable"] { --density: 1.12; } /* --- 5. THE CONSOLE SURFACE ---------------------------------------------- */ /* An operations console is read for hours, so every duration takes the short end and the vertical rhythm tightens. This is the ONLY place the console diverges from the marketing site, and it diverges in one place on purpose: cutting animations per component guarantees one gets missed. Anything a repeated task has to wait for is ruled out entirely. */ [data-surface="admin"] { --duration-normal: 120ms; --duration-slow: 160ms; --duration-slower: 160ms; --leading-normal: 1.45; --section-y: var(--space-6); --container-max: none; --container-wide: none; } /* Numeric alignment for anything that updates in place or sits in a column. Without it, a live figure jitters as its digits change width. */ .numeric, [data-numeric] { font-variant-numeric: tabular-nums; }