/* ============================================================================ HENSHU DESIGN TOKENS — the single source of truth for color, type, spacing, and motion across EVERY surface (app, admin console, landing page). Edit a value here → re-fingerprint (tokens..css) → deploy → the whole product restyles. Documented live at admin.henshu.app → Design rules. Layers: 1. PRIMITIVES — raw ramps. Components must never reference these directly. 2. SEMANTIC — named by PURPOSE (what components/should use). 3. COMPAT — the app's legacy var names, aliased onto the semantics so 73k lines of existing CSS inherit without a rewrite. ========================================================================== */ :root { /* ── 1. PRIMITIVES ─────────────────────────────────────────────────────── */ /* Brand ramp, dark → light (9 shades). 500 is THE Henshu purple. */ --brand-900: #3d2a99; --brand-800: #4c33c4; --brand-700: #5d3fe0; --brand-600: #6b4ef0; --brand-500: #7c5cff; --brand-400: #8b6cff; --brand-300: #a78bfa; --brand-200: #c4b0ff; --brand-100: #e4dbff; /* Neutrals, dark → light (from the surfaces actually in use). */ --neutral-950: #070708; --neutral-900: #0a0a0b; --neutral-850: #0e0e10; --neutral-800: #131315; --neutral-750: #161618; --neutral-700: #1c1c20; --neutral-300: #8b8b93; --neutral-200: #a3a3ab; --neutral-100: #e0dfdb; --neutral-0: #ffffff; /* ── 2. SEMANTIC TOKENS ────────────────────────────────────────────────── */ /* Color by purpose */ --color-primary: var(--brand-500); --color-primary-hover: var(--brand-400); --color-primary-active: var(--brand-700); --color-on-primary: #ffffff; --color-brand-tint: rgba(124, 92, 255, .14); --color-brand-tint-strong: rgba(124, 92, 255, .22); --color-brand-text: var(--brand-200); --color-success: #5BCF8E; --color-error: #ef4444; --color-error-text: #ff8585; --color-error-tint: rgba(239, 68, 68, .12); --color-error-tint-strong: rgba(239, 68, 68, .22); --color-warning: #FFB454; --color-info: #5E9CFF; /* Surfaces + text + hairlines */ --color-bg: var(--neutral-900); --color-bg-deep: var(--neutral-950); --color-surface-1: var(--neutral-850); --color-surface-2: var(--neutral-800); --color-surface-3: var(--neutral-750); --color-surface-4: #17171a; --color-surface-modal: #0f0f12; --color-text-1: #ffffff; --color-text-2: rgba(235, 235, 245, .6); --color-text-3: rgba(235, 235, 245, .45); --color-hairline-1: rgba(255, 255, 255, .06); --color-hairline-2: rgba(255, 255, 255, .08); --color-hairline-3: rgba(255, 255, 255, .12); --skel-hi: rgba(255, 255, 255, .13); /* skeleton shimmer highlight */ /* Type scale + weights — full ramp (the app is ≤13px-heavy, so the small steps below carry most of the UI; the audit collapsed 40 sizes into these). */ --text-5xl: 48px; --text-4xl: 36px; --text-3xl: 30px; --text-2xl: 24px; --text-xl: 20px; --text-lg: 18px; --text-md: 16px; --text-base: 14px; --text-sm: 13px; --text-xs: 12px; --text-2xs: 11px; --text-micro: 10px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* transitional — migrate toward 500/700 over time */ --fw-bold: 700; --fw-extrabold: 800; /* Spacing — 4px grid + two de-facto half-steps (6/10px) the app leans on, plus the on-grid rungs the audit found had no token (28/36/56/60px). */ --sp-1: 4px; --sp-1-5: 6px; --sp-2: 8px; --sp-2-5: 10px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-15: 60px; --sp-16: 64px; /* Type families (the app aliases --sans/--serif/--mono/--display onto these) */ --font-sans: 'Libre Franklin', 'Hanken Grotesk', system-ui, sans-serif; --font-serif: 'Libre Franklin', 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; /* Status colors — production stages + priorities (part of the design language) */ --color-stage-inbound: #5E9CFF; --color-stage-production: #A78BFA; --color-stage-review: #5BCF8E; --color-stage-scheduled: #5BD1C0; --color-stage-published: #9A9AA2; --color-prio-high: #FF6B6B; --color-prio-med: #FFB454; --color-prio-low: #9A9AA2; /* Motion ladder (documented in Design rules → Animations) */ --dur-toggle: 100ms; /* toggles, hover states */ --dur-press: 200ms; /* button presses */ --dur-modal: 300ms; /* modals, dropdowns */ --dur-page: 400ms; /* page transitions */ --dur-complex: 500ms; /* orchestrated/complex motion */ /* ── 3. COMPAT ALIASES (legacy app var names → semantics) ─────────────── */ /* Brand purple: --coral is the legacy Sauce-era name for the SAME purple. */ --purple: var(--color-primary); --coral: var(--color-primary); --purple-soft: var(--color-brand-tint); --coral-shade: var(--color-primary-active); --purple-tint: var(--color-brand-tint); --purple-tint-strong: var(--color-brand-tint-strong); --purple-text: var(--color-brand-text); --success: var(--color-success); --danger: var(--color-error); --danger-text: var(--color-error-text); --warn: var(--color-warning); --blue: var(--color-info); --green: var(--color-success); --bg-app: var(--color-bg); --bg-deep: var(--color-bg-deep); --bg-main: var(--color-bg); --surf-1: var(--color-surface-1); --surf-2: var(--color-surface-2); --surf-3: var(--color-surface-3); --surf-4: var(--color-surface-4); --surf-modal: var(--color-surface-modal); /* ── Liquid glass ─────────────────────────────────────────────────────────── THE parent definition. Design Rules (admin.html #dr-glass) renders straight from these, and so does every floating panel in the app — change a value here, re-fingerprint, deploy, and the whole app + the console + the landing page restyle together. Never re-type these numbers anywhere else. --lg-tint the light film ON TOP; this is the "glass" itself --lg-blur what makes the backdrop legible-but-abstract --lg-menu fill under the tint for a TOP-LEVEL floating menu --lg-base fill under the tint for a panel INSIDE another glass surface (a backdrop-filtered ancestor is a backdrop root, so a nested blur samples nothing and would render see-through) --lg-solid opt-out fill for the rare panel that must be near-opaque Design rule: tint + blur, NOT opacity. Push --lg-menu toward 100% and the blur stops reading — the panel goes back to being a flat grey box. */ --lg-tint: rgba(255, 255, 255, 0.08); --lg-blur: blur(18px) saturate(180%); --lg-border: rgba(255, 255, 255, 0.2); --lg-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 28px rgba(0, 0, 0, 0.3); --lg-menu: color-mix(in srgb, var(--color-surface-modal) 78%, transparent); --lg-base: color-mix(in srgb, var(--color-surface-modal) 86%, transparent); --lg-solid: color-mix(in srgb, var(--color-surface-modal) 97%, transparent); --bg-card: var(--color-surface-2); --card: var(--color-surface-2); --surface: var(--color-surface-2); --bg-dark: var(--color-surface-3); --text-1: var(--color-text-1); --text-2: var(--color-text-2); --text-3: var(--color-text-3); --hairline: var(--color-hairline-1); --hairline-2: var(--color-hairline-2); --hairline-3: var(--color-hairline-3); --border-d: var(--color-hairline-2); --white: var(--neutral-0); --black: var(--neutral-950); --muted: var(--neutral-300); --sec: var(--neutral-200); --mid-gray: var(--neutral-100); --dark: var(--color-surface-2); --stage-inbound: var(--color-stage-inbound); --stage-production: var(--color-stage-production); --stage-review: var(--color-stage-review); --stage-scheduled: var(--color-stage-scheduled); --stage-published: var(--color-stage-published); --prio-high: var(--color-prio-high); --prio-med: var(--color-prio-med); --prio-low: var(--color-prio-low); /* Legacy motion names → the standard ladder (nearest bucket). */ --dur-quick: var(--dur-toggle); --dur-short: var(--dur-toggle); --dur-med: var(--dur-press); --dur-long: var(--dur-page); /* ── 4. MOBILE UI ───────────────────────────────────────────────────────── THE parent definition for the phone app's shape language. Design Rules (admin.html #dr-mobile) renders straight from these, and every mobile component in app-shell.css consumes them — change a value here, re-fingerprint, deploy, and the mobile UI follows. Never re-type these numbers in a component rule. Scope: these describe SHAPE (size, radius, spacing, icon box, motion), not color. Mobile color still comes from the semantic layer above (--surface / --ink / --line / --color-primary), so a theme change and a shape change stay independent of each other. Not tokens, don't confuse them: --m-hotbar-h and --m-app-header-h are set at RUNTIME by the app (measured chrome heights used to pad scroll areas). The design values for that chrome are --m-island-h / --m-topbar-h below. ─────────────────────────────────────────────────────────────────────── */ /* Tabs — EVERY mobile pill bar (task tabs, Home segments, project view tabs, stage bar) is built from these six values plus the shared sliding thumb. They used to disagree: 34px here, 36px there, 38px somewhere else. One set of numbers now, so a change to a pill is a change to every pill. */ --m-tab-h: 38px; /* pill height — also the bar's min height */ --m-tab-pad-x: 15px; /* horizontal padding inside a pill */ --m-tab-gap: 6px; /* gap between pills */ --m-tab-radius: 999px; /* fully round; the thumb inherits it */ --m-tab-font: 14px; --m-tab-weight: 600; /* Icons — five sizes, nothing in between. Every mobile icon picks one. --m-icon-tile is the rounded square BEHIND a list-row icon. */ --m-icon-xs: 14px; /* chevrons, carets, inline affordances */ --m-icon-sm: 18px; /* swipe-action pills, dense rows */ --m-icon-md: 20px; /* list-row icons */ --m-icon-lg: 22px; /* hotbar + header icons */ --m-icon-xl: 26px; /* primary card actions (comment/share/…) */ --m-icon-tile: 40px; --m-icon-tile-radius: 11px; /* Sizing — tap targets and fixed chrome. --m-touch-min is the floor for ANYTHING tappable; nothing on a phone may be smaller. */ --m-touch-min: 44px; --m-row-h: 60px; /* list-row min height */ --m-island-h: 56px; /* floating bottom hotbar island */ --m-topbar-h: 54px; /* top app header */ --m-swipe-act-w: 78px; /* ONE swipe-action pill (More/Share/Delete); the reveal distance is pills x this width */ /* Spacing — the mobile rhythm. All multiples of 4 (see "The rules"). */ --m-gutter: 16px; /* page side margin — titles, cards, lists */ --m-gap: 8px; /* between sibling controls */ --m-pad: 14px; /* inside a card / row */ --m-section-gap: 16px; /* between stacked sections */ /* Radii */ --m-radius-card: 12px; /* list card / grouped container */ --m-radius-surface: 16px; /* content surface inside a card (desc box) */ --m-radius-sheet: 20px; /* bottom sheet top corners */ --m-radius-island: 28px; /* floating hotbar (== --m-island-h / 2) */ /* Type — the three mobile sizes that matter. */ --m-title: 30px; /* page title (Home / Projects / task name) */ --m-body: 16px; /* body copy, description, comments */ --m-label: 12px; /* uppercase section labels */ } /* ============================================================================ LIGHT THEME — semantic overrides. The compat aliases chain legacy → semantic, so redefining the semantics here flips EVERY consumer (app, admin console, landing) in one place. App-specific component fixups live in the app CSS's own light block; this is the token layer. ========================================================================== */ html[data-theme="light"] { color-scheme: light; --color-bg: #f5f6f8; --color-bg-deep: #eceef1; --color-surface-1: #ffffff; --color-surface-2: #ffffff; --color-surface-3: #f7f7f9; --color-surface-4: #f2f2f5; --color-surface-modal: #ffffff; --color-text-1: #17171c; --color-text-2: #5f5f6b; --color-text-3: #9a9aa6; --color-hairline-1: rgba(0, 0, 0, .07); --color-hairline-2: rgba(0, 0, 0, .09); --color-hairline-3: rgba(0, 0, 0, .12); --skel-hi: rgba(0, 0, 0, .12); /* Liquid glass, light theme. The three fills above are color-mix()'d from --color-surface-modal, which is already #ffffff here, so they flip on their own — only the tint, border and highlight need a lighter voice. */ --lg-tint: rgba(255, 255, 255, 0.55); --lg-border: rgba(0, 0, 0, .10); --lg-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 28px rgba(0, 0, 0, .14); --color-primary: #7a5fd6; --color-primary-hover: #6b4ef0; --color-primary-active: #5f48c0; --color-brand-tint: rgba(122, 95, 214, .12); --color-brand-tint-strong: rgba(122, 95, 214, .20); --color-brand-text: var(--brand-700); --color-error-text: #c92f2f; /* status colors darken on white so text/badges keep contrast */ --color-success: #3f9d54; --color-warning: #b48f10; --color-info: #2f6fb0; /* Neutral aliases that skip the semantic layer */ --muted: #76767e; --sec: #55555e; --mid-gray: #3a3a42; --black: #e9ebee; }