/*! * SUITE TOKENS — Pass 1 canonical design system (DEML + FORJD) * ---------------------------------------------------------------------------- * AUTHORITATIVE SOURCE (edit only here): * packages/viking-ui/src/tokens/suite-tokens.css * * Docs: packages/viking-ui/src/tokens/SUITE_TOKENS.md * Lock: packages/viking-ui/src/tokens/suite-tokens.lock.json * Law: docs/SUITE_UI_UNIFICATION.md * * Consumers (no external style packages for the look): * - viking-ui (build prepends into design-tokens / viking-ui / viking-app) * - forjd-ui (vendored via `npm run sync:suite` — sibling copy, not npm) * - deml.app · marketing · backend.deml.app · ui.deml.app * - forjd.co · backend.forjd.co · ui.forjd.co * * Strategy: * High-end **dark-first** void austerity (forjd.co + SpaceX restraint). * Light is **opt-in only** via (same roles, lightness shift). * * Roles (do not collapse): * A — Product chrome (surfaces, ink, primary, institutional gold, status) * B — Chart series palette (--suite-series-*) — may evolve independently of chrome * C — PDF / print report tokens live outside this file (fjord-report-tokens.json; suite-aligned chrome) * * Provenance (existing hexes only — no new brand hues): * Void surfaces ← forjd.co · Electric command ← DEML · Gold ← FORJD institutional * * RULE: Everything downstream consumes only these variables. * No hard-coded product colors/spacing outside this file (brand SVG assets ok). */ /* ============================================================================= DARK (default) — product suite identity ============================================================================= */ :root, html[data-theme="dark"] { color-scheme: dark; /* --- Brand artwork only (logos / favicons / OG — not product chrome) --- */ --suite-brand-navy: #070c20; --suite-brand-blue: #0078ff; /* --- Surface levels (Role A) --- */ --suite-bg: #0a0a0a; --suite-bg-subtle: #050505; --suite-surface: #111111; --suite-surface-2: #1a1a1a; --suite-surface-elevated: #141414; --suite-surface-inset: #050505; --suite-overlay: color-mix(in srgb, var(--suite-bg) 72%, transparent); /* --- Ink / text --- */ --suite-ink: #f5f5f5; --suite-ink-muted: #aaaaaa; --suite-ink-subtle: #999999; --suite-ink-disabled: #777777; --suite-ink-on-primary: #ffffff; --suite-ink-inverse: #0a0a0a; /* --- Borders (strong ≥3:1 UI contrast on void surfaces — WCAG 1.4.11) --- */ --suite-border: #222222; --suite-border-strong: #666666; --suite-border-control: var(--suite-border-strong); --suite-border-subtle: color-mix( in srgb, var(--suite-border) 70%, transparent ); --suite-hairline: color-mix(in srgb, var(--suite-primary) 28%, transparent); /* --- Primary / accent (electric command) --- Fill/hover are darkened for ≥4.5:1 white-on-fill. Brand hue kept on series-1. --suite-primary-strong is the AA text/link color on dark surfaces. */ --suite-primary: #1565f0; --suite-primary-hover: #0f5ae0; --suite-primary-active: #0a4fd4; --suite-primary-soft: color-mix( in srgb, var(--suite-primary) 18%, transparent ); --suite-primary-strong: #7ab0ff; --suite-accent: var(--suite-primary); --suite-accent-hover: var(--suite-primary-strong); /* Institutional gold — chrome / prestige moments (not chart series by default) */ --suite-gold: #d4af37; --suite-gold-soft: color-mix(in srgb, var(--suite-gold) 16%, transparent); --suite-gold-text: #e8c96a; /* --- Status (fills keep brand chroma; *-text is AA foreground on surfaces) --- */ --suite-success: #2a9d8f; --suite-success-soft: color-mix( in srgb, var(--suite-success) 16%, transparent ); --suite-success-text: #5ec4b6; --suite-success-fill: #1a7066; --suite-warning: #d69e2e; --suite-warning-soft: color-mix( in srgb, var(--suite-warning) 16%, transparent ); --suite-warning-text: #e8c25a; --suite-danger: #a83344; --suite-danger-soft: color-mix(in srgb, var(--suite-danger) 16%, transparent); --suite-danger-text: #dc6b78; --suite-info: var(--suite-primary-strong); /* --- Focus / ring (bright for visibility — not the darkened fill hover) --- */ --suite-focus: #4d94ff; --suite-ring: #4d94ff; --suite-ring-width: 2px; --suite-ring-offset: 2px; /* --- Chart series (Role B) — tokenized; prefer these over hard-coded hexes --- */ --suite-series-1: #2176ff; --suite-series-2: #922b3e; --suite-series-3: var(--suite-success); --suite-series-4: var(--suite-gold); --suite-series-5: var(--suite-danger); --suite-series-6: #4d94ff; --suite-series-7: #162544; --suite-series-8: #666666; --suite-series-default: var(--suite-series-1); /* --- Typography (industrial Inter + clean modern stack) --- */ --suite-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --suite-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace; --suite-text-2xs: 0.6875rem; /* 11px */ --suite-text-xs: 0.75rem; /* 12px */ --suite-text-sm: 0.875rem; /* 14px */ --suite-text-md: 0.875rem; /* 14px UI chrome */ --suite-text-base: 1rem; /* 16px body */ --suite-text-lg: 1.125rem; /* 18px */ --suite-text-xl: 1.5rem; /* 24px */ --suite-text-2xl: 1.875rem; /* 30px */ --suite-text-3xl: 2.25rem; /* 36px */ --suite-text-4xl: 3rem; /* 48px */ --suite-text-display: clamp(2.5rem, 7vw, 3rem); --suite-text-display-lg: clamp(2.25rem, 5vw, 3.75rem); --suite-text-display-md: clamp(2rem, 4.5vw, 3rem); /* Hero industrial titles — fluid, tokenized clamps */ --suite-text-headline: clamp(1.35rem, 3.2vw, 2rem); --suite-text-headline-quiet: clamp(1.2rem, 2.6vw, 1.65rem); --suite-text-title: clamp(1.5rem, 3.5vw, 2rem); --suite-text-title-lg: clamp(1.75rem, 5vw, 2.5rem); --suite-text-title-sm: clamp(1.35rem, 3vw, 1.75rem); --suite-text-lead: 1.25rem; /* 20px section lead */ --suite-text-lead-fluid: clamp(1.05rem, 2vw, 1.25rem); --suite-weight-regular: 400; --suite-weight-medium: 500; --suite-weight-semibold: 600; --suite-weight-bold: 700; --suite-weight-extrabold: 800; --suite-leading-none: 1; --suite-leading-tight: 1.2; --suite-leading-snug: 1.35; --suite-leading-normal: 1.5; --suite-leading-relaxed: 1.6; --suite-tracking-tight: -0.03em; --suite-tracking-normal: 0; --suite-tracking-wide: 0.08em; --suite-tracking-caps: 0.1em; --suite-tracking-brand: 0.14em; /* --- Spacing (THEME.md: 8px primary grid; 4px tight exception) --- */ --suite-space-unit: 8px; --suite-space-0: 0; --suite-space-px: 1px; --suite-space-0-5: 4px; --suite-space-1: 8px; --suite-space-2: 16px; --suite-space-3: 24px; --suite-space-4: 32px; --suite-space-5: 40px; --suite-space-6: 48px; --suite-space-7: 56px; --suite-space-8: 64px; --suite-space-9: 80px; --suite-space-10: 96px; --suite-space-11: 112px; --suite-space-12: 128px; --suite-space-14: 160px; --suite-space-16: 192px; --suite-space-compact: 12px; --suite-page-gutter: clamp(1rem, 4vw, 1.5rem); /* Major section rhythm — more air between stages; not card/list density */ --suite-section-gap: clamp(3rem, 7vw, 5rem); /* Related blocks inside a section (header→grid, band stack) */ --suite-block-gap: clamp(1.75rem, 3.5vw, 2.5rem); /* Dense operational rows (tables, status, meta) */ --suite-density-gap: var(--suite-space-1); --suite-cluster-gap: var(--suite-space-2); --suite-content-max: 78.75rem; /* 1260px */ --suite-readable-max: 48rem; /* Mobile touch target (WCAG AA / SaaS) */ --suite-touch: 2.75rem; /* 44px */ /* Dense desktop control frame; mobile interactive targets use --suite-touch */ --suite-control-height: 2.5rem; /* 40px */ --suite-control-height-sm: 2rem; /* 32px */ --suite-control-height-lg: var(--suite-touch); /* Shared control chrome — buttons, inputs, selects align to this grid */ --suite-control-px: var(--suite-space-2); --suite-control-px-lg: var(--suite-space-3); --suite-control-fs: var(--suite-text-md); --suite-control-fs-sm: var(--suite-text-sm); --suite-control-check: 1.25rem; /* checkbox / radio glyph */ /* Soft inner focus for fields (pairs with :focus-visible outline) */ --suite-control-focus-ring: 0 0 0 1px color-mix(in srgb, var(--suite-primary) 42%, transparent); /* --- Radius --- */ --suite-radius-xs: 4px; --suite-radius-sm: 6px; --suite-radius: 8px; --suite-radius-lg: 12px; --suite-radius-xl: 16px; --suite-radius-pill: 999px; --suite-radius-control: var(--suite-radius); --suite-radius-surface: var(--suite-radius-lg); /* --- Elevation (machined, stepped — never decorative glow stacks) --- */ /* Drop shadows: short/hard near-edge + soft ambient; keep opacity low */ --suite-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.28); --suite-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 3px 10px rgba(0, 0, 0, 0.14); --suite-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.26), 0 8px 20px rgba(0, 0, 0, 0.16); --suite-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.28), 0 16px 36px rgba(0, 0, 0, 0.22); --suite-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.28), 0 10px 22px rgba(0, 0, 0, 0.18); /* Top-edge specular — primary depth cue on dark steel */ --suite-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Recessed wells (tables, tablists, metric panels) */ --suite-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.12); /* Overlay glass — modals / loading only; not base cards */ --suite-glass: color-mix( in srgb, var(--suite-surface-elevated) 82%, transparent ); --suite-glass-strong: color-mix( in srgb, var(--suite-surface-elevated) 92%, transparent ); --suite-glass-blur: 8px; /* Composed elevation recipes (prefer these in chrome) */ --suite-elevation-1: var(--suite-highlight); --suite-elevation-2: var(--suite-shadow-sm), var(--suite-highlight); --suite-elevation-3: var(--suite-shadow-md), var(--suite-highlight); --suite-elevation-4: var(--suite-shadow-lg), var(--suite-highlight); --suite-elevation-hover: var(--suite-shadow-hover), var(--suite-highlight); --suite-elevation-inset: var(--suite-shadow-inset); /* --- Z-index scale --- */ --suite-z-base: 0; --suite-z-dropdown: 1000; --suite-z-sticky: 1100; --suite-z-overlay: 1200; --suite-z-modal: 1300; --suite-z-toast: 1400; --suite-z-max: 1500; /* --- Motion (aerospace: short, decisive, no bounce) --- */ --suite-ease: cubic-bezier(0.2, 0, 0, 1); --suite-ease-out: cubic-bezier(0, 0, 0.2, 1); --suite-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --suite-duration-instant: 75ms; --suite-duration-fast: 150ms; --suite-duration: 250ms; --suite-duration-slow: 350ms; /* Geometry: 1px lift / press — perceptible, never theatrical */ --suite-hover-lift: -1px; --suite-press-sink: 1px; --suite-nudge: 2px; --suite-reveal-distance: 0.5rem; --suite-active-scale: 0.985; --suite-transition: background-color var(--suite-duration-fast) var(--suite-ease), border-color var(--suite-duration-fast) var(--suite-ease), color var(--suite-duration-fast) var(--suite-ease), opacity var(--suite-duration-fast) var(--suite-ease), box-shadow var(--suite-duration-fast) var(--suite-ease), transform var(--suite-duration-fast) var(--suite-ease); --suite-transition-transform: transform var(--suite-duration-fast) var(--suite-ease-emphasized); --suite-transition-colors: background-color var(--suite-duration-fast) var(--suite-ease), border-color var(--suite-duration-fast) var(--suite-ease), color var(--suite-duration-fast) var(--suite-ease), box-shadow var(--suite-duration-fast) var(--suite-ease); /* --- Breakpoints (THEME.md mobile-first contract) --- */ --suite-bp-sm: 600px; --suite-bp-md: 768px; --suite-bp-sidebar: 901px; --suite-bp-lg: 1024px; --suite-bp-xl: 1440px; --suite-bp-2xl: 1920px; /* ========================================================================= Compatibility aliases — viking-ui + forjd-ui Prefer --suite-* in new code. Aliases must stay byte-identical via var(). ========================================================================= */ /* Viking semantic */ --viking-bg: var(--suite-bg); --viking-bg-subtle: var(--suite-bg-subtle); --viking-surface: var(--suite-surface); --viking-surface-alt: var(--suite-surface-2); --viking-surface-raised: var(--suite-surface-elevated); --viking-surface-inset: var(--suite-surface-inset); --viking-surface-overlay: var(--suite-surface); --viking-surface-recipe: var(--suite-surface); --viking-surface-recipe-elevated: var(--suite-surface-elevated); --viking-border: var(--suite-border); --viking-border-strong: var(--suite-border-strong); --viking-border-subtle: var(--suite-border-subtle); --viking-border-control: var(--suite-border-control); --viking-border-container: var(--suite-border); --viking-border-accent: var(--suite-hairline); --viking-text: var(--suite-ink); --viking-text-muted: var(--suite-ink-muted); --viking-text-subtle: var(--suite-ink-subtle); --viking-text-disabled: var(--suite-ink-disabled); --viking-accent: var(--suite-primary); --viking-accent-hover: var(--suite-primary-hover); --viking-accent-active: var(--suite-primary-active); --viking-accent-soft: var(--suite-primary-soft); --viking-accent-strong: var(--suite-primary-strong); --viking-accent-content: var(--suite-ink-on-primary); --viking-gold-500: var(--suite-gold); --viking-gold-text: var(--suite-gold-text); --viking-success: var(--suite-success); --viking-success-text: var(--suite-success-text); --viking-warning: var(--suite-warning); --viking-warning-text: var(--suite-warning-text); --viking-danger: var(--suite-danger); --viking-danger-text: var(--suite-danger-text); --viking-ring: var(--suite-ring); --viking-ring-width: var(--suite-ring-width); --viking-ring-offset: var(--suite-ring-offset); --viking-font-family: var(--suite-font-sans); --viking-font-family-mono: var(--suite-font-mono); --viking-font-size-2xs: var(--suite-text-2xs); --viking-font-size-xs: var(--suite-text-xs); --viking-font-size-sm: var(--suite-text-sm); --viking-font-size-ui: var(--suite-text-md); --viking-font-size-base: var(--suite-text-base); --viking-font-size-md: var(--suite-text-lg); --viking-font-size-lg: var(--suite-text-xl); --viking-font-size-xl: var(--suite-text-xl); --viking-font-size-2xl: var(--suite-text-2xl); --viking-font-size-3xl: var(--suite-text-3xl); --viking-font-size-4xl: var(--suite-text-4xl); --viking-font-size-5xl: 3.75rem; --viking-font-size-6xl: 4.5rem; --viking-font-size-display: var(--suite-text-display); --viking-font-size-display-lg: var(--suite-text-display-lg); --viking-font-size-display-md: var(--suite-text-display-md); --viking-font-size-headline: var(--suite-text-headline); --viking-font-size-headline-quiet: var(--suite-text-headline-quiet); --viking-font-size-title: var(--suite-text-title); --viking-font-size-title-lg: var(--suite-text-title-lg); --viking-font-size-title-sm: var(--suite-text-title-sm); --viking-font-size-lead: var(--suite-text-lead); --viking-font-size-lead-fluid: var(--suite-text-lead-fluid); --viking-font-weight-regular: var(--suite-weight-regular); --viking-font-weight-medium: var(--suite-weight-medium); --viking-font-weight-semibold: var(--suite-weight-semibold); --viking-font-weight-bold: var(--suite-weight-bold); --viking-font-weight-extrabold: var(--suite-weight-extrabold); --viking-line-height-none: var(--suite-leading-none); --viking-line-height-tight: var(--suite-leading-tight); --viking-line-height-snug: var(--suite-leading-snug); --viking-line-height-normal: var(--suite-leading-normal); --viking-line-height-relaxed: var(--suite-leading-relaxed); --viking-letter-spacing-tight: var(--suite-tracking-tight); --viking-letter-spacing-normal: var(--suite-tracking-normal); --viking-letter-spacing-wide: var(--suite-tracking-wide); --viking-letter-spacing-caps: var(--suite-tracking-caps); --viking-letter-spacing-display: var(--suite-tracking-brand); --viking-space-0: var(--suite-space-0); --viking-space-px: var(--suite-space-px); --viking-space-0-5: var(--suite-space-0-5); --viking-space-1: var(--suite-space-1); --viking-space-2: var(--suite-space-2); --viking-space-3: var(--suite-space-3); --viking-space-4: var(--suite-space-4); --viking-space-5: var(--suite-space-5); --viking-space-6: var(--suite-space-6); --viking-space-7: var(--suite-space-7); --viking-space-8: var(--suite-space-8); --viking-space-9: var(--suite-space-9); --viking-space-10: var(--suite-space-10); --viking-space-11: var(--suite-space-11); --viking-space-12: var(--suite-space-12); --viking-space-14: var(--suite-space-14); --viking-space-16: var(--suite-space-16); --viking-space-compact-gap: var(--suite-space-compact); --viking-touch-target-min: var(--suite-touch); --viking-radius-xs: var(--suite-radius-xs); --viking-radius-sm: var(--suite-radius-sm); --viking-radius: var(--suite-radius); --viking-radius-lg: var(--suite-radius-lg); --viking-radius-xl: var(--suite-radius-xl); --viking-radius-pill: var(--suite-radius-pill); --viking-shadow-xs: var(--suite-shadow-xs); --viking-shadow-sm: var(--suite-shadow-sm); --viking-shadow-md: var(--suite-shadow-md); --viking-shadow-lg: var(--suite-shadow-lg); --viking-shadow-hover: var(--suite-shadow-hover); --viking-shadow-inner: var(--suite-shadow-inset); --viking-surface-highlight: var(--suite-highlight); --viking-elevation-1: var(--suite-elevation-1); --viking-elevation-2: var(--suite-elevation-2); --viking-elevation-3: var(--suite-elevation-3); --viking-elevation-4: var(--suite-elevation-4); --viking-elevation-hover: var(--suite-elevation-hover); --viking-elevation-inset: var(--suite-elevation-inset); --viking-glass: var(--suite-glass); --viking-glass-strong: var(--suite-glass-strong); --viking-glass-blur: var(--suite-glass-blur); --viking-duration-instant: var(--suite-duration-instant); --viking-duration-fast: var(--suite-duration-fast); --viking-duration: var(--suite-duration); --viking-duration-slow: var(--suite-duration-slow); --viking-ease-out: var(--suite-ease-out); --viking-ease-emphasized: var(--suite-ease-emphasized); --viking-state-hover-lift: var(--suite-hover-lift); --viking-state-press-sink: var(--suite-press-sink); --viking-state-nudge: var(--suite-nudge); --viking-state-reveal-distance: var(--suite-reveal-distance); --viking-state-active-scale: var(--suite-active-scale); --viking-transition-interactive: var(--suite-transition); --viking-transition-colors: var(--suite-transition-colors); --viking-transition-transform: var(--suite-transition-transform); --viking-control-height: var(--suite-control-height); --viking-control-height-sm: var(--suite-control-height-sm); --viking-control-height-lg: var(--suite-control-height-lg); --viking-control-px: var(--suite-control-px); --viking-control-fs: var(--suite-control-fs); --viking-control-check: var(--suite-control-check); --viking-control-focus-ring: var(--suite-control-focus-ring); --viking-page-gutter: var(--suite-page-gutter); --viking-page-section-gap: var(--suite-section-gap); --viking-page-stack-gap: var(--suite-block-gap); --viking-block-gap: var(--suite-block-gap); --viking-density-gap: var(--suite-density-gap); --viking-container-max-width: var(--suite-content-max); --viking-content-readable-max-width: var(--suite-readable-max); --viking-bp-sm: var(--suite-bp-sm); --viking-bp-md: var(--suite-bp-md); --viking-bp-sidebar: var(--suite-bp-sidebar); --viking-bp-lg: var(--suite-bp-lg); --viking-bp-xl: var(--suite-bp-xl); --viking-bp-2xl: var(--suite-bp-2xl); --viking-brand-navy: var(--suite-brand-navy); --viking-brand-blue: var(--suite-brand-blue); --viking-series-1: var(--suite-series-1); --viking-series-2: var(--suite-series-2); --viking-series-3: var(--suite-series-3); --viking-series-4: var(--suite-series-4); --viking-series-5: var(--suite-series-5); --viking-series-6: var(--suite-series-6); --viking-series-7: var(--suite-series-7); --viking-series-8: var(--suite-series-8); --viking-series-default: var(--suite-series-default); --viking-z-dropdown: var(--suite-z-dropdown); --viking-z-modal: var(--suite-z-modal); --viking-z-toast: var(--suite-z-toast); /* FORJD aliases --fj-space-* map is FROZEN (legacy compact scale). Prefer --suite-space-*. Do not invent new --fj-space-* in product code. */ --fj-bg: var(--suite-bg); --fj-surface: var(--suite-surface); --fj-surface-2: var(--suite-surface-2); --fj-surface-elevated: var(--suite-surface-elevated); --fj-border: var(--suite-border); --fj-border-strong: var(--suite-border-strong); --fj-border-control: var(--suite-border-control); --fj-hairline: var(--suite-hairline); --fj-overlay: var(--suite-overlay); --fj-primary: var(--suite-primary); --fj-primary-hover: var(--suite-primary-hover); --fj-primary-active: var(--suite-primary-active); --fj-primary-soft: var(--suite-primary-soft); --fj-primary-strong: var(--suite-primary-strong); --fj-focus: var(--suite-focus); --fj-ring: var(--suite-ring); --fj-ring-width: var(--suite-ring-width); --fj-ring-offset: var(--suite-ring-offset); --fj-gold: var(--suite-gold); --fj-gold-soft: var(--suite-gold-soft); --fj-gold-text: var(--suite-gold-text); --fj-accent: var(--suite-accent); --fj-accent-hover: var(--suite-accent-hover); --fj-warning: var(--suite-warning); --fj-warning-text: var(--suite-warning-text); --fj-danger: var(--suite-danger); --fj-danger-text: var(--suite-danger-text); --fj-success: var(--suite-success); --fj-success-text: var(--suite-success-text); --fj-text: var(--suite-ink); --fj-text-muted: var(--suite-ink-muted); --fj-text-subtle: var(--suite-ink-subtle); --fj-text-disabled: var(--suite-ink-disabled); --fj-text-on-primary: var(--suite-ink-on-primary); --fj-font-sans: var(--suite-font-sans); --fj-font-mono: var(--suite-font-mono); --fj-text-xs: var(--suite-text-xs); --fj-text-sm: var(--suite-text-sm); --fj-text-md: var(--suite-text-md); --fj-text-base: var(--suite-text-base); --fj-text-lg: var(--suite-text-lg); --fj-text-xl: var(--suite-text-xl); --fj-text-2xl: var(--suite-text-2xl); --fj-text-display: var(--suite-text-display); --fj-text-headline: var(--suite-text-headline); --fj-text-headline-quiet: var(--suite-text-headline-quiet); --fj-text-lead: var(--suite-text-lead); --fj-leading-tight: var(--suite-leading-tight); --fj-leading-snug: var(--suite-leading-snug); --fj-leading-normal: var(--suite-leading-normal); --fj-tracking-tight: var(--suite-tracking-tight); --fj-tracking-wide: var(--suite-tracking-wide); --fj-tracking-brand: var(--suite-tracking-brand); --fj-tracking-caps: var(--suite-tracking-caps); --fj-radius: var(--suite-radius); --fj-radius-xs: var(--suite-radius-xs); --fj-radius-sm: var(--suite-radius-sm); --fj-radius-lg: var(--suite-radius-lg); --fj-radius-xl: var(--suite-radius-xl); --fj-radius-pill: var(--suite-radius-pill); --fj-radius-control: var(--suite-radius-control); --fj-radius-surface: var(--suite-radius-surface); --fj-space-1: var(--suite-space-0-5); --fj-space-2: var(--suite-space-1); --fj-space-3: var(--suite-space-compact); --fj-space-4: var(--suite-space-2); --fj-space-5: var(--suite-space-2); --fj-space-6: var(--suite-space-3); --fj-space-7: var(--suite-space-3); --fj-space-8: var(--suite-space-4); --fj-space-10: var(--suite-space-5); --fj-space-12: var(--suite-space-6); --fj-touch-target: var(--suite-touch); --fj-control-height: var(--suite-control-height); --fj-control-height-sm: var(--suite-control-height-sm); --fj-control-height-lg: var(--suite-control-height-lg); --fj-control-px: var(--suite-control-px); --fj-control-fs: var(--suite-control-fs); --fj-control-check: var(--suite-control-check); --fj-control-focus-ring: var(--suite-control-focus-ring); --fj-page-gutter: var(--suite-page-gutter); --fj-section-gap: var(--suite-section-gap); --fj-block-gap: var(--suite-block-gap); --fj-density-gap: var(--suite-density-gap); --fj-content-max: var(--suite-content-max); --fj-readable-max: var(--suite-readable-max); --fj-bp-md: var(--suite-bp-md); --fj-bp-lg: var(--suite-bp-lg); --fj-ease: var(--suite-ease); --fj-ease-out: var(--suite-ease-out); --fj-ease-emphasized: var(--suite-ease-emphasized); --fj-duration-instant: var(--suite-duration-instant); --fj-duration-fast: var(--suite-duration-fast); --fj-duration: var(--suite-duration); --fj-duration-slow: var(--suite-duration-slow); --fj-transition: var(--suite-transition); --fj-transition-transform: var(--suite-transition-transform); --fj-hover-lift: var(--suite-hover-lift); --fj-active-scale: var(--suite-active-scale); --fj-press-sink: var(--suite-press-sink); --fj-nudge: var(--suite-nudge); --fj-reveal-distance: var(--suite-reveal-distance); --fj-highlight: var(--suite-highlight); --fj-elevation-1: var(--suite-elevation-1); --fj-elevation-2: var(--suite-elevation-2); --fj-elevation-3: var(--suite-elevation-3); --fj-elevation-4: var(--suite-elevation-4); --fj-elevation-hover: var(--suite-elevation-hover); --fj-elevation-inset: var(--suite-elevation-inset); --fj-glass: var(--suite-glass); --fj-glass-strong: var(--suite-glass-strong); --fj-glass-blur: var(--suite-glass-blur); --fj-transition-interactive: var(--suite-transition); --fj-transition-colors: var(--suite-transition-colors); --fj-z-dropdown: var(--suite-z-dropdown); --fj-z-modal: var(--suite-z-modal); --fj-z-toast: var(--suite-z-toast); } /* ============================================================================= LIGHT (opt-in) — same roles, shifted lightness only (no hue inversion) Activate: Product default remains dark; light is for marketing/docs that support it. ============================================================================= */ html[data-theme="light"] { color-scheme: light; --suite-bg: #fbfcfe; --suite-bg-subtle: #f4f7fb; --suite-surface: #ffffff; --suite-surface-2: #f4f7fb; --suite-surface-elevated: #ffffff; --suite-surface-inset: #f4f7fb; --suite-overlay: color-mix(in srgb, #ffffff 72%, transparent); --suite-ink: #080d1f; --suite-ink-muted: #555555; --suite-ink-subtle: #666666; --suite-ink-disabled: #666666; --suite-ink-on-primary: #ffffff; --suite-ink-inverse: #f5f5f5; --suite-border: #d7e0ef; --suite-border-strong: #58719e; --suite-border-control: var(--suite-border-strong); --suite-border-subtle: color-mix( in srgb, var(--suite-border) 70%, transparent ); --suite-primary: #1565f0; --suite-primary-hover: #0a4fd4; --suite-primary-active: #073a99; --suite-primary-soft: color-mix( in srgb, var(--suite-primary) 12%, transparent ); --suite-primary-strong: #073a99; --suite-accent-hover: var(--suite-primary-strong); --suite-focus: var(--suite-primary); --suite-ring: var(--suite-primary); /* Status text on light surfaces (fills keep brand chroma for soft/chart use) */ --suite-gold-text: #7a6410; --suite-success-text: #187066; --suite-success-fill: #1a7066; --suite-warning-text: #7a580e; --suite-danger-text: #a83344; /* Series stay chromatically stable; only series-7 (muted baseline) lightens */ --suite-series-7: #8fa2c2; --suite-series-8: #999999; --suite-shadow-xs: 0 1px 1px rgba(8, 13, 31, 0.05); --suite-shadow-sm: 0 1px 2px rgba(8, 13, 31, 0.05), 0 3px 10px rgba(8, 13, 31, 0.05); --suite-shadow-md: 0 2px 4px rgba(8, 13, 31, 0.06), 0 8px 20px rgba(8, 13, 31, 0.07); --suite-shadow-lg: 0 4px 8px rgba(8, 13, 31, 0.07), 0 16px 36px rgba(8, 13, 31, 0.09); --suite-shadow-hover: 0 2px 4px rgba(8, 13, 31, 0.07), 0 10px 22px rgba(8, 13, 31, 0.08); --suite-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85); --suite-shadow-inset: inset 0 1px 2px rgba(8, 13, 31, 0.06), inset 0 0 0 1px rgba(8, 13, 31, 0.04); --suite-glass: color-mix(in srgb, #ffffff 78%, transparent); --suite-glass-strong: color-mix(in srgb, #ffffff 90%, transparent); --suite-elevation-1: var(--suite-highlight); --suite-elevation-2: var(--suite-shadow-sm), var(--suite-highlight); --suite-elevation-3: var(--suite-shadow-md), var(--suite-highlight); --suite-elevation-4: var(--suite-shadow-lg), var(--suite-highlight); --suite-elevation-hover: var(--suite-shadow-hover), var(--suite-highlight); --suite-elevation-inset: var(--suite-shadow-inset); } /* WCAG 2.3.3 — zero motion tokens; consumers must not invent alternate timings */ @media (prefers-reduced-motion: reduce) { :root { --suite-duration-instant: 0ms; --suite-duration-fast: 0ms; --suite-duration: 0ms; --suite-duration-slow: 0ms; --suite-hover-lift: 0px; --suite-press-sink: 0px; --suite-nudge: 0px; --suite-reveal-distance: 0px; --suite-active-scale: 1; --suite-transition: none; --suite-transition-transform: none; --suite-transition-colors: none; } } /* Opaque fallbacks — glass blur is hierarchy aid, not required */ @media (prefers-reduced-transparency: reduce) { :root { --suite-glass-blur: 0px; --suite-glass: var(--suite-surface-elevated); --suite-glass-strong: var(--suite-surface-elevated); } }