/* ============================================================================= HF Hub — Design Tokens ----------------------------------------------------------------------------- The single source of truth for EVERY colour and dimension in the application. No other file in this project declares a hex value. Ever. Three layers: 1. Raw brand palette — the physical brand colours. NEVER referenced by a component. Only the semantic layer may reach in here. 2. Ramps & functional — the warm neutral ramp, the functional colours (light + dark variants), and the categorical chart colours. Also never touched directly by components. 3. Semantic layer — the ONLY layer a component is ever allowed to reference. Defined twice: once for light, once for dark. Toggle [data-theme] to re-map. Non-colour scales (spacing, radii, elevation, motion, type stacks) live in the base :root block because they do not change between themes. ============================================================================= */ :root { /* --------------------------------------------------------------------------- LAYER 1 — RAW BRAND PALETTE Do not reference these from a component. Semantic layer only. --------------------------------------------------------------------------- */ --brand-aubergine: #231E25; --brand-caramel: #B6815D; --brand-taupe: #D8B597; --brand-blush: #ECD9CA; /* --------------------------------------------------------------------------- LAYER 2 — NEUTRAL RAMP Derived from the aubergine hue so the greys read warm, never cold slate. --------------------------------------------------------------------------- */ --neutral-0: #FFFFFF; --neutral-25: #FBF9F8; --neutral-50: #F5F2F0; --neutral-100: #EDE8E5; --neutral-200: #DFD8D4; --neutral-300: #C7BEBA; --neutral-400: #A79C9A; --neutral-500: #847A7A; --neutral-600: #635B5E; --neutral-700: #463F44; --neutral-800: #312A31; --neutral-900: #231E25; /* --------------------------------------------------------------------------- LAYER 2 — FUNCTIONAL COLOURS Each ships a light and a dark variant, because a colour that works on white fails on aubergine. The semantic layer picks the correct variant per theme. --------------------------------------------------------------------------- */ --func-positive-light: #5F7350; --func-positive-dark: #97AD86; --func-warning-light: #8A6819; --func-warning-dark: #D4AC5A; --func-negative-light: #A34733; --func-negative-dark: #D98A72; --func-info-light: #5F7285; --func-info-dark: #93A5B5; /* --------------------------------------------------------------------------- LAYER 2 — CATEGORICAL CHART COLOURS (in order 1..7) --------------------------------------------------------------------------- */ --chart-1: #B6815D; --chart-2: #4A3F4A; --chart-3: #6E8062; --chart-4: #5F7285; --chart-5: #D8B597; --chart-6: #A8862E; --chart-7: #8A6B7A; /* --------------------------------------------------------------------------- SPACING — four pixel base. HARD RULE: nothing in this project uses an off-scale value. If a gap isn't one of these nine steps, the design is wrong, not the scale. --------------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* --------------------------------------------------------------------------- CONTROL SIZING — ergonomic constants for interactive controls. These sit alongside the spacing scale but are NOT part of it: a control height is not a multiple of a spacing unit. They are deliberately literal so that tuning the spacing scale can never silently resize a button, field or toggle. Do not derive these from --space-*, and do not use --space-* for a control's own height/knob dimensions — use these instead. --------------------------------------------------------------------------- */ --control-h-sm: 28px; --control-h-md: 36px; --control-h-lg: 44px; --control-pad-x-sm: 12px; --control-pad-x-md: 16px; --control-pad-x-lg: 24px; --badge-pad-y: 2px; --badge-pad-x: 8px; --toggle-w: 36px; --toggle-h: 20px; --toggle-knob: 16px; --choice-size: 16px; --spark-w: 64px; --spark-h: 24px; --row-h-compact: 32px; --row-h-comfortable: 40px; --row-h-spacious: 52px; --metric-value-md: 2rem; /* stepped metric value — medium-length values */ --metric-value-lg: 1.5rem; /* stepped metric value — long values (below display-2) */ /* --------------------------------------------------------------------------- RADII --------------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* --------------------------------------------------------------------------- ELEVATION — three and only three. No other shadows exist. --------------------------------------------------------------------------- */ --shadow-none: none; --shadow-popover: 0 4px 16px rgba(35, 30, 37, 0.10); --shadow-modal: 0 16px 48px rgba(35, 30, 37, 0.18); /* --------------------------------------------------------------------------- MOTION — durations plus one shared easing curve the whole system uses. --------------------------------------------------------------------------- */ --motion-micro: 120ms; --motion-standard: 200ms; --motion-entrance: 320ms; --motion-data: 600ms; /* Primary-mark entrance — the deliberate settle of a page's hero mark (the login logo, the investor-pack hero). Slower and later than the standard entrance so the canvas fully establishes before the mark arrives. Named by role, not length, so they survive retuning. */ --motion-mark-settle: 900ms; --motion-mark-delay: 300ms; /* Ambient loops — continuous background animation such as skeleton shimmer and indeterminate progress. Deliberately its own token, distinct from the feedback durations above (which time discrete state changes): a slow endless loop is not a multiple of a UI-feedback duration, and coupling them would let retuning one silently retune the other. */ --motion-ambient: 1500ms; /* Data rendering itself onto a chart — the draw-on entrance (line stroke, bar column grow, donut sweep and centre count-up). A calm, deliberate span, longer than any feedback duration on purpose: those time discrete interface state changes (a hover, an accordion), whereas this is data arriving. All chart types share it so a page of several charts resolves as one gesture, not four. */ --motion-draw: 3000ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* Long-form data animation (the chart draw-on). A true ease-out — quick off the mark, then a long, even deceleration that settles into place. The shared --ease above is tuned for short interface transitions; over a span this long it reaches its end early and reads as halting rather than arriving. One curve, shared by all four chart draw-on types. */ --ease-data: cubic-bezier(0.215, 0.61, 0.355, 1); /* --------------------------------------------------------------------------- TYPE STACKS --------------------------------------------------------------------------- */ --font-display: "presti-display", Georgia, serif; /* Interim measure: the body stack stays on Helvetica system fallbacks until a web licence for Helvetica is resolved. Swap the first family when it lands. */ --font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; } /* ============================================================================= LAYER 3 — SEMANTIC (LIGHT) The only layer components reference. :root doubles as the light theme so the app is correct before any [data-theme] is set. ============================================================================= */ :root, [data-theme="light"] { /* Surfaces */ --surface-page: var(--neutral-25); --surface-raised: var(--neutral-0); --surface-sunken: var(--neutral-50); --surface-inverse: var(--brand-aubergine); --surface-hover: var(--neutral-100); --surface-selected: rgba(182, 129, 93, 0.10); /* Text */ --text-primary: var(--brand-aubergine); --text-secondary: var(--neutral-500); --text-tertiary: var(--neutral-400); --text-inverse: var(--brand-blush); --text-accent: #8F6244; /* caramel darkened to pass AA on a light surface */ /* Borders */ --border-subtle: var(--neutral-100); --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-accent: var(--brand-caramel); /* Accent */ --accent: var(--brand-caramel); --accent-hover: #A2704E; --accent-contrast: #FFFFFF; --focus-ring: var(--brand-caramel); /* Functional — light variants map onto the semantic names */ --positive: var(--func-positive-light); --warning: var(--func-warning-light); --negative: var(--func-negative-light); --info: var(--func-info-light); } /* ============================================================================= LAYER 3 — SEMANTIC (DARK) ============================================================================= */ [data-theme="dark"] { /* Surfaces */ --surface-page: var(--neutral-900); --surface-raised: var(--neutral-800); --surface-sunken: #1B171C; --surface-inverse: var(--neutral-25); --surface-hover: rgba(236, 217, 202, 0.06); --surface-selected: rgba(182, 129, 93, 0.16); /* Text */ --text-primary: var(--brand-blush); --text-secondary: #A1928C; --text-tertiary: #7A6E70; --text-inverse: var(--brand-aubergine); --text-accent: var(--brand-taupe); /* Borders */ --border-subtle: rgba(236, 217, 202, 0.08); --border-default: rgba(236, 217, 202, 0.14); --border-strong: rgba(236, 217, 202, 0.24); --border-accent: var(--brand-caramel); /* Accent */ --accent: var(--brand-taupe); --accent-hover: var(--brand-blush); --accent-contrast: var(--brand-aubergine); --focus-ring: var(--brand-taupe); /* Functional — dark variants map onto the semantic names */ --positive: var(--func-positive-dark); --warning: var(--func-warning-dark); --negative: var(--func-negative-dark); --info: var(--func-info-dark); }