/* * Design System — Token Layer * * Implements 03-design-system.md (audit/planning/ibill-03-design-system.md). * * IMPORTANT: This file declares CSS variables ONLY. It does not apply any * styles to existing components. Adoption is opt-in: components reference * these tokens explicitly. Existing styles (--primary, --dark-green, etc. * in src/index.css) remain untouched until a per-component PR migrates them. * * Loaded as the first import in src/index.css so tokens are available * everywhere downstream. * * Inertness check: importing this file alone produces zero visual change * on any page. Verified by SEO manifest parity gate (no manifested column * touches CSS). * * Spec source of truth: audit/planning/ibill-03-design-system.md */ :root { /* ============================================================ * COLOR — Neutral ramp (12 steps, slight cool tint) * ============================================================ */ --neutral-0: #ffffff; --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; --neutral-1000: #020617; /* ============================================================ * COLOR — Brand (confident green, less saturated than red accent) * ============================================================ * Primary CTA color. Brand RED (Canadian-flag) becomes accent, * used sparingly. See accent-* below. */ --brand-50: #f0fdf4; --brand-100: #dcfce7; --brand-300: #86efac; --brand-500: #16a34a; /* primary CTA */ --brand-700: #15803d; --brand-900: #14532d; /* ============================================================ * COLOR — Accent (restrained Canadian red) * ============================================================ */ --accent-50: #fef2f2; --accent-500: #dc2626; --accent-700: #b91c1c; /* ============================================================ * COLOR — Semantic * ============================================================ */ --success-50: #f0fdf4; --success-100: #dcfce7; --success-500: #16a34a; --success-700: #15803d; --success-900: #14532d; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-500: #f59e0b; --warning-700: #b45309; --warning-900: #78350f; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-500: #dc2626; --danger-700: #b91c1c; --danger-900: #7f1d1d; --info-50: #eff6ff; --info-100: #dbeafe; --info-500: #3b82f6; --info-700: #1d4ed8; --info-900: #1e3a8a; /* ============================================================ * COLOR — Surface elevation * ============================================================ */ --surface-base: var(--neutral-50); --surface-raised: var(--neutral-0); --surface-overlay: var(--neutral-0); --surface-sunken: var(--neutral-100); /* ============================================================ * COLOR — Chart series (categorical) * ============================================================ * Palette for data visualisation. Decoupled from brand/accent * intentionally — chart series and brand identity should evolve * independently. * * Tuned 2026-04-28 from Option A "Quiet Cool" per visual-audit * VF-04 ranking. Cool blue-green-violet family at the 600–700 * lightness band, with one warm pink accent (#7) for 8-bar charts. * Adjacent hues separated ≥40° so 8 series remain distinguishable * even when laid side-by-side (Top Clients chart on /dashboard). * * Previous "rainbow" values archived in commit a216c373 if a * future commit needs to revert. */ --chart-1: #15803d; /* green-700 — anchor on brand */ --chart-2: #0d9488; /* teal-600 */ --chart-3: #0891b2; /* cyan-600 */ --chart-4: #2563eb; /* blue-600 */ --chart-5: #4338ca; /* indigo-700 */ --chart-6: #7c3aed; /* violet-600 */ --chart-7: #be185d; /* pink-700 — single warm accent */ --chart-8: #475569; /* slate-600 — quiet closer */ /* ============================================================ * TYPOGRAPHY — Type scale (1.250 modular) * ============================================================ */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ --text-6xl: 4.5rem; /* 72px */ /* Line height */ --leading-tight: 1.2; /* headings */ --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.65; /* body, long-form */ /* Letter spacing */ --tracking-tight: -0.02em; /* large display */ --tracking-normal: 0; --tracking-wide: 0.05em; /* eyebrow / labels */ /* Weight */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Tabular numerals — for calculators, ledgers, pricing */ --feature-tabular: "tnum" 1, "lnum" 1; /* Font families (kept compatible with current Inter loading; display family is referenced but not required to be Inter Tight — adoption commits decide per-page). */ --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* ============================================================ * SPACING — 4px base, geometric progression * ============================================================ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ============================================================ * RADIUS * ============================================================ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ============================================================ * SHADOW / ELEVATION (slight cool tint, not pure black) * ============================================================ */ --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 1px 0 rgba(15, 23, 42, 0.03); --shadow-md: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 4px 8px -2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 12px 24px -6px rgba(15, 23, 42, 0.08); --shadow-xl: 0 8px 16px -4px rgba(15, 23, 42, 0.10), 0 24px 48px -12px rgba(15, 23, 42, 0.12); --shadow-2xl: 0 16px 32px -8px rgba(15, 23, 42, 0.12), 0 40px 80px -20px rgba(15, 23, 42, 0.16); /* ============================================================ * MOTION * ============================================================ */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ============================================================ * MARKETING-PAGE LEGACY VARIABLES * ============================================================ * Referenced by static HTML in repo root (landing.html, features, * canadian-invoice-software, free-accounting-software-canada, * see-it-in-action) plus newly-aligned pages (about, pricing, * contact). These names are user-protected — keep them stable. * * The values here are extracted verbatim from landing.html's * historical inline :root{} block so any page inheriting these * looks byte-identical to landing.html. Pages that still declare * their own :root{} block continue to win via CSS cascade * (parse-order) — these are the fallback that gives non-declaring * pages (about, pricing, contact) access to the same palette * without copy-pasting. */ /* Note: --primary aligns to the brand green (--dark-green). Older marketing pages (features, see-it-in-action, canadian-invoice-software, free-accounting-software-canada) already define --primary: #166534 in their inline :root{} blocks. landing.html historically declared --primary: #ff6b6b but only referenced it in commented-out cursor-trail code (effectively dead). Aligning to #166534 here makes --primary and --dark-green semantic aliases for the same brand color, which matches how every active page treats it. */ --primary: #166534; --secondary: #4ecdc4; --accent: #ffe66d; --purple: #a06cd5; --dark: #2d3436; --light: #ffffff; --dark-green: #166534; --light-green: #86efac; --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --gradient-rainbow: linear-gradient(90deg, #ff6b6b, #4ecdc4, #ffe66d, #a06cd5); --gradient-green: linear-gradient(135deg, #166534 0%, #14532d 100%); } /* * prefers-reduced-motion respect — applies globally because it's a * user-agent preference, not a token. Per non-negotiable rule 16. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }