/* ============================================================================= ShareLadder — Design Tokens ----------------------------------------------------------------------------- The single source of truth for the visual system. Framework-agnostic CSS custom properties: portable into any stack (Django templates, Tailwind, web components, future React island) without change. Two layers: 1. PRIMITIVES (--sl-*) raw palette, type, space, etc. Never used directly by components — only referenced by the semantic layer below. 2. SEMANTIC (shadcn names) --background, --foreground, --primary, ... What components actually consume. This is the contract Basecoat / shadcn tokens speak, so component code stays portable. Palette identity: a warm cream canvas (the warmth that defines this system) carrying a cool, confident **Drafting Navy** brand (the logo's own navy), a fresh **Teal** "your-turn" accent, and the logo's **Coral** as a tightly fenced brand flourish. Green steps back to the "complete" state; azure signals "in progress". Light and dark are the only theming dimensions. ============================================================================= */ :root { /* =========================================================================== 1 · PRIMITIVES =========================================================================== */ /* --- Brand · "Drafting Navy" ------------------------------------------------- Deep, considered, trustworthy — the ink of a plan. A true navy, deliberately NOT the indigo/violet fintech cliché, sitting in confident contrast to the warm parchment it lives on. The ramp is anchored on the logo's own navy: navy-600 is exactly the mark's base fold. */ --sl-navy-50: #ecf1f9; --sl-navy-100: #cedbee; --sl-navy-200: #a1badd; --sl-navy-300: #6991c9; --sl-navy-400: #3b67a5; --sl-navy-500: #2e507f; --sl-navy-600: #27446c; /* ← primary brand (the logo navy) */ --sl-navy-700: #1e3452; --sl-navy-800: #16263c; --sl-navy-900: #101c2d; --sl-navy-950: #0b131e; /* --- Accent · "Teal" --------------------------------------------------------- Fresh, calm, "go". The rung you can climb right now. Used sparingly: the one "your-turn" action, progress, celebration. A cool accent that escapes any warning/amber association. NOT a default button surface. */ --sl-teal-50: #e6f4f1; --sl-teal-100: #c4e7e0; --sl-teal-200: #95d4c9; --sl-teal-300: #5fbdac; --sl-teal-400: #2ba491; --sl-teal-500: #1f9c86; /* ← bright accent / status dot */ --sl-teal-600: #157a69; /* ← accent button surface (AA on white) */ --sl-teal-700: #105e50; /* ← text-on-tint (AA) */ /* --- Brand flourish · Coral -------------------------------------------------- The logo's coral. A brand accent, NEVER a state colour: it stays out of the six status hues (problem keeps its deeper clay red) and is never small text on a light ground (2.8:1 on white). Feature-card eyebrow, celebration moments, marketing surfaces. */ --sl-coral-50: #fdeeed; --sl-coral-100: #fbdbda; --sl-coral-300: #f17372; /* ← the brand coral (the mark's top fold) */ --sl-coral-600: #b0413f; /* text-safe coral on light surfaces (AA) */ /* --- Neutrals · warm, faint green undertone ---------------------------------- The system's warmth. Never pure grey, never stark white — calm rather than clinical, and a deliberate counterweight to the cool navy/teal. */ --sl-ink-950: #16201b; /* primary text */ --sl-ink-900: #1e2b24; --sl-ink-800: #2a3a31; --sl-ink-700: #3c4f44; --sl-ink-600: #51655a; /* secondary text (AA on canvas) */ --sl-ink-500: #6b7e72; /* muted text / icons */ --sl-ink-400: #93a399; --sl-ink-300: #bdc8c0; --sl-ink-200: #dbe2dc; /* strong border */ --sl-ink-100: #e9ede8; /* hairline border / divider */ --sl-ink-50: #f2f5f1; --sl-canvas: #f8f0e9; /* the app background: warm cream, half a step from the brand cream */ --sl-canvas-sunken: #f1e7dc; /* recessed wells, code blocks, "waiting" fill */ --sl-surface: #fffdf9; /* cards, sheets (warm off-white, not pure #fff) */ --sl-surface-2: #faf3ec; /* secondary / subtly raised surface */ --sl-cream: #f9ece4; /* the brand cream, full strength — brand moments only (sign-in backdrop, education bands, empty states) */ --sl-white: #ffffff; /* literal white primitive (rarely used directly) */ /* --- Semantic hues ----------------------------------------------------------- For state, not decoration. Each has a 50 tint (backgrounds), a 500/600 (fills) and a 700 (text-on-tint, AA-safe). blue/azure → "in progress" green → "complete" red → "problem" */ --sl-blue-50: #e8f1fb; --sl-blue-100: #cbe0f5; --sl-blue-500: #2f7fd1; --sl-blue-600: #2566ad; --sl-blue-700: #1d5089; /* Green is no longer the brand — it now expresses the "complete / done" state. Kept deliberately deep (forest) so it never blurs with the bright teal accent. */ --sl-green-50: #eaf4ee; --sl-green-100: #cfe7da; --sl-green-200: #a6d0bb; --sl-green-500: #2a7458; --sl-green-600: #1e5c45; --sl-green-700: #184b38; --sl-red-50: #fbede8; --sl-red-100: #f6d5cc; --sl-red-500: #c2492f; --sl-red-600: #a53c26; --sl-red-700: #86311f; --sl-amber-50: #fffbeb; --sl-amber-100: #fef3c7; --sl-amber-600: #d97706; /* --- Typography -------------------------------------------------------------- Display: Hanken Grotesk, heavy weights (700/800). A confident humanist grotesque that reads calm and trustworthy without the "creative serif" tell. The system's warmth lives in the canvas and the soft depth, not in the letterforms. Text/UI: Hanken Grotesk, regular weights. One family from headline to caption keeps the voice coherent and the font payload small. Mono: IBM Plex Mono. Reference numbers, plot codes, audit IDs. */ --sl-font-display: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --sl-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; --sl-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Modular scale (1.20 minor third), rem on a 16px root */ --sl-text-xs: 0.75rem; /* 12 */ --sl-text-sm: 0.875rem; /* 14 */ --sl-text-base: 1rem; /* 16 */ --sl-text-md: 1.125rem; /* 18 */ --sl-text-lg: 1.375rem; /* 22 */ --sl-text-xl: 1.75rem; /* 28 */ --sl-text-2xl: 2.25rem; /* 36 */ --sl-text-3xl: 3rem; /* 48 */ /* Fluid display — clamps from mobile to desktop */ --sl-text-display: clamp(2.75rem, 1.6rem + 5.2vw, 4.5rem); /* 44 → 72 */ --sl-text-hero: clamp(3.25rem, 1.4rem + 8vw, 6rem); /* 52 → 96 */ --sl-leading-tight: 1.05; --sl-leading-snug: 1.2; --sl-leading-normal: 1.5; --sl-leading-relaxed: 1.65; --sl-tracking-tight: -0.02em; --sl-tracking-snug: -0.01em; --sl-tracking-normal: 0; --sl-tracking-wide: 0.04em; /* eyebrows / overlines */ --sl-weight-regular: 400; --sl-weight-medium: 500; --sl-weight-semibold: 600; --sl-weight-bold: 700; /* --- Spacing · 4px base ------------------------------------------------------ */ --sl-space-0: 0; --sl-space-1: 0.25rem; /* 4 */ --sl-space-2: 0.5rem; /* 8 */ --sl-space-3: 0.75rem; /* 12 */ --sl-space-4: 1rem; /* 16 */ --sl-space-5: 1.25rem; /* 20 */ --sl-space-6: 1.5rem; /* 24 */ --sl-space-8: 2rem; /* 32 */ --sl-space-10: 2.5rem; /* 40 */ --sl-space-12: 3rem; /* 48 */ --sl-space-16: 4rem; /* 64 */ --sl-space-20: 5rem; /* 80 */ --sl-space-24: 6rem; /* 96 */ --sl-space-32: 8rem; /* 128 */ /* --- Radius · soft, friendly, never bubbly ----------------------------------- */ --sl-radius-xs: 0.25rem; /* 4 — tags, focus chips */ --sl-radius-sm: 0.5rem; /* 8 — inputs, small buttons */ --sl-radius-md: 0.75rem; /* 12 — buttons, fields */ --sl-radius-lg: 1rem; /* 16 — cards */ --sl-radius-xl: 1.5rem; /* 24 — sheets, hero panels */ --sl-radius-full: 9999px; /* pills, avatars */ /* --- Elevation --------------------------------------------------------------- A deliberate divergence from Revolut (which bans shadows): soft, low-opacity shadows read as reassuring depth, not slick flatness. Tinted WARM, to the parchment canvas they fall on (not a cool slate), so depth feels of-a-piece with the surface rather than laid over it. Never harsh black. */ --sl-shadow-xs: 0 1px 2px hsl(34 24% 12% / 0.05); --sl-shadow-sm: 0 1px 3px hsl(34 24% 12% / 0.07), 0 1px 2px hsl(34 24% 12% / 0.04); --sl-shadow-md: 0 4px 12px hsl(34 24% 12% / 0.08), 0 2px 4px hsl(34 24% 12% / 0.05); --sl-shadow-lg: 0 12px 28px hsl(34 24% 12% / 0.10), 0 4px 10px hsl(34 24% 12% / 0.05); --sl-shadow-xl: 0 24px 56px hsl(34 24% 12% / 0.14), 0 8px 20px hsl(34 24% 12% / 0.06); /* Focus ring as a shadow (for non-outline focus styling) */ --sl-shadow-focus: 0 0 0 3px var(--sl-navy-200); /* --- Motion ------------------------------------------------------------------ */ --sl-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* gentle settle */ --sl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --sl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* tiny overshoot — use sparingly */ --sl-dur-fast: 120ms; --sl-dur-base: 180ms; --sl-dur-slow: 240ms; --sl-dur-slower: 360ms; /* --- Layout ------------------------------------------------------------------ */ --sl-container: 1200px; /* max content width */ --sl-container-backoffice: var(--sl-container); /* HA/staff (back-office + analytics) content band — one lever for every staff screen */ --sl-container-prose: 68ch; /* readable text column (KIDs, education) */ --sl-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem); --sl-sidenav-width: 15.5rem; /* staff left sidebar (.sl-sidenav) fixed width */ /* =========================================================================== 2 · SEMANTIC LAYER (shadcn / Basecoat token contract) Components consume ONLY these. To re-theme, override here (or in [data-theme]). =========================================================================== */ --background: var(--sl-canvas); --foreground: var(--sl-ink-950); --card: var(--sl-surface); --card-foreground: var(--sl-ink-950); --popover: var(--sl-surface); --popover-foreground: var(--sl-ink-950); --primary: var(--sl-navy-600); --primary-foreground: #fbfaf6; /* warm off-white, not pure #fff */ --primary-hover: var(--sl-navy-700); --secondary: var(--sl-ink-100); --secondary-foreground: var(--sl-ink-800); --muted: var(--sl-ink-50); --muted-foreground: var(--sl-ink-600); /* AA on canvas (5.6:1) for hint / meta / muted text */ /* shadcn --accent is the SUBTLE interactive tint (hover rows, ghost hovers) — a quiet navy wash. The BRAND "your-turn" accent (Teal) lives in --sl-accent-* and is used intentionally, not as a default surface. */ --accent: var(--sl-navy-50); --accent-foreground: var(--sl-navy-700); --sl-accent: var(--sl-teal-600); --sl-accent-foreground: #fbfaf6; /* warm off-white, not pure #fff */ /* Brand-tinted chip: the quiet navy wash behind selected rows, date chips and icon tiles, with the icon/text colour that sits on it. Semantic so dark mode can deepen the wash instead of staying light. */ --chip: var(--sl-navy-50); --chip-foreground: var(--sl-navy-600); /* The secondary button's tonal fill, named for the control rather than for the step on the ramp. */ --btn-secondary-fill: var(--sl-navy-100); /* Its hover, one step down the same ramp, so the press deepens the tint rather than changing colour. */ --btn-secondary-fill-hover: var(--sl-navy-200); --destructive: var(--sl-red-500); --destructive-foreground: #fbfaf6; /* warm off-white, not pure #fff */ --border: var(--sl-ink-100); --border-strong: var(--sl-ink-200); --border-subtle: var(--sl-ink-50); /* very subtle dividers / row hairlines */ --input: var(--sl-ink-200); --ring: var(--sl-navy-400); --radius: var(--sl-radius-md); --text-primary: var(--foreground); /* primary content text */ --text-secondary: var(--muted-foreground); /* secondary / muted text */ --surface-raised: var(--sl-ink-50); /* subtly raised surface (hover, quiet fill) */ --navy: var(--sl-navy-800); /* dark navy for large fills (ribbons, headers) */ --shadow-sm: var(--sl-shadow-sm); /* small card shadow */ --shadow-xl: var(--sl-shadow-xl); /* modal / sheet shadow */ --canvas-sunken: var(--sl-canvas-sunken); /* recessed wells, checklist backgrounds */ --cream: var(--sl-cream); /* full-strength brand cream, brand moments only */ --scrim: hsl(34 24% 12% / 0.4); /* backdrop overlay for modals and drawers */ --success: var(--status-done-dot); /* "yes / on / complete" colour */ --surface-accent: var(--sl-amber-100); /* warm amber tint for highlighted cells */ --amber: var(--sl-amber-600); /* warning / risk amber */ --risk-bg: var(--sl-amber-50); /* risk / warning box background */ /* --- Application status palette ---------------------------------------------- ShareLadder-specific, and high-leverage: these colours render the C11 state machine. Every status pill, timeline node and dashboard cell maps to one of these six states. Keep this list closed — new statuses pick an existing tone. neutral — not started / not applicable active — in progress, with the ShareLadder team or a professional (azure) action — waiting on YOU (the applicant): teal, inviting, never alarming waiting — blocked on a third party (IFA, solicitor, lender) done — complete (deep forest green — distinct from the bright teal action) problem — declined / failed / needs correction */ --status-neutral-fg: var(--sl-ink-600); --status-neutral-bg: var(--sl-ink-50); --status-neutral-dot: var(--sl-ink-400); --status-active-fg: var(--sl-blue-700); --status-active-bg: var(--sl-blue-50); --status-active-dot: var(--sl-blue-500); --status-action-fg: var(--sl-teal-700); --status-action-bg: var(--sl-teal-50); --status-action-dot: var(--sl-teal-500); --status-waiting-fg: var(--sl-ink-700); --status-waiting-bg: var(--sl-canvas-sunken); --status-waiting-dot: var(--sl-ink-500); --status-done-fg: var(--sl-green-700); --status-done-bg: var(--sl-green-50); --status-done-dot: var(--sl-green-600); --status-problem-fg: var(--sl-red-700); --status-problem-bg: var(--sl-red-50); --status-problem-dot: var(--sl-red-500); color-scheme: light; } /* ============================================================================= DARK THEME Warm near-black, not true black — keeps the reassuring register at night, with the navy brand and teal accent lifted for contrast. Toggle with (or prefers-color-scheme below). ============================================================================= */ [data-theme="dark"] { --sl-canvas: #11160f; --sl-canvas-sunken: #0c100a; --sl-surface: #181f15; --sl-surface-2: #20281c; --cream: var(--sl-canvas); /* brand-moment backdrops fall back to the canvas at night */ --background: var(--sl-canvas); --foreground: #eef1ea; --card: var(--sl-surface); --card-foreground: #eef1ea; --popover: var(--sl-surface-2); --popover-foreground: #eef1ea; --primary: var(--sl-navy-300); --primary-foreground: var(--sl-navy-950); --primary-hover: var(--sl-navy-200); --secondary: #2a3327; --secondary-foreground: #dde0d6; --muted: #1c241a; --muted-foreground: #97a48d; --accent: #1b2535; --accent-foreground: var(--sl-navy-200); --sl-accent: var(--sl-teal-400); --sl-accent-foreground: #05221c; --chip: #1b2535; --chip-foreground: var(--sl-navy-200); /* Read from the other end of the ramp: at night the tint has to be lighter than the canvas, not darker. */ --btn-secondary-fill: var(--sl-navy-700); /* Its hover, one step lighter again. */ --btn-secondary-fill-hover: var(--sl-navy-600); --destructive: #d9573c; --destructive-foreground: #1a0f0c; --border: #2c3528; --border-strong: #3b4636; --input: #3b4636; --ring: var(--sl-navy-300); --status-neutral-fg:#aab5a3; --status-neutral-bg:#1c241a; --status-neutral-dot:#6b7e72; --status-active-fg:#9cc4ec; --status-active-bg:#13243a; --status-active-dot:#4f8fcf; --status-action-fg:#5fbdac; --status-action-bg:#0c2922; --status-action-dot:#2ba491; --status-waiting-fg:#c2cbbd; --status-waiting-bg:#0f150d; --status-waiting-dot:#97a48d; --status-done-fg:#9cd6b6; --status-done-bg:#11291f; --status-done-dot:#449072; --status-problem-fg:#eaa493; --status-problem-bg:#2e1813; --status-problem-dot:#d9573c; --scrim: hsl(100 28% 2% / 0.6); /* backdrop overlay for modals and drawers */ --sl-shadow-xs: 0 1px 2px hsl(100 28% 2% / 0.4); --sl-shadow-sm: 0 1px 3px hsl(100 28% 2% / 0.5), 0 1px 2px hsl(100 28% 2% / 0.3); --sl-shadow-md: 0 4px 12px hsl(100 28% 2% / 0.55), 0 2px 4px hsl(100 28% 2% / 0.3); --sl-shadow-lg: 0 12px 28px hsl(100 28% 2% / 0.6), 0 4px 10px hsl(100 28% 2% / 0.35); --sl-shadow-xl: 0 24px 56px hsl(100 28% 2% / 0.65), 0 8px 20px hsl(100 28% 2% / 0.4); --sl-shadow-focus: 0 0 0 3px var(--sl-navy-700); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* mirror of [data-theme="dark"] — applied only when the user hasn't explicitly chosen a theme. Kept in sync with the block above. */ color-scheme: dark; } } /* ============================================================================= ACCESSIBILITY · honour reduced motion globally ============================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }