/* * ds-tokens-2026.css — GENERATED by scripts/generate-ds-tokens.mjs. Do not hand-edit. * * Source : src/styles/ds-2026/semantics-2026.source.css * (vendored from Batterii/vurvey-product-design-system @ 0ee8160, 2026-08-06, * itself generated from Figma "Foundations: Semantics 2026" Co5wcogyG3lQWEsulJRS79) * Consumed : src/shared/v3/**, and preview-gated scope blocks anywhere in the app — the * four components the design system has not designed yet (input, dropdown, * select-input, table), plus the ds-2026-preview colour overrides on components * that hardcode a colour instead of reading a token. Nothing may read a --ds-* * property outside a designsystem2026 path. * * Every property is prefixed --ds-. The design system and this app both define --space-N * and --radius-N with different meanings, and the spacing pair differs by 4x * (--space-4 is 4px here, 16px there). The prefix is what keeps the two scales apart. * * Modes follow production's own mechanism: a class on . Guest mode binds the * brand-bearing roles to the Material 3 roles that useBranding generates per customer. */ :root { /* Colors — primary */ --ds-color-primary-primary: #5f4dff; --ds-color-primary-on-primary: #ffffff; --ds-color-primary-primary-container: #eceafd; --ds-color-primary-on-primary-container: #4b3fbb; /* Colors — secondary */ --ds-color-secondary-secondary-container: #e5e5e5; --ds-color-secondary-on-secondary-container: #171717; /* Colors — outline */ --ds-color-outline-outline: #a3a3a3; --ds-color-outline-outline-variant: #e5e5e5; /* Colors — surface */ --ds-color-surface-surface: #fafafa; --ds-color-surface-surface-container-lowest: #ffffff; --ds-color-surface-surface-container-low: #ffffff; --ds-color-surface-surface-container: #fafafa; --ds-color-surface-surface-container-high: #f5f5f5; --ds-color-surface-surface-container-highest: #e5e5e5; --ds-color-surface-on-background: #171717; --ds-color-surface-on-surface: #171717; --ds-color-surface-on-surface-variant: #404040; --ds-color-surface-on-surface-subtle: #626262; /* Colors — inverse */ --ds-color-inverse-inverse-surface: #171717; --ds-color-inverse-inverse-on-surface: #ffffff; --ds-color-inverse-inverse-primary: #a69cfe; /* Colors — utility */ --ds-color-utility-scrim: rgba(0, 0, 0, 0.4); --ds-color-utility-shadow: #000000; /* Colors — state (percentages are 0–100, unitless) */ --ds-color-state-hover: 8; --ds-color-state-focus: 10; --ds-color-state-pressed: 10; --ds-color-state-dragged: 16; --ds-color-state-disabled-content: 38; --ds-color-state-disabled-container: 12; --ds-color-state-open: 8; --ds-color-state-selected: var(--ds-color-primary-primary); --ds-color-state-focus-ring: #737373; --ds-color-state-focus-ring-width: 3px; --ds-color-state-focus-ring-offset: 0px; --ds-color-state-focus-ring-opacity: 50; --ds-color-state-focus-ring-halo: rgba(115, 115, 115, 0.5); /* Colors — state/error */ --ds-color-state-error-error: #dc2626; --ds-color-state-error-on-error: #ffffff; --ds-color-state-error-error-container: #fef2f2; --ds-color-state-error-on-error-container: #991b1b; --ds-color-state-error-error-border: #fecaca; --ds-color-state-error-error-ring-opacity: 20; --ds-color-state-error-error-ring-halo: rgba(220, 38, 38, 0.2); /* Colors — state/success */ --ds-color-state-success-success: #16a34a; --ds-color-state-success-on-success: #ffffff; --ds-color-state-success-success-container: #f0fdf4; --ds-color-state-success-on-success-container: #166534; --ds-color-state-success-success-border: #bbf7d0; /* Colors — state/warning */ --ds-color-state-warning-warning: #d97706; --ds-color-state-warning-on-warning: #ffffff; --ds-color-state-warning-warning-container: #fffbeb; --ds-color-state-warning-on-warning-container: #92400e; --ds-color-state-warning-warning-border: #fde68a; /* Colors — state/info */ --ds-color-state-info-info: #2563eb; --ds-color-state-info-on-info: #ffffff; --ds-color-state-info-info-container: #eff6ff; --ds-color-state-info-on-info-container: #1e40af; --ds-color-state-info-info-border: #bfdbfe; /* Radius */ --ds-radius-0: 0px; --ds-radius-0-5: 2px; --ds-radius-1: 4px; --ds-radius-2: 8px; --ds-radius-3: 12px; --ds-radius-4: 16px; --ds-radius-5: 20px; --ds-radius-6: 24px; --ds-radius-8: 32px; --ds-radius-full: 9999px; /* Spacing */ --ds-space-0: 0px; --ds-space-0-5: 2px; --ds-space-1: 4px; --ds-space-1-5: 6px; --ds-space-2: 8px; --ds-space-2-5: 10px; --ds-space-3: 12px; --ds-space-3-5: 14px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-7: 28px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; /* Size */ --ds-size-1: 4px; --ds-size-1-5: 6px; --ds-size-2: 8px; --ds-size-2-5: 10px; --ds-size-3: 12px; --ds-size-3-5: 14px; --ds-size-4: 16px; --ds-size-5: 20px; --ds-size-6: 24px; --ds-size-7: 28px; --ds-size-8: 32px; --ds-size-9: 36px; --ds-size-10: 40px; --ds-size-16: 64px; /* Border */ --ds-border-width-default: 1px; --ds-border-width-thick: 2px; /* Icon stroke ramp — lucide-native `2 x size / 24`, in RENDERED px (docs/20 §1.1). Reversed 2026-08-05 from the bespoke 1.25/1.5/1.75/2. Consumers must set `vector-effect: non-scaling-stroke` on the shapes, or a 24-viewBox glyph scales these again and paints two-thirds of the stated weight. */ --ds-icon-stroke-12: 1; --ds-icon-stroke-16: 1.3333; --ds-icon-stroke-20: 1.6667; --ds-icon-stroke-24: 2; /* Typography family */ --ds-font-family-sans: "Geist", sans-serif; --ds-font-family-mono: "Geist Mono", monospace; } html.dark-theme { --ds-color-primary-primary: #a69cfe; --ds-color-primary-on-primary: #171717; --ds-color-primary-primary-container: #262626; --ds-color-primary-on-primary-container: #cdc7fe; --ds-color-secondary-secondary-container: #404040; --ds-color-secondary-on-secondary-container: #fafafa; --ds-color-outline-outline: #737373; --ds-color-outline-outline-variant: #404040; --ds-color-surface-surface: #171717; --ds-color-surface-surface-container-lowest: #1f1f1f; --ds-color-surface-surface-container-low: #1f1f1f; --ds-color-surface-surface-container: #262626; --ds-color-surface-surface-container-high: #262626; --ds-color-surface-surface-container-highest: #404040; --ds-color-surface-on-background: #fafafa; --ds-color-surface-on-surface: #fafafa; --ds-color-surface-on-surface-variant: #d4d4d4; --ds-color-surface-on-surface-subtle: #a3a3a3; --ds-color-inverse-inverse-surface: #fafafa; --ds-color-inverse-inverse-on-surface: #171717; --ds-color-inverse-inverse-primary: #5f4dff; --ds-color-state-focus-ring: #a3a3a3; --ds-color-state-focus-ring-halo: rgba(163, 163, 163, 0.5); --ds-color-state-error-error: #f87171; --ds-color-state-error-on-error: #0a0a0a; --ds-color-state-error-error-container: #7f1d1d; --ds-color-state-error-on-error-container: #fca5a5; --ds-color-state-error-error-border: #b91c1c; --ds-color-state-error-error-ring-halo: rgba(158, 73, 68, 0.2); --ds-color-state-success-success: #4ade80; --ds-color-state-success-on-success: #0a0a0a; --ds-color-state-success-success-container: #14532d; --ds-color-state-success-on-success-container: #86efac; --ds-color-state-success-success-border: #15803d; --ds-color-state-warning-warning: #fbbf24; --ds-color-state-warning-on-warning: #0a0a0a; --ds-color-state-warning-warning-container: #78350f; --ds-color-state-warning-on-warning-container: #fcd34d; --ds-color-state-warning-warning-border: #b45309; --ds-color-state-info-info: #60a5fa; --ds-color-state-info-on-info: #0a0a0a; --ds-color-state-info-info-container: #1e3a8a; --ds-color-state-info-on-info-container: #93c5fd; --ds-color-state-info-info-border: #1d4ed8; } /* Guest mode re-brands per customer at runtime, so the brand-bearing roles bind to the generated M3 roles rather than to a fixed hex. Ordered after the dark block to match global-styles.css, where guest-mode overrides dark-theme. Left at their light values on purpose (see GUEST_ROLE_MAP in the generator): --ds-color-utility-scrim --ds-color-utility-shadow --ds-color-state-hover --ds-color-state-focus --ds-color-state-pressed --ds-color-state-dragged --ds-color-state-disabled-content --ds-color-state-disabled-container --ds-color-state-open --ds-color-state-selected --ds-color-state-focus-ring --ds-color-state-focus-ring-width --ds-color-state-focus-ring-offset --ds-color-state-focus-ring-opacity --ds-color-state-focus-ring-halo --ds-color-state-error-error --ds-color-state-error-on-error --ds-color-state-error-error-container --ds-color-state-error-on-error-container --ds-color-state-error-error-border --ds-color-state-error-error-ring-opacity --ds-color-state-error-error-ring-halo --ds-color-state-success-success --ds-color-state-success-on-success --ds-color-state-success-success-container --ds-color-state-success-on-success-container --ds-color-state-success-success-border --ds-color-state-warning-warning --ds-color-state-warning-on-warning --ds-color-state-warning-warning-container --ds-color-state-warning-on-warning-container --ds-color-state-warning-warning-border --ds-color-state-info-info --ds-color-state-info-on-info --ds-color-state-info-info-container --ds-color-state-info-on-info-container --ds-color-state-info-info-border */ html.guest-mode { --ds-color-primary-primary: var(--md-sys-color-primary); --ds-color-primary-on-primary: var(--md-sys-color-on-primary); --ds-color-primary-primary-container: var(--md-sys-color-primary-container); --ds-color-primary-on-primary-container: var(--md-sys-color-on-primary-container); --ds-color-secondary-secondary-container: var(--md-sys-color-secondary-container); --ds-color-secondary-on-secondary-container: var(--md-sys-color-on-secondary-container); --ds-color-outline-outline: var(--md-sys-color-outline); --ds-color-outline-outline-variant: var(--md-sys-color-outline-variant); --ds-color-surface-surface: var(--md-sys-color-surface); --ds-color-surface-surface-container-lowest: var(--md-sys-color-surface-container-lowest); --ds-color-surface-surface-container-low: var(--md-sys-color-surface-container-low); --ds-color-surface-surface-container: var(--md-sys-color-surface-container); --ds-color-surface-surface-container-high: var(--md-sys-color-surface-container-high); --ds-color-surface-surface-container-highest: var(--md-sys-color-surface-container-highest); --ds-color-surface-on-background: var(--md-sys-color-on-background); --ds-color-surface-on-surface: var(--md-sys-color-on-surface); --ds-color-surface-on-surface-variant: var(--md-sys-color-on-surface-variant); --ds-color-surface-on-surface-subtle: var(--md-sys-color-on-surface-variant); --ds-color-inverse-inverse-surface: var(--md-sys-color-inverse-surface); --ds-color-inverse-inverse-on-surface: var(--md-sys-color-inverse-on-surface); --ds-color-inverse-inverse-primary: var(--md-sys-color-inverse-primary); } html.ds-control-light { --ds-color-primary-on-primary: #f4f3fd; --ds-color-primary-on-primary-container: #5f4dff; --ds-color-secondary-secondary-container: #cbd5e1; --ds-color-secondary-on-secondary-container: #0f172a; --ds-color-outline-outline: #64748b; --ds-color-outline-outline-variant: #e2e8f0; --ds-color-surface-surface: #f1f5f9; --ds-color-surface-surface-container-lowest: #f8fafc; --ds-color-surface-surface-container-low: #f1f5f9; --ds-color-surface-surface-container: #f1f5f9; --ds-color-surface-surface-container-high: #e2e8f0; --ds-color-surface-surface-container-highest: #f8fafc; --ds-color-surface-on-background: #0f172a; --ds-color-surface-on-surface: #0f172a; --ds-color-surface-on-surface-variant: #334155; --ds-color-surface-on-surface-subtle: #475569; --ds-color-state-success-success: #15803d; --ds-color-state-warning-on-warning: #0f172a; --ds-color-state-error-error-border: #b91c1c; --ds-color-state-success-success-border: #166534; --ds-color-state-warning-warning-border: #92400e; --ds-color-state-info-info-border: #1e40af; }