/* ============================================================ MODARA — DESIGN TOKENS The single source of truth. Every surface (style guide, app shell, Overview, Concept Map) references these custom props, so changing a token here restyles the entire system. Warm-light theme only. One plum accent. Color = meaning. ============================================================ */ :root { /* -------------------------------------------------------- WARM NEUTRAL RAMP Paper background -> surfaces -> borders -> muted -> body -> headings. Warm-tinted (hue ~60-75), never pure gray, never pure white, never black. -------------------------------------------------------- */ --paper: oklch(0.984 0.006 76); /* app background — warm "paper" */ --surface: oklch(0.992 0.005 80); /* raised card / panel */ --surface-2: oklch(0.966 0.008 74); /* secondary fill, inputs */ --surface-3: oklch(0.945 0.010 72); /* sunken / track / canvas */ --titlebar: oklch(0.951 0.010 72); /* window title bar */ /* graph stage — a deeper, distinct "workspace" ground so the concept map reads as its own surface, not the app chrome */ --graph-bg: oklch(0.918 0.013 70); --graph-grid: oklch(0.864 0.016 68); --graph-edge: oklch(0.838 0.016 66); /* inset frame hairline */ --graph-vignette: oklch(0.62 0.03 60 / 0.10); --border-soft: oklch(0.912 0.010 72); /* hairline dividers */ --border: oklch(0.866 0.012 70); /* default borders */ --border-strong:oklch(0.795 0.014 66); /* emphasized borders */ --faint: oklch(0.640 0.013 62); /* captions, meta, disabled */ --muted: oklch(0.520 0.014 58); /* secondary / supporting text */ --text: oklch(0.372 0.014 54); /* body text */ --body: var(--text); /* alias — some components say "body" */ --heading: oklch(0.268 0.014 50); /* headings */ --ink: oklch(0.205 0.015 50); /* strongest ink */ /* -------------------------------------------------------- PLUM ACCENT RAMP (brand / primary / active ONLY) base ≈ #6E4A63. Never used to signal status. -------------------------------------------------------- */ --plum-50: oklch(0.962 0.014 350); --plum-100: oklch(0.924 0.026 350); --plum-200: oklch(0.860 0.042 350); --plum-300: oklch(0.760 0.056 350); --plum-400: oklch(0.595 0.064 350); --plum: oklch(0.452 0.060 350); /* BASE ≈ #6E4A63 */ --plum-600: oklch(0.398 0.058 350); /* hover */ --plum-700: oklch(0.342 0.052 350); /* active / pressed */ --plum-on: oklch(0.975 0.010 80); /* text/icon on plum fills */ /* convenience surface tints of plum */ --plum-surface: var(--plum-50); --plum-surface-2: var(--plum-100); --plum-border: var(--plum-200); /* -------------------------------------------------------- CHART CATEGORICAL PALETTE (for grouped/series charts) Plum-family + accent semantically derived from --ok/--info. The default palette is the only one wired to chart code today; --chart-cat-mono-1..8 is reserved for a future mono toggle. -------------------------------------------------------- */ --chart-cat-1: oklch(0.452 0.060 350); /* base plum */ --chart-cat-2: oklch(0.605 0.095 232); /* info blue */ --chart-cat-3: oklch(0.585 0.115 150); /* ok green */ --chart-cat-4: oklch(0.720 0.130 76); /* warn amber */ --chart-cat-5: oklch(0.342 0.052 350); /* plum-700 */ --chart-cat-6: oklch(0.398 0.058 350); /* plum-600 */ --chart-cat-7: oklch(0.398 0.090 290); /* violet accent */ --chart-cat-8: oklch(0.480 0.090 25); /* terracotta accent */ --chart-cat-mono-1: oklch(0.27 0.005 60); --chart-cat-mono-2: oklch(0.40 0.005 60); --chart-cat-mono-3: oklch(0.52 0.005 60); --chart-cat-mono-4: oklch(0.62 0.005 60); --chart-cat-mono-5: oklch(0.72 0.005 60); --chart-cat-mono-6: oklch(0.80 0.005 60); --chart-cat-mono-7: oklch(0.86 0.005 60); --chart-cat-mono-8: oklch(0.90 0.005 60); /* cividis — colour-blind-safe warm→cool ramp (dark navy → warm cream). */ --chart-cat-cividis-1: #00204E; --chart-cat-cividis-2: #1F3F76; --chart-cat-cividis-3: #435C8C; --chart-cat-cividis-4: #6B7B95; --chart-cat-cividis-5: #958C7A; --chart-cat-cividis-6: #B6A07A; --chart-cat-cividis-7: #D7C6A0; --chart-cat-cividis-8: #F1EAD2; /* figure chrome tokens (the print-grade figure composer reads these off the root CSS var tree so an export bakes the same colors). */ --fig-axis: var(--muted); --fig-grid: color-mix(in oklch, var(--border) 80%, transparent); --fig-rule: var(--border-soft); --fig-title: var(--heading); --fig-subtitle: var(--muted); --fig-note: var(--muted); --fig-foot: var(--faint); /* -------------------------------------------------------- SEMANTIC PALETTE (status only, distinct from plum) each: solid (fills/dots/marks), text (legible on paper), surface (soft tint bg), border. ok=green warn=amber alert=red info=calm blue/teal -------------------------------------------------------- */ --ok: oklch(0.585 0.115 150); --ok-text: oklch(0.480 0.110 150); --ok-surface: oklch(0.955 0.030 150); --ok-border: oklch(0.870 0.060 150); --warn: oklch(0.720 0.130 76); --warn-text: oklch(0.520 0.110 66); --warn-surface:oklch(0.962 0.045 82); --warn-border: oklch(0.870 0.085 80); --alert: oklch(0.585 0.165 27); --alert-text: oklch(0.520 0.160 27); --alert-surface:oklch(0.955 0.040 30); --alert-border:oklch(0.860 0.080 30); --info: oklch(0.605 0.095 232); --info-text: oklch(0.510 0.090 232); --info-surface:oklch(0.955 0.028 232); --info-border: oklch(0.865 0.055 232); /* -------------------------------------------------------- TYPOGRAPHY serif = soul (headings/display); sans = humanist UI/body; mono = data/IDs/hashes/code. -------------------------------------------------------- */ --font-display: "Space Grotesk", "Archivo", "IBM Plex Sans", system-ui, sans-serif; /* display / headings — technical grotesque (the instrument voice) */ --font-serif: var(--font-display); /* legacy alias: all former-serif refs now use the display grotesque */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* type scale (px) */ --fs-display: 40px; --fs-h1: 30px; --fs-h2: 23px; --fs-h3: 17px; --fs-body-lg: 15.5px; --fs-body: 14px; --fs-small: 12.5px; --fs-micro: 11px; --fs-mono: 12.5px; --fs-mono-sm: 11px; /* line heights */ --lh-tight: 1.15; --lh-heading: 1.25; --lh-snug: 1.45; --lh-body: 1.62; /* weights */ --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; /* tracking */ --ls-label: 0.08em; /* uppercase mono labels */ --ls-tight: -0.01em; /* large serif display */ /* -------------------------------------------------------- SPACING SCALE -------------------------------------------------------- */ --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-12: 64px; --sp-14: 80px; /* -------------------------------------------------------- RADII -------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 11px; --r-xl: 16px; --r-pill: 999px; /* -------------------------------------------------------- ELEVATION (soft, low, warm-tinted shadows) -------------------------------------------------------- */ --shadow-xs: 0 1px 1.5px oklch(0.45 0.03 50 / 0.05); --shadow-sm: 0 1px 2px oklch(0.45 0.03 50 / 0.06), 0 1px 1px oklch(0.45 0.03 50 / 0.04); --shadow-md: 0 2px 4px oklch(0.45 0.03 50 / 0.06), 0 4px 12px oklch(0.45 0.03 50 / 0.07); --shadow-lg: 0 4px 10px oklch(0.45 0.03 50 / 0.07), 0 12px 32px oklch(0.42 0.03 50 / 0.10); --shadow-pop: 0 8px 20px oklch(0.40 0.03 50 / 0.10), 0 24px 60px oklch(0.38 0.03 50 / 0.16); --ring: 0 0 0 3px var(--plum-100); --ring-info: 0 0 0 3px var(--info-surface); /* -------------------------------------------------------- MOTION -------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; /* -------------------------------------------------------- LAYOUT METRICS -------------------------------------------------------- */ --titlebar-h: 38px; --nav-w: 232px; --nav-w-collapsed: 64px; --context-h: 60px; --inspector-w: 384px; --content-max: 1080px; } /* density variants (toggled by [data-density] on a root) */ [data-density="compact"] { --context-h: 52px; --sp-7: 18px; --sp-8: 26px; }