/* ========================================================================== HALO DESIGN SYSTEM v2 "AURORA" — LAYER 1: TOKENS -------------------------------------------------------------------------- Minimal, Apple-flavoured operational UI with one accent: vivid colour glass, used ONLY on the summary layer (metric widgets, status chips, softphone). Aurora adds physics-based motion, a validated chart palette for both themes and a display / body / mono type hierarchy. Token names from v1.1 are kept; only values change and new roles are added. See docs/design-system/HALO_V2_AURORA.md. Channel triplets (`124 58 237`) are used instead of hex so every recipe can composite the same colour at any alpha: rgb(var(--halo-violet) / .12). ========================================================================== */ :root { /* Native date/time controls and scrollbars follow the selected Halo theme. */ color-scheme: light; /* Analytics dataset identity and categorical series; never severity. Series are fixed-order and validated for colour-vision deficiency on the light surface. Dark mode re-points them to deeper steps below. */ --halo-dataset-leads: var(--halo-cyan); --halo-dataset-sales: var(--halo-emerald); --halo-dataset-receipts: var(--halo-indigo); --halo-dataset-calls: var(--halo-amber); --halo-dataset-forms: var(--halo-fuchsia); --halo-series-1: 124 58 237; /* violet */ --halo-series-2: 14 165 233; /* cyan */ --halo-series-3: 16 185 129; /* emerald */ --halo-series-4: 245 158 11; /* amber */ --halo-series-5: 217 70 239; /* fuchsia */ --halo-series-6: var(--halo-indigo); --halo-series-compare: 148 163 184; --halo-chart-grid: rgb(21 20 29 / .07); --halo-block-kpi: 148px; --halo-block-chart: 320px; --halo-block-table: 480px; /* Filled actions keep white labels legible in either theme. */ --halo-action-brand: #6D28D9; --halo-action-critical: #9F1239; --halo-action-warning: #854D0E; --halo-action-success: #065F46; --halo-action-info: #075985; --halo-action-neutral: #475569; /* ---------------------------------------------------------------------- 1. COLOUR FAMILIES Surface hue and readable ink are separate: use --halo-ink-* for text. A tint is a single flat value composited into the frost. ---------------------------------------------------------------------- */ --halo-violet: 124 58 237; --halo-indigo: 79 70 229; --halo-cyan: 14 165 233; --halo-emerald: 16 185 129; --halo-amber: 245 158 11; --halo-rose: 244 63 94; --halo-fuchsia: 217 70 239; --halo-slate: 100 116 139; /* ---------------------------------------------------------------------- 2. SEMANTIC ASSIGNMENT Never pick a family by taste at the call site — pick the meaning. ---------------------------------------------------------------------- */ --halo-tone-brand: var(--halo-violet); --halo-tone-info: var(--halo-cyan); --halo-tone-success: var(--halo-emerald); --halo-tone-warning: var(--halo-amber); --halo-tone-critical: var(--halo-rose); --halo-tone-pipeline: var(--halo-indigo); --halo-tone-neutral: var(--halo-slate); --halo-tone-campaign: var(--halo-fuchsia); /* ---------------------------------------------------------------------- 3. SURFACES & TEXT (light) Neutrals carry a faint violet bias so the brand lives in the ground without painting it. ---------------------------------------------------------------------- */ --halo-ink-brand: #5B21B6; --halo-ink-info: #075985; --halo-ink-success: #065F46; --halo-ink-warning: #854D0E; --halo-ink-critical: #9F1239; --halo-ink-pipeline: #3730A3; --halo-ink-campaign: #86198F; --halo-ink-neutral: #475569; --halo-glass-highlight: rgb(255 255 255 / .80); --halo-canvas: #F4F4F9; --halo-surface: #FFFFFF; --halo-surface-raised: #FFFFFF; /* modals, popovers, toasts */ --halo-surface-sunken: #ECECF3; /* footers, tracks, disabled */ --halo-surface-hover: #F6F5FB; --halo-surface-inverse: #15141D; --halo-text: #15141D; --halo-text-secondary: #5A5869; --halo-text-tertiary: #6E6B7C; --halo-text-inverse: #FFFFFF; --halo-text-on-tint: #15141D; /* neutral text on tinted surfaces */ --halo-hairline: rgb(21 20 29 / .08); --halo-hairline-strong: rgb(21 20 29 / .14); /* ---------------------------------------------------------------------- 4. GLASS RECIPE VARIABLES Flat, not gradient. A glass surface is exactly three things: a frost base, one solid tint mixed into it, and a hairline in the same tone. The blur is what makes it glass — the tint only says which glass. Dark mode re-points these values and nothing else. ---------------------------------------------------------------------- */ --halo-glass-base: rgb(255 255 255 / .55); /* the frost itself */ --halo-glass-tint: 16%; /* how much tone mixes in */ --halo-glass-edge: .32; /* hairline alpha */ --halo-glass-blur: blur(24px) saturate(180%); /* ---------------------------------------------------------------------- 5. SPACE — 4pt scale. Only these values. No arbitrary margins. ---------------------------------------------------------------------- */ --halo-1: 4px; --halo-2: 8px; --halo-3: 12px; --halo-4: 16px; --halo-5: 20px; --halo-6: 24px; --halo-8: 32px; --halo-10: 40px; --halo-12: 48px; --halo-16: 64px; /* ---------------------------------------------------------------------- 6. RADIUS — generous, Apple-ish. Nested radius = parent minus padding. ---------------------------------------------------------------------- */ --halo-radius-xs: 10px; --halo-radius-sm: 10px; --halo-radius-md: 12px; /* controls: inputs, buttons */ --halo-radius-lg: 16px; /* cards, metric widgets */ --halo-radius-xl: 20px; /* modals, sheets, softphone */ --halo-radius-2xl: 26px; --halo-radius-pill: 999px; /* ---------------------------------------------------------------------- 7. TYPE — display for titles and KPIs, one sans for reading, one mono for anything that lines up in a column. Every face has a system fallback so a blocked font host never changes the layout. ---------------------------------------------------------------------- */ --halo-font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif; --halo-font-display: 'Manrope', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; --halo-font-numeric: var(--halo-font-display); --halo-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --halo-text-caption: 0.6875rem; /* 11px — labels, overlines */ --halo-text-sm: 0.8125rem; /* 13px — secondary, meta */ --halo-text-body: 0.875rem; /* 14px — default */ --halo-text-title: 1.0625rem; /* 17px — card & modal titles */ --halo-text-page: 1.5rem; /* 24px — page titles */ --halo-text-display: 1.75rem; /* 28px — metric numbers */ --halo-text-hero: 2.125rem; /* 34px — one hero number */ --halo-tracking-tight: -0.02em; /* large text tightens */ --halo-tracking-wide: 0.06em; /* overlines/caption widen */ /* ---------------------------------------------------------------------- 8. ELEVATION — two-layer, low-contrast. Borders carry structure, shadow only carries "this floats above". ---------------------------------------------------------------------- */ --halo-shadow-flat: none; --halo-shadow-1: 0 1px 2px rgb(21 20 29 / .05), 0 1px 1px rgb(21 20 29 / .03); --halo-shadow-2: 0 2px 4px rgb(21 20 29 / .04), 0 10px 28px rgb(21 20 29 / .07); --halo-shadow-3: 0 6px 12px rgb(21 20 29 / .06), 0 32px 72px rgb(21 20 29 / .16); --halo-shadow-4: 0 8px 16px rgb(21 20 29 / .08), 0 40px 80px rgb(21 20 29 / .22); /* ---------------------------------------------------------------------- 9. MOTION — three curves, four durations. Nothing else is invented at the call site. sheet → what slides: sheets, drawers, scrim, FLIP reorders out → what appears: hover, rows, fields, tabs spring → what answers the finger: modal, button, thumb, toast The spring overshoots to 1.16 at 27% and settles before 85%: a macOS sheet, never a bounce. ---------------------------------------------------------------------- */ --halo-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --halo-ease: var(--halo-ease-sheet); /* v1.1 alias */ --halo-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --halo-ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .281 6.6%, .723 12.5%, .938 16.7%, 1.017, 1.077 20.4%, 1.121, 1.149 24.3%, 1.159, 1.163 27.4%, 1.161, 1.15 30.6%, 1.113 34.3%, 1.043 40.3%, 1.011 43.5%, .992 46.4%, .976 50.2%, .972 56.8%, .98 65.2%, .998 84.4%, 1); --halo-duration-1: 120ms; /* hover, tint changes */ --halo-duration-2: 220ms; /* enter/exit, tabs, modal close */ --halo-duration-3: 360ms; /* sheets, drawers, scrim */ --halo-duration-4: 520ms; /* full spring: modal open, toast */ /* ---------------------------------------------------------------------- 10. FOCUS — one ring for the whole product. Fields grow it to 4px. ---------------------------------------------------------------------- */ --halo-focus-ring: 0 0 0 3px rgb(var(--halo-tone-brand) / .22); --halo-focus-ring-field: 0 0 0 4px rgb(var(--halo-tone-brand) / .16); --halo-focus-color: rgb(var(--halo-tone-brand)); /* 11. CONTROL METRICS */ --halo-control-sm: 32px; --halo-control-md: 38px; --halo-control-lg: 44px; --halo-z-sticky: 100; --halo-z-drawer: 300; --halo-z-modal: 400; --halo-z-softphone: 500; --halo-z-toast: 600; } /* ========================================================================== DARK THEME Not an inversion: violet-biased surfaces, pale inks, more tint in the frost, and chart series with their own deeper steps. Only tokens move; no component rule is duplicated below. Opt in with or any .halo-dark ancestor. ========================================================================== */ :root[data-theme="dark"], .halo-dark { color-scheme: dark; --halo-ink-brand: #C4B5FD; --halo-ink-info: #7DD3FC; --halo-ink-success: #6EE7B7; --halo-ink-warning: #FDE68A; --halo-ink-critical: #FDA4AF; --halo-ink-pipeline: #C7D2FE; --halo-ink-campaign: #F0ABFC; --halo-ink-neutral: #CBD5E1; --halo-glass-highlight: rgb(255 255 255 / .12); --halo-canvas: #0C0B12; --halo-surface: #15141D; --halo-surface-raised: #1B1926; --halo-surface-sunken: #100F16; --halo-surface-hover: #1C1A27; --halo-surface-inverse: #F4F4F9; --halo-text: #F3F2F8; --halo-text-secondary: #A6A3B5; --halo-text-tertiary: #8F8CA3; --halo-text-inverse: #15141D; --halo-text-on-tint: #F3F2F8; --halo-hairline: rgb(255 255 255 / .08); --halo-hairline-strong: rgb(255 255 255 / .15); /* Glass inverts: darker frost, more tone mixed in so the hue survives. */ --halo-glass-base: rgb(22 20 31 / .58); --halo-glass-tint: 28%; --halo-glass-edge: .36; --halo-glass-blur: blur(28px) saturate(200%); /* Chart series: validated against #15141D. Deeper steps, same order. */ --halo-series-1: 139 92 246; /* #8B5CF6 */ --halo-series-2: 2 132 199; /* #0284C7 */ --halo-series-3: 5 150 105; /* #059669 */ --halo-series-4: 217 119 6; /* #D97706 */ --halo-series-5: 192 38 211; /* #C026D3 */ --halo-series-compare: 100 116 139; --halo-chart-grid: rgb(255 255 255 / .07); /* Filled actions lift slightly so white labels keep 4.5:1. */ --halo-action-brand: #7C3AED; --halo-action-critical: #BE123C; --halo-action-warning: #B45309; --halo-action-success: #047857; --halo-action-info: #0369A1; --halo-action-neutral: #64748B; --halo-shadow-1: 0 1px 2px rgb(0 0 0 / .40); --halo-shadow-2: 0 2px 4px rgb(0 0 0 / .30), 0 10px 28px rgb(0 0 0 / .44); --halo-shadow-3: 0 6px 12px rgb(0 0 0 / .40), 0 32px 72px rgb(0 0 0 / .60); --halo-shadow-4: 0 8px 16px rgb(0 0 0 / .40), 0 40px 80px rgb(0 0 0 / .64); --halo-focus-ring: 0 0 0 3px rgb(var(--halo-tone-brand) / .40); --halo-focus-ring-field: 0 0 0 4px rgb(var(--halo-tone-brand) / .28); } /* Accessibility floors ---------------------------------------------------- */ /* Some users disable transparency at the OS level; honour it. */ @media (prefers-reduced-transparency: reduce) { :root, :root[data-theme="dark"], .halo-dark { --halo-glass-base: var(--halo-surface); --halo-glass-blur: none; } } /* No backdrop-filter (older Firefox, some embedded webviews): fall back to a solid tinted surface so the number never sits on a translucent mush. */ @supports not (backdrop-filter: blur(1px)) { :root { --halo-glass-base: rgb(255 255 255 / .96); } :root[data-theme="dark"], .halo-dark { --halo-glass-base: rgb(22 20 31 / .96); } } /* Engines without linear() easing get the sheet curve instead of a broken declaration; the motion stays decelerating, just without the overshoot. */ @supports not (animation-timing-function: linear(0, 1)) { :root { --halo-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); } } @media (prefers-reduced-motion: reduce) { :root { --halo-duration-1: 1ms; --halo-duration-2: 1ms; --halo-duration-3: 1ms; --halo-duration-4: 1ms; } } /* Shared interaction roles. These belong to Halo, not to a legacy token bridge. */ :root { --halo-on-action: #FFFFFF; --halo-input-border: #8D899D; --halo-input-border-hover: #6F6B7D; --halo-scrim: rgb(14 13 20 / .42); --halo-sidebar-surface: #131220; --halo-sidebar-text: #FFFFFF; --halo-sidebar-muted: rgb(255 255 255 / .70); --halo-sidebar-border: rgb(255 255 255 / .14); --halo-sidebar-width: 260px; --halo-content-max-width: 1760px; --halo-tint-brand: rgb(var(--halo-tone-brand) / .08); --halo-tint-info: rgb(var(--halo-tone-info) / .08); --halo-tint-success: rgb(var(--halo-tone-success) / .08); --halo-tint-warning: rgb(var(--halo-tone-warning) / .08); --halo-tint-critical: rgb(var(--halo-tone-critical) / .08); --halo-tint-pipeline: rgb(var(--halo-tone-pipeline) / .08); --halo-tint-neutral: rgb(var(--halo-tone-neutral) / .08); --halo-selection: rgb(var(--halo-tone-brand) / .18); --halo-transition: var(--halo-duration-2) var(--halo-ease); --halo-transition-fast: var(--halo-duration-1) var(--halo-ease); --halo-transition-spring: var(--halo-duration-3) var(--halo-ease-spring); } :root[data-theme="dark"], .halo-dark { --halo-input-border: #797585; --halo-input-border-hover: #AAA6BC; --halo-scrim: rgb(0 0 0 / .60); --halo-sidebar-surface: #0C0B12; --halo-tint-brand: rgb(var(--halo-tone-brand) / .16); --halo-tint-info: rgb(var(--halo-tone-info) / .14); --halo-tint-success: rgb(var(--halo-tone-success) / .14); --halo-tint-warning: rgb(var(--halo-tone-warning) / .14); --halo-tint-critical: rgb(var(--halo-tone-critical) / .14); --halo-tint-pipeline: rgb(var(--halo-tone-pipeline) / .14); --halo-tint-neutral: rgb(var(--halo-tone-neutral) / .14); --halo-selection: rgb(var(--halo-tone-brand) / .32); } /* Document canvas is paper in either UI theme; it is exported content. */ :root { --halo-paper: #fff; --halo-paper-ink: #15141D; }