/* ───────────────────────────────────────────────────────────────────────── Ward's World CRM — Design System (Classic theme, single-theme) ───────────────────────────────────────────────────────────────────────── The Classic theme is the only theme. There is no light, no dark, no prefers-color-scheme, no DodgerBlue. The shell pins defensively, but every selector below targets :root because Classic is the default. Source-of-truth token values live in this file. The wardcrm-classic-ui skill (.claude/skills/wardcrm-classic-ui/) mirrors them inline so agents building UIs don't have to grep — if values move, both files move in the same PR. Companion: WardCRM-Brain/Frontend/Design System.md (vault, human-facing). ─── LOAD-BEARING PIXELS — DO NOT TOKENIZE ────────────────────────────── These values are tuned for specific layouts. Replacing them with --space-* or --radius-* variables will break the rhythm. · Probate / intake spreadsheet grid: 36px 1fr 150px 110px 80px 200px · Calendar cell minimum height: minmax(110px, auto) · Today-pill min-width: 22px (with border-radius: 999) · Spreadsheet row height: 28px (--ss-cell-h, density-aware) · Owner-circle diameter: 22px · Section-strip height: 30px · Sticky-toolbar height: 44px · Section-nav strip height: 32px ────────────────────────────────────────────────────────────────────── */ :root { /* ── Layered backgrounds (BG / BG_2 / BG_3 / ELEVATED) ────────────── */ --color-bg-primary: #0A1628; /* Page bg */ --color-bg-secondary: #0F1E33; /* Sidebar, panels */ --color-bg-tertiary: #162840; /* Cards, list items, headers (was #162B47) */ --color-bg-hover: #162840; --color-bg-active: #1F3A5C; --color-bg-elevated: rgba(15, 30, 51, 0.9); /* Floating: modals, popovers */ --color-bg-surface: #0F1E33; /* Card surface */ --color-bg-input: rgba(7, 18, 36, 0.6); /* Form input fill */ --color-bg-drawer-content: var(--color-bg-primary); /* Matter drawer content background */ /* Borders */ --color-border: #1F3A5C; --color-border-light: rgba(31, 58, 92, 0.5); --color-border-subtle: #162840; --color-border-strong: #2D4A6F; /* Text — parchment cream, not pure white */ --color-text-primary: #F0E6D2; /* Body, headings */ --color-text-secondary: #D4C9B0; /* Muted body */ --color-text-muted: #8090A5; /* Labels, captions */ --color-text-dim: #576B85; /* Placeholders, disabled */ /* Gold accents (antique gold) */ --color-accent: #C9A05F; --color-accent-hover: #E6C47F; /* Bright variant for hover / focus */ --color-accent-light: rgba(201, 160, 95, 0.08); /* Soft fill */ --color-accent-light-hi: rgba(201, 160, 95, 0.16); /* Active fill */ --color-accent-border: rgba(201, 160, 95, 0.25); /* Hairline + section divider */ /* Primary gold gradient + inset highlight (CTA buttons, SAVED button, view-switcher pill) */ --gradient-gold-primary: linear-gradient(180deg, #d6ad6a, #b88a44); --shadow-gold-inset: inset 0 1px 0 rgba(255, 255, 255, 0.25); --color-on-gold: #1a0e00; /* Dark-roast brown for text/icons on gold-gradient fills */ /* Secondary accents — warmed for Classic */ --color-accent-green: #7FB582; --color-accent-green-light: rgba(127, 181, 130, 0.12); --color-accent-purple: #B89F7A; --color-accent-purple-light: rgba(184, 159, 122, 0.12); /* ── Status palette (semantic) ──────────────────────────────────── Five statuses × four channels. Use these for status pills, dots, row borders, and any "what state is this in" UI. Never solid red / green / yellow blocks. */ --status-done-bg: rgba(127, 181, 130, 0.18); --status-done-fg: #A7D4AA; --status-done-border: rgba(127, 181, 130, 0.35); --status-done-dot: #7FB582; --status-progress-bg: rgba(212, 168, 96, 0.18); --status-progress-fg: #E6C580; --status-progress-border: rgba(212, 168, 96, 0.35); --status-progress-dot: #D4A860; --status-pending-bg: rgba(128, 144, 165, 0.10); --status-pending-fg: #B8C4D0; --status-pending-border: rgba(128, 144, 165, 0.25); --status-pending-dot: #6B7B92; --status-blocked-bg: rgba(201, 122, 109, 0.18); --status-blocked-fg: #E6A096; --status-blocked-border: rgba(201, 122, 109, 0.35); --status-blocked-dot: #C97A6D; --status-na-bg: transparent; --status-na-fg: #576B85; --status-na-border: rgba(128, 144, 165, 0.18); --status-na-dot: #3D4754; /* ── Owner-chip palette ────────────────────────────────────────── Five legal roles. Use for responsibility badges, attribution pills. Each role has a foreground color, a low-alpha background, and a matching border. */ --owner-pr-color: #E6C47F; --owner-pr-bg: rgba(201, 160, 95, 0.08); --owner-pr-border: rgba(201, 160, 95, 0.25); --owner-counsel-color: #A7D4AA; --owner-counsel-bg: rgba(127, 181, 130, 0.10); --owner-counsel-border: rgba(127, 181, 130, 0.25); --owner-court-color: #C5D5E8; --owner-court-bg: rgba(140, 165, 200, 0.10); --owner-court-border: rgba(140, 165, 200, 0.25); --owner-cpa-color: #D5C2E8; --owner-cpa-bg: rgba(165, 140, 200, 0.10); --owner-cpa-border: rgba(165, 140, 200, 0.25); --owner-client-color: #E8D2C2; --owner-client-bg: rgba(200, 165, 140, 0.10); --owner-client-border: rgba(200, 165, 140, 0.25); /* ── Event-kind palette ────────────────────────────────────────── Four kinds for calendar chips and timeline markers. Each has a color (text + icon), a low-alpha background, and a matching border tint. */ --event-consult-color: #C9A05F; --event-consult-bg: rgba(201, 160, 95, 0.18); --event-consult-border: rgba(201, 160, 95, 0.45); --event-meeting-color: #E6C580; --event-meeting-bg: rgba(230, 197, 128, 0.16); --event-meeting-border: rgba(230, 197, 128, 0.40); --event-comm-out-color: #A7C9E8; --event-comm-out-bg: rgba(140, 180, 230, 0.14); --event-comm-out-border: rgba(140, 180, 230, 0.35); --event-comm-in-color: #C7A8E0; --event-comm-in-bg: rgba(180, 140, 210, 0.14); --event-comm-in-border: rgba(180, 140, 210, 0.35); /* ── Status (legacy aliases — kept for older component CSS) ────── Prefer the semantic --status-* tokens above for new work. These remain so billing.css, matter-drawer.css, etc. stay valid. */ --color-success: #7FB582; --color-success-bg: rgba(127, 181, 130, 0.10); --color-warning: #D4A860; --color-warning-bg: rgba(212, 168, 96, 0.10); --color-danger: #C97A6D; --color-danger-bg: rgba(201, 122, 109, 0.10); --color-info: #C9A05F; --color-info-bg: rgba(201, 160, 95, 0.10); /* Badge text */ --color-accent-text: #E6C47F; --color-success-text: #A7D4AA; --color-warning-text: #E6C580; --color-danger-text: #E09A8E; --color-info-text: #E6C47F; --color-neutral-text: var(--color-text-muted); /* Backward-compat aliases (billing.css, matter-drawer.css, chat-drawer.css) */ --color-primary: var(--color-accent); --color-primary-bg: var(--color-accent-light); /* ── Typography ────────────────────────────────────────────────── Three families, fixed. No new font families without an ADR. Headings serif, body sans, all numbers / IDs / dates / money mono. */ --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: var(--font-body); --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; --text-3xs: 0.625rem; /* 10px */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-field: 0.8125rem; /* 13px */ --text-sm: 0.875rem; /* 14px */ --text-base: 0.9375rem; /* 15px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ /* Spacing scale — for content rhythm only. Layout-critical pixel widths (grid templates, cell heights) live as literal pixel values in component CSS; do NOT replace them with these. See "LOAD-BEARING PIXELS" comment at top of file. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Radius scale — formal, tight. No 20+ pixel rounding. 4px reserved for hardcoded use in dense UI (cells, status pills). */ --radius-sm: 6px; /* Inputs, small buttons */ --radius-md: 10px; /* Cards */ --radius-lg: 14px; /* Panels */ --radius-xl: 18px; /* Large cards */ --radius-full: 9999px; /* Pills, owner circles */ /* Shadows — dark, opaque. Never DodgerBlue-tinted. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6); /* Pipeline stage colors — antique gold progression */ --pipeline-new-lead: #E6C47F; --pipeline-consult-scheduled: #D4B072; --pipeline-active-client: #C9A05F; --pipeline-matter-complete: #A88145; --pipeline-closed: #576B85; /* Layout */ --sidebar-width: 240px; --header-height: 56px; } /* ─── Reset ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font-body); font-size: 16px; color: var(--color-text-primary); background: var(--color-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Ambient warmth — radial gradient overlay on body */ body { background: radial-gradient(ellipse at top, rgba(31, 58, 92, 0.4) 0%, transparent 60%), radial-gradient(ellipse at bottom right, rgba(201, 160, 95, 0.04) 0%, transparent 50%), var(--color-bg-primary); } /* ─── Heading typography ────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .heading { font-family: var(--font-heading); letter-spacing: -0.02em; font-weight: 600; } h1 { font-size: var(--text-3xl); line-height: 1.2; } h2 { font-size: var(--text-2xl); line-height: 1.3; } h3 { font-size: var(--text-xl); line-height: 1.4; } h4 { font-size: var(--text-base); line-height: 1.4; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); } /* ─── Selection + scrollbar ─────────────────────────────────────────── */ ::selection { background: rgba(201, 160, 95, 0.35); color: #F0E6D2; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); background-clip: padding-box; } * { scrollbar-width: auto; scrollbar-color: var(--color-bg-tertiary) transparent; } /* ─── Utility ───────────────────────────────────────────────────────── */ .font-mono { font-family: var(--font-mono); } /* ─── Form select arrow (gold) ──────────────────────────────────────── */ .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23C9A05F' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); } /* Native