/* ============================================================ MORPHEUS DESIGN KIT — tokens.css Warm cream canvas + ink navy · deep ink dark · strand spectrum Theme via [data-theme="light" | "dark"] on or any wrapper. Source of truth: morpheus.html (moderneinc/prototypes) ============================================================ */ :root { /* typography */ --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', monospace; /* whole-number type scale (no fractional px) */ --text-overline: 10px; /* mono uppercase overlines, beta tags */ --text-pill: 11px; /* status pills, count chips, meta */ --text-label: 12px; /* labels, tabs, table heads */ --text-body-sm: 13px; /* small body, controls, buttons */ --text-body: 14px; /* body */ --text-card: 15px; /* card titles (weight 600) */ --text-title: 18px; /* page titles (weight 400) */ --text-display: 28px; /* display / section heads */ /* radii — squared controls, soft containers, pill statuses */ --radius-control: 4px; /* buttons, badges, checkboxes, chips */ --radius-input: 10px; /* inputs, search, org selector, seg */ --radius-card: 12px; /* cards, toasts, menus, panels */ --radius-main: 16px; /* main content area corner */ --radius-pill: 999px; /* status pills, avatars, toggles */ /* spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* strand spectrum — the identity ramp (use sparingly) */ --spectral: linear-gradient(92deg, #E6399B 0%, #9D5BE8 24%, #3E7BF6 48%, #25D0C0 70%, #30F284 88%, #B7E84C 100%); } [data-theme="light"] { /* backgrounds & greys */ --bg: #F2F0EA; /* page canvas (warm cream) */ --field: #FBFAF6; /* input fields */ --card: #FBFAF6; /* raised cards / tables */ --card-head: #F2EFE7; /* table header band */ --surface: #EDEBE2; /* card surface / hover fill */ --surface2: #E4E1D6; /* inset surface */ --row-hover: #F4F2EB; /* row hover */ --line: rgba(35,35,66,.12); /* hairline */ --line2: rgba(35,35,66,.08); /* faint divider */ --line-strong: rgba(35,35,66,.50); /* strong border */ /* text */ --text: #232342; /* ink navy */ --muted: #62627A; /* accent (Blue AAA) */ --accent: #1055E2; /* links, active tab, focus */ --accent-deep: #16306B; /* active nav label */ --accent-tint: rgba(62,123,246,.10); --accent-brd: rgba(62,123,246,.30); /* controls */ --primary-bg: #3E7BF6; --primary-fg: #FFFFFF; /* toggle ON, radio */ --btn-primary-bg: #232342; --btn-primary-fg: #FBFAF6; /* ink button */ /* status */ --green: #30F284; --green-hi: #1D5937; --success-tint: rgba(48,242,132,.15); --success-brd: rgba(29,89,55,.65); --error: #C9291C; --error-tint: #FBEFED; --error-brd: #F0B4AC; --warning: #B68B12; --violet: #9D5BE8; --queued-tint: rgba(157,91,232,.10); --queued-brd: rgba(157,91,232,.35); --teal: #0E4A45; --magenta: #E6399B; /* toast washes (solid, whole-card) */ --toast-success-text: #1D5937; --toast-success-bg: #EAF6EC; --toast-success-brd: #BFE2C8; --toast-warning-text: #8F6C0C; --toast-warning-bg: #FAF4E1; --toast-warning-brd: #E6D9A8; --toast-error-text: #C9291C; --toast-error-bg: #FBEFED; --toast-error-brd: #F0B4AC; --toast-info-text: #1055E2; --toast-info-bg: #EEF3FC; --toast-info-brd: #C7D7F6; /* chrome accents */ --version-badge-bg: #30F284; --version-badge-fg: #1D5937; --avatar-bg: #232342; --avatar-fg: #FBFAF6; } [data-theme="dark"] { /* backgrounds & greys (deep ink; alt warm-black canvas: #100C0A) */ --bg: #141419; --field: #222229; --card: #26262E; --card-head: #2D2D36; --surface: #2A2A32; --surface2: #33333D; --row-hover: #2E2E38; --line: rgba(240,240,246,.12); --line2: rgba(240,240,246,.08); --line-strong: rgba(240,240,246,.38); /* text */ --text: #F1F0EA; --muted: #9C9CA8; /* accent */ --accent: #3E7BF6; --accent-deep: #3E7BF6; --accent-tint: rgba(62,123,246,.16); --accent-brd: rgba(62,123,246,.40); /* controls */ --primary-bg: #3E7BF6; --primary-fg: #FFFFFF; --btn-primary-bg: #F1F0EA; --btn-primary-fg: #17171C; /* status */ --green: #30F284; --green-hi: #30F284; --success-tint: rgba(48,242,132,.13); --success-brd: rgba(48,242,132,.55); --error: #FA826F; --error-tint: rgba(252,71,50,.12); --error-brd: rgba(252,71,50,.42); --warning: #E8BA4C; --violet: #9D5BE8; --queued-tint: rgba(157,91,232,.16); --queued-brd: rgba(157,91,232,.45); --teal: #25D0C0; --magenta: #E6399B; /* toast washes */ --toast-success-text: #4ADE80; --toast-success-bg: #0F2015; --toast-success-brd: #1E3A28; --toast-warning-text: #E3B341; --toast-warning-bg: #211D0C; --toast-warning-brd: #3A3316; --toast-error-text: #F76A62; --toast-error-bg: #2A1012; --toast-error-brd: #4A1D1E; --toast-info-text: #7FA9F9; --toast-info-bg: #101A2E; --toast-info-brd: #1E3A6B; /* chrome accents */ --version-badge-bg: #30F284; --version-badge-fg: #1D5937; --avatar-bg: #30F284; --avatar-fg: #1D5937; } /* base */ body { font-family: var(--font-sans); font-size: var(--text-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }