/* ============================================================ MELODIC FOUNDRY — DESIGN TOKENS v1 Framework-agnostic CSS custom properties. Layers: 1. Primitives 2. Semantic (themed) 3. Component Dark is the native theme; light derives from the same semantic layer. Apply data-theme="light" on to switch. ============================================================ */ :root { /* ---------- 1. PRIMITIVES ---------- */ /* Plum (brand dark ramp — floor heritage) */ --mf-plum-1000: #0a0710; --mf-plum-950: #0d0912; /* floor background */ --mf-plum-900: #141019; --mf-plum-850: #1b1523; --mf-plum-800: #231c2f; --mf-plum-700: #2f2740; --mf-plum-600: #3d3452; /* Lavender (neutral ramp) */ --mf-lavender-600: #565064; /* floor dim text */ --mf-lavender-500: #6f6880; --mf-lavender-400: #8b8398; /* floor muted text */ --mf-lavender-300: #a9a2b5; --mf-lavender-200: #cfcad8; --mf-lavender-100: #e9e6ef; --mf-lavender-50: #f7f5fa; --mf-white: #ffffff; /* Signal teal (primary accent) */ --mf-teal-200: #a9f0d9; --mf-teal-300: #7de8c8; /* floor link hover */ --mf-teal-400: #52dfb6; --mf-teal-500: #2fd6a5; /* floor accent */ --mf-teal-600: #1fb389; --mf-teal-700: #148f6d; /* AA on white */ --mf-teal-800: #0f6f55; /* Signals */ --mf-magenta-300: #ff7aa8; --mf-magenta-500: #ff2e7e; --mf-magenta-700: #c01059; /* AA on white */ --mf-amber-300: #ffcf85; --mf-amber-500: #ffb347; --mf-amber-700: #a96a1c; /* AA on white */ --mf-red-300: #ff9494; --mf-red-500: #ff5c5c; --mf-red-700: #c23434; /* AA on white */ /* Extended identity hues (stages + per-job colors) */ --mf-blue-500: #7aa2ff; --mf-blue-700: #3b5fc7; --mf-cyan-500: #4cc9f0; --mf-cyan-700: #1176a8; --mf-violet-500: #b088ff; --mf-violet-700: #7a48d6; --mf-lime-500: #a8e05f; --mf-lime-700: #5e8a1f; --mf-peach-500: #ff8f5c; --mf-peach-700: #c2551d; /* Type */ --mf-font-display: 'Saira Stencil One', sans-serif; /* signage only: heroes, stamps, station plaques */ --mf-font-body: 'IBM Plex Sans', sans-serif; --mf-font-mono: 'IBM Plex Mono', monospace; /* labels, data, microcopy */ --mf-text-xs: 12px; --mf-text-sm: 13px; --mf-text-md: 14px; --mf-text-base: 16px; --mf-text-lg: 18px; --mf-text-xl: 21px; --mf-text-2xl: 26px; --mf-text-3xl: 32px; --mf-display-sm: 42px; --mf-display-lg: 60px; --mf-leading-tight: 1.15; --mf-leading-snug: 1.35; --mf-leading-body: 1.55; --mf-track-label: 0.14em; /* uppercase mono labels */ --mf-track-sign: 0.06em; /* stencil signage */ /* Space (4px base) */ --mf-space-1: 4px; --mf-space-2: 8px; --mf-space-3: 12px; --mf-space-4: 16px; --mf-space-5: 24px; --mf-space-6: 32px; --mf-space-7: 48px; --mf-space-8: 64px; --mf-space-9: 96px; /* Radii */ --mf-radius-xs: 2px; /* stamps, plaques */ --mf-radius-sm: 6px; --mf-radius-md: 10px; --mf-radius-lg: 16px; --mf-radius-full: 999px; /* Motion */ --mf-dur-fast: 120ms; --mf-dur-base: 200ms; --mf-dur-slow: 320ms; --mf-dur-crawl: 600ms; /* couriers, conveyor */ --mf-ease-out: cubic-bezier(0.2, 0.9, 0.3, 1); --mf-ease-stamp: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot: stamps, arrivals */ --mf-ease-linear: linear; } /* ---------- 2. SEMANTIC — DARK (native) ---------- */ :root, [data-theme="dark"] { --sem-bg: var(--mf-plum-950); --sem-surface-1: var(--mf-plum-900); --sem-surface-2: var(--mf-plum-850); --sem-surface-3: var(--mf-plum-800); --sem-overlay: rgba(10, 7, 16, 0.78); --sem-text-primary: #f2eff6; --sem-text-secondary: var(--mf-lavender-300); --sem-text-muted: var(--mf-lavender-400); --sem-text-faint: var(--mf-lavender-600); --sem-text-inverse: var(--mf-plum-950); --sem-border-subtle: var(--mf-plum-700); --sem-border-strong: var(--mf-plum-600); --sem-border-focus: var(--mf-teal-500); --sem-accent: var(--mf-teal-500); --sem-accent-hover: var(--mf-teal-300); --sem-accent-ink: #062017; /* text on accent fills */ --sem-link: var(--mf-teal-500); --sem-link-hover: var(--mf-teal-300); --sem-success: var(--mf-teal-500); --sem-success-surface: rgba(47, 214, 165, 0.12); --sem-warning: var(--mf-amber-500); --sem-warning-surface: rgba(255, 179, 71, 0.12); --sem-danger: var(--mf-red-500); --sem-danger-surface: rgba(255, 92, 92, 0.12); --sem-info: var(--mf-blue-500); --sem-info-surface: rgba(122, 162, 255, 0.12); --sem-elev-1: 0 1px 2px rgba(0,0,0,0.4); --sem-elev-2: 0 4px 16px rgba(0,0,0,0.45); --sem-elev-3: 0 16px 48px rgba(0,0,0,0.55); --sem-glow-accent: 0 0 0 1px rgba(47,214,165,0.4), 0 0 24px rgba(47,214,165,0.18); } /* ---------- 2. SEMANTIC — LIGHT (derived) ---------- */ [data-theme="light"] { --sem-bg: var(--mf-lavender-50); --sem-surface-1: var(--mf-white); --sem-surface-2: #fbfafd; --sem-surface-3: var(--mf-lavender-100); --sem-overlay: rgba(29, 22, 38, 0.5); --sem-text-primary: #1d1626; --sem-text-secondary: #4a4358; --sem-text-muted: var(--mf-lavender-500); --sem-text-faint: var(--mf-lavender-300); --sem-text-inverse: #f2eff6; --sem-border-subtle: #e4e0ec; --sem-border-strong: var(--mf-lavender-200); --sem-border-focus: var(--mf-teal-700); --sem-accent: var(--mf-teal-500); /* fills keep brand teal; ink below carries contrast */ --sem-accent-hover: var(--mf-teal-400); --sem-accent-ink: #062017; --sem-link: var(--mf-teal-700); --sem-link-hover: var(--mf-teal-800); --sem-success: var(--mf-teal-700); --sem-success-surface: rgba(20, 143, 109, 0.10); --sem-warning: var(--mf-amber-700); --sem-warning-surface: rgba(169, 106, 28, 0.10); --sem-danger: var(--mf-red-700); --sem-danger-surface: rgba(194, 52, 52, 0.08); --sem-info: var(--mf-blue-700); --sem-info-surface: rgba(59, 95, 199, 0.08); --sem-elev-1: 0 1px 2px rgba(29,22,38,0.08); --sem-elev-2: 0 4px 16px rgba(29,22,38,0.10); --sem-elev-3: 0 16px 48px rgba(29,22,38,0.16); --sem-glow-accent: 0 0 0 1px rgba(20,143,109,0.35), 0 0 24px rgba(20,143,109,0.12); } /* ---------- 2b. STAGE TOKENS (pipeline) ---------- Each stage: display color + "ink" (AA-safe on light surfaces). On dark, use -500s; on light text/borders, use the ink pair. */ :root { --stage-plan: var(--mf-blue-500); --stage-plan-ink: var(--mf-blue-700); --stage-design: var(--mf-cyan-500); --stage-design-ink: var(--mf-cyan-700); --stage-code: var(--mf-teal-500); --stage-code-ink: var(--mf-teal-700); --stage-test: var(--mf-amber-500); --stage-test-ink: var(--mf-amber-700); --stage-review: var(--mf-magenta-500);--stage-review-ink: var(--mf-magenta-700); --stage-crossreview: var(--mf-violet-500); --stage-crossreview-ink: var(--mf-violet-700); --stage-commit: var(--mf-lime-500); --stage-commit-ink: var(--mf-lime-700); --stage-package: var(--mf-peach-500); --stage-package-ink: var(--mf-peach-700); --stage-dock: var(--mf-teal-300); --stage-dock-ink: var(--mf-teal-800); } /* ---------- 2c. JOB-STATE TOKENS ---------- */ :root { --state-refining: var(--mf-lavender-400); --state-awaiting-quote: var(--mf-amber-500); --state-quoted: var(--mf-blue-500); --state-in-factory: var(--mf-teal-500); --state-at-dock: var(--mf-teal-300); --state-delivered: var(--mf-teal-600); --state-sent-back: var(--mf-red-500); --state-declined: var(--mf-lavender-600); } /* ---------- 3. COMPONENT TOKENS ---------- */ :root { --btn-radius: var(--mf-radius-sm); --btn-font: 600 var(--mf-text-md) var(--mf-font-body); --btn-pad: 10px 18px; --btn-primary-bg: var(--sem-accent); --btn-primary-ink: var(--sem-accent-ink); --btn-primary-hover: var(--sem-accent-hover); --btn-ghost-border: var(--sem-border-strong); --field-bg: var(--sem-surface-2); --field-border: var(--sem-border-subtle); --field-radius: var(--mf-radius-sm); --field-focus-ring: 0 0 0 2px var(--sem-border-focus); --badge-radius: var(--mf-radius-xs); --badge-font: 600 11px var(--mf-font-mono); --badge-track: var(--mf-track-label); --card-radius: var(--mf-radius-md); --card-bg: var(--sem-surface-1); --card-border: var(--sem-border-subtle); --manifest-bg: var(--sem-surface-2); /* work-order card */ --manifest-rule: 1px dashed var(--sem-border-strong); --manifest-radius: var(--mf-radius-sm); --bubble-agent-bg: var(--sem-surface-2); --bubble-user-bg: rgba(47, 214, 165, 0.10); --bubble-radius: var(--mf-radius-lg); --stamp-border: 3px double currentColor; --stamp-font: var(--mf-font-display); --stamp-rotate: -6deg; --toast-bg: var(--sem-surface-3); --toast-shadow: var(--sem-elev-2); --modal-radius: var(--mf-radius-lg); --modal-shadow: var(--sem-elev-3); } /* ---------- 3b. COMPONENT LAYER — SCREENS (turns 4–8) ---------- */ :root { /* Buttons: sizes used on real screens */ --btn-pad-lg: 14px 26px; /* hero / accept actions */ --btn-pad-sm: 9px 15px; /* row actions in lists */ --btn-mono-chip: 6px 10px; /* mono label buttons: COPY, EDIT, ⤢ */ --btn-destructive-ink: var(--sem-danger); --btn-destructive-border: rgba(255, 92, 92, 0.5); --btn-disabled-bg: var(--sem-surface-3); --btn-disabled-ink: var(--sem-text-faint); /* Quote card */ --quote-price-font: var(--mf-font-display); --quote-price-size: 56px; /* 40px on phone */ --quote-accent-rail: 4px; /* job identity colour, card top edge */ --quote-include-tick: var(--sem-success); --quote-exclude-tick: var(--sem-text-faint); /* Order-book rows (my builds) */ --row-rail-w: 4px; /* identity colour, left edge */ --row-rail-h: 38px; --row-pad: 18px 4px; --row-divider: 1px solid var(--mf-plum-850); --row-hover-bg: var(--sem-surface-1); --row-state-col: 210px; --row-meta-col: 150px; --row-price-col: 110px; --row-action-col: 150px; /* Delivery */ --crate-stroke: 3px solid var(--stage-package); --link-card-live-border: rgba(47, 214, 165, 0.4); /* Rounds meter (revision rounds + manifest readiness) */ --meter-seg-w: 22px; --meter-seg-h: 4px; --meter-seg-gap: 4px; --meter-seg-off: var(--sem-border-strong); --meter-seg-on: var(--sem-accent); --meter-seg-spent: var(--sem-warning); /* Proof / preview frame (dock) */ --preview-chrome-h: 44px; --preview-desk-bg: repeating-conic-gradient(rgba(255,255,255,.022) 0% 25%, transparent 0% 50%) 0 0 / 44px 44px; /* Toasts: one line, one dot, optional single action */ --toast-pad: 13px 15px; --toast-radius: var(--mf-radius-sm); --toast-dot: 7px; /* Empty / loading */ --empty-border: 1px dashed var(--sem-border-strong); --loading-conveyor: repeating-linear-gradient(90deg, var(--sem-border-strong) 0 10px, transparent 10px 20px); --loading-anim: mfDash 1.4s linear infinite; --skeleton-bg: var(--sem-surface-3); /* Avatars */ --avatar-user: 26px; /* header initials chip */ --avatar-pixel: 20px; /* pixel courier/crew chip */ --avatar-pixel-skin: #f0c8a0; } /* Motion the screens rely on. */ @keyframes mfPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } } @keyframes mfDash { to { background-position: 20px 0 } } @keyframes mfToastIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }