/* Hallmark · genre: modern-minimal · macrostructure: Workbench (app) · theme: custom "Lavender Ledger" * design-system: design.md · designed-as-app · nav: N3 side-rail · studied: yes · DNA-source: image (user reference) * axes: light paper / grotesk-sans (Inter) / cool-violet accent (~275°) * Tokens for Tree3 Mission Control. Single source of truth — app.css references these by name. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-var-latin.woff2') format('woff2'); } :root { color-scheme: light; /* surfaces (legacy names kept — app.js references them inline) */ --bg: #F7F8FA; /* page ground */ --bg2: #FFFFFF; /* card / surface */ --bg3: #F3F4F7; /* inset: inputs, tracks, hovers */ --bg4: #E9EBF0; /* pressed / deeper inset */ --side-bg: #FBFBFD; /* sidebar ground */ --border: #E5E7EB; --border2: #EEF0F4; /* ink */ --text: #111827; --text-dim: #4B5563; --text-faint: #6B7280; /* 4.83:1 on white — AA for meta text */ --text-ghost: #9CA3AF; /* placeholders / disabled only */ /* brand */ --accent: #6D5DF6; /* fills w/ white text — 4.62:1 */ --accent-strong: #5646E5; /* hover fill (keeps white text) */ --accent-text: #5646E5; /* accent used AS text on surfaces (6.17:1 light / lightened in dark) */ --accent-soft: #EEECFD; /* lavender wash */ --accent-soft-2: #E3DFFC; /* wash hover */ --accent2: var(--accent-text); /* legacy alias */ --bmo-grad: linear-gradient(135deg, #6D5DF6, #A78BFA); /* the one allowed gradient */ /* semantic */ --green: #15803D; --green-fill: #16A34A; --green-soft: #DCFCE7; --green-ink: #166534; --orange: #B45309; --orange-fill: #F59E0B; --orange-soft: #FEF3C7; --orange-ink: #92400E; --red: #DC2626; --red-fill: #EF4444; --red-soft: #FEE2E2; --red-ink: #991B1B; --blue: #2563EB; --indigo-soft: #E0E7FF; --indigo-ink: #3730A3; --gray-soft: #F3F4F6; --gray-ink: #4B5563; --prio-critical: #B91C1C; --prio-medium: #4338CA; /* derived surfaces */ --border-hover: #D6DAE1; /* border on hover — one step darker than --border */ --bg-thead: #FAFBFC; /* table header band */ --bg-row-hover: #F8F9FB; /* table row hover */ --canvas-dot: #DDE1E8; /* canvas dotted grid */ --toast-bg: #1F2937; --toast-ink: #F9FAFB; /* inverted toast for contrast on light UI */ --scrollbar: #D3D7DF; --img-outline: rgba(0,0,0,.1); /* pure black in light, pure white in dark — never tinted */ --overlay-surface: rgba(255,255,255,.92); /* floating action clusters, blurred mobile nav */ --scrim: rgba(15,23,42,.32); --pink: #A78BFA; /* legacy alias: old pink gradient endpoint → soft violet */ --focus: #6D5DF6; /* type */ --font: 'Inter', -apple-system, 'Segoe UI', system-ui, Roboto, sans-serif; /* radius (concentric scale) */ --radius-xl: 16px; /* cards, modals */ --radius-lg: 12px; /* nested cards */ --radius-md: 10px; /* buttons, inputs */ --radius-sm: 8px; /* small controls */ --radius-xs: 6px; /* pills, tags */ --radius: var(--radius-xl); /* legacy alias */ /* depth — soft, layered, low-alpha */ --shadow-xs: 0 1px 2px rgba(16,24,40,.05); --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05); --shadow-md: 0 2px 4px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.08); --shadow-lg: 0 4px 12px rgba(16,24,40,.06), 0 16px 40px rgba(16,24,40,.14); --shadow: var(--shadow-md); /* legacy alias */ /* motion */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-fast: 140ms; --dur: 180ms; --dur-slow: 220ms; } /* Pre-JS paint only: app.js resolves the real theme (localStorage mc_theme, else system) and stamps before first render. This block just stops a white flash for dark-OS users during that first frame. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0F1117; --bg2: #151823; --text: #EEF0F6; } } /* ================= DARK — "Lavender Ledger, lights off" ================= * Same hue system, inverted value scale. All text pairs WCAG-checked ≥4.5:1 * (chips 6.4–10:1); focus ring 4.09:1 vs ground (≥3:1 UI requirement). */ :root[data-theme="dark"] { color-scheme: dark; /* surfaces — ground darkest, cards one step up (same ordering as light) */ --bg: #0F1117; --bg2: #151823; --bg3: #1C202E; --bg4: #262B3C; --side-bg: #12141D; --border: #272C3B; --border2: #1F2431; /* ink */ --text: #EEF0F6; --text-dim: #B9BFCE; --text-faint: #939BAE; /* 6.35:1 on card */ --text-ghost: #5E6577; /* brand — fills keep white text (4.62:1); accent-as-text lightens */ --accent-text: #A9A0FB; /* 7.67:1 on card */ --accent-soft: #262347; --accent-soft-2: #322E5C; /* semantic */ --green: #4ADE80; --green-soft: #17301F; --green-ink: #7EE2A8; --orange: #FBBF24; --orange-soft: #33270F; --orange-ink: #FCD34D; --red: #F87171; --red-soft: #391D1D; --red-ink: #FCA5A5; --blue: #60A5FA; --indigo-soft: #232B54; --indigo-ink: #A5B4FC; --gray-soft: #232838; --gray-ink: #B9BFCE; --prio-critical: #FCA5A5; --prio-medium: #A5B4FC; /* derived surfaces */ --border-hover: #394052; --bg-thead: #181C28; --bg-row-hover: #1A1E2B; --canvas-dot: #2A3040; --toast-bg: #F3F4F7; --toast-ink: #111827; /* toast inverts against the theme */ --scrollbar: #333A4C; --img-outline: rgba(255,255,255,.1); --overlay-surface: rgba(21,24,35,.92); --scrim: rgba(0,0,0,.55); /* depth — dark needs more alpha to read */ --shadow-xs: 0 1px 2px rgba(0,0,0,.25); --shadow-sm: 0 1px 2px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.25); --shadow-md: 0 2px 4px rgba(0,0,0,.2), 0 6px 16px rgba(0,0,0,.35); --shadow-lg: 0 4px 12px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.5); }