/* ========================================================================== RMF-OS · Color System — Graphite Canon (v2.0.0) Value authority: RMF-OS Graphite Foundation (DS-GRAPHITE-01/02, DS-COMPLETE Wave 1A). Dark-first neutral graphite material ramp with a genuinely stepped surface hierarchy. Blue is a SCARCE functional accent (#4F62E3) — interaction (--rmf-accent) + focus (--rmf-focus-ring) only; structural chrome is neutral graphite, never navy. Token NAMES are unchanged from v1.1.0 — consumers need no edits. Values marked [derived] have no canon source and await ratification. ========================================================================== */ :root { /* ---- Base neutrals (neutral graphite — no longer blue-tinted) --------- */ --rmf-black: #08090B; /* deepest — app backdrop [derived] */ --rmf-ink-900: #0D0E11; /* canvas (6% L) */ --rmf-ink-850: #14161A; /* sunken / muted (9%) */ --rmf-ink-800: #191B1F; /* surface / card (11%) */ --rmf-ink-750: #1F2228; /* surface elevated / popover (14%) */ --rmf-ink-700: #23262D; /* secondary surface (16%) */ --rmf-ink-650: #2B2F37; /* hover / elevated interaction (19%) */ --rmf-ink-600: #333842; /* decorative / structural border (23%) */ --rmf-white: #FFFFFF; --rmf-cloud: #EDEFF2; /* off-white headings on dark */ --rmf-slate-100: #DDE0E3; /* [derived] */ --rmf-slate-300: #C4C9D1; /* secondary text */ --rmf-slate-400: #B1B6BF; /* [derived] */ --rmf-slate-500: #9EA4AE; /* tertiary / muted (AA on all surfaces) */ --rmf-slate-600: #646E82; /* disabled / control edge (D6, WCAG 1.4.11) */ /* ---- Accent · restrained interaction blue ----------------------------- */ /* Ramp [derived]: hue 232 / sat 73% held, lightness stepped; 500 is canon. */ --rmf-blue-50: #EDEFFC; --rmf-blue-200: #C1C8F5; --rmf-blue-300: #9AA5EF; --rmf-blue-400: #7686EA; /* gradient light stop */ --rmf-blue-500: #4F62E3; /* primary accent — canon (232 73% 60%) */ --rmf-blue-600: #2B43DE; --rmf-blue-700: #1E34C2; /* gradient deep stop */ --rmf-blue-800: #18299A; --rmf-glow: rgba(79,98,227,0.55); /* core glow */ /* ---- Semantic status roles — closed taxonomy (DS-COMPLETE 1A · G1) ---- Colour encodes TONE, never a category: success · warning · danger · info · neutral. Dark canon. */ --rmf-status-success-bg: #022C22; --rmf-status-success-fg: #34D399; --rmf-status-success-border: #065F46; --rmf-status-warning-bg: #451A03; --rmf-status-warning-fg: #FBBF24; --rmf-status-warning-border: #92400E; --rmf-status-danger-bg: #450A0A; --rmf-status-danger-fg: #F87171; --rmf-status-danger-border: #991B1B; --rmf-status-info-bg: #172554; --rmf-status-info-fg: #60A5FA; --rmf-status-info-border: #1E40AF; --rmf-status-neutral-bg: #09090B; --rmf-status-neutral-fg: #A1A1AA; --rmf-status-neutral-border: #27272A; /* ---- Legacy governance-state names (kept as aliases) ------------------ */ --rmf-verified: var(--rmf-status-success-fg); --rmf-verified-dim: rgba(52,211,153,0.14); --rmf-pending: var(--rmf-status-warning-fg); --rmf-pending-dim: rgba(251,191,36,0.14); --rmf-blocked: #F0616D; /* semantic danger — canon "unchanged" */ --rmf-blocked-dim: rgba(240,97,109,0.14); --rmf-info: var(--rmf-status-info-fg); --rmf-info-dim: rgba(96,165,250,0.14); /* ---- Alpha lines & scrims (over dark) -------------------------------- */ --rmf-line: rgba(255,255,255,0.08); --rmf-line-soft: rgba(255,255,255,0.05); --rmf-line-strong: rgba(255,255,255,0.14); --rmf-scrim: rgba(8,9,11,0.72); /* ---- Gradients ------------------------------------------------------- */ --rmf-grad-core: linear-gradient(180deg, var(--rmf-blue-400) 0%, var(--rmf-blue-700) 100%); --rmf-grad-line: linear-gradient(90deg, var(--rmf-blue-400), var(--rmf-blue-700)); --rmf-grad-halo: radial-gradient(circle at 50% 45%, var(--rmf-glow) 0%, transparent 62%); --rmf-grad-surface: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%); /* ===================================================================== SEMANTIC ALIASES — reference these in components, not the raw scale. ===================================================================== */ --rmf-bg-app: var(--rmf-ink-900); --rmf-bg-canvas: var(--rmf-black); --rmf-surface-1: var(--rmf-ink-800); --rmf-surface-2: var(--rmf-ink-750); --rmf-surface-3: var(--rmf-ink-700); --rmf-surface-hover: var(--rmf-ink-650); /* v2: dedicated hover step */ --rmf-surface-sunken: var(--rmf-ink-850); --rmf-text-strong: var(--rmf-cloud); --rmf-text-body: var(--rmf-slate-300); --rmf-text-muted: var(--rmf-slate-500); --rmf-text-disabled: var(--rmf-slate-600); --rmf-text-on-accent: var(--rmf-white); --rmf-text-inverse: #101219; --rmf-accent: var(--rmf-blue-500); --rmf-accent-hover: var(--rmf-blue-400); --rmf-accent-press: var(--rmf-blue-600); --rmf-accent-soft: rgba(79,98,227,0.14); /* Border duty split (DS-GRAPHITE-02 · D6): --rmf-border = decorative/structural (no WCAG 1.4.11 duty) --rmf-border-strong = interactive control edge (>= 3:1) */ --rmf-border: var(--rmf-ink-600); --rmf-border-strong: var(--rmf-slate-600); --rmf-border-accent: rgba(79,98,227,0.45); --rmf-focus-ring: rgba(79,98,227,0.55); --rmf-state-ok: var(--rmf-verified); --rmf-state-wait: var(--rmf-pending); --rmf-state-stop: var(--rmf-blocked); --rmf-state-info: var(--rmf-info); } /* ---- Light surface — Graphite LIGHT canon (DS-GRAPHITE-02) -------------- 7 distinguishable surfaces; the canvas is deliberately NOT darkened (--rmf-accent would drop below AA against it, DS-LIGHT-MAP-01 M-IV). Selectors: "reverse" is the original brand-lockup name and stays for compatibility; "light" and .light are the app-facing names (RMF-OS ThemeProvider sets both the attribute and the class). */ [data-theme="reverse"], [data-theme="light"], .light { --rmf-bg-app: #F4F5F6; /* neutral graphite canvas */ --rmf-surface-1: #FCFCFD; /* card */ --rmf-surface-2: #FFFFFF; /* elevated / floating */ --rmf-surface-3: #E9EAEC; /* secondary */ --rmf-surface-hover: #E3E5E8; /* hover / active */ --rmf-surface-sunken: #EEEFF1; /* sunken / muted */ --rmf-text-strong: #101219; --rmf-text-body: #2C313A; --rmf-text-muted: #565C67; /* AA on all 7 light surfaces */ --rmf-border: #D0D3D8; /* decorative / structural */ --rmf-border-strong: #828997; /* control edge (D6, >= 3:1) */ /* Status — LIGHT canon (bg = *-50, fg = *-700, border = *-200). info / neutral [derived] by the same stated rule. */ --rmf-status-success-bg: #ECFDF5; --rmf-status-success-fg: #047857; --rmf-status-success-border: #A7F3D0; --rmf-status-warning-bg: #FFFBEB; --rmf-status-warning-fg: #B45309; --rmf-status-warning-border: #FDE68A; --rmf-status-danger-bg: #FEF2F2; --rmf-status-danger-fg: #B91C1C; --rmf-status-danger-border: #FECACA; --rmf-status-info-bg: #EFF6FF; --rmf-status-info-fg: #1D4ED8; --rmf-status-info-border: #BFDBFE; --rmf-status-neutral-bg: #FAFAFA; --rmf-status-neutral-fg: #3F3F46; --rmf-status-neutral-border: #E4E4E7; } /* ========================================================================== RMF-OS · Typography Space Grotesk (display) · Geist (text/UI) · Geist Mono (data/codes) Technical, geometric, calm. Headings tighten; labels track out in caps. ========================================================================== */ :root { /* ---- Families -------------------------------------------------------- */ --rmf-font-display: 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif; --rmf-font-text: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --rmf-font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', 'JetBrains Mono', monospace; /* ---- Type scale (px) ------------------------------------------------- */ --rmf-fs-display: 56px; /* hero wordmark / big statements */ --rmf-fs-h1: 40px; --rmf-fs-h2: 30px; --rmf-fs-h3: 22px; --rmf-fs-h4: 18px; --rmf-fs-body-lg: 16px; --rmf-fs-body: 14px; /* app default */ --rmf-fs-sm: 13px; --rmf-fs-xs: 12px; --rmf-fs-label: 11px; /* tracked-out caps / eyebrows */ /* ---- Weights ------------------------------------ @kind font --------- */ --rmf-fw-light: 300; /* @kind font */ --rmf-fw-regular: 400; /* @kind font */ --rmf-fw-book: 450; /* @kind font */ --rmf-fw-medium: 500; /* @kind font */ --rmf-fw-semibold: 600; /* @kind font */ --rmf-fw-bold: 700; /* @kind font */ /* ---- Line heights ------------------------------- @kind font --------- */ --rmf-lh-tight: 1.05; /* @kind font */ --rmf-lh-snug: 1.2; /* @kind font */ --rmf-lh-normal: 1.45; /* @kind font */ --rmf-lh-relaxed: 1.6; /* @kind font */ /* ---- Letter spacing ----------------------------- @kind font --------- */ --rmf-ls-tight: -0.02em; /* display / headings @kind font */ --rmf-ls-snug: -0.01em; /* @kind font */ --rmf-ls-normal: 0; /* @kind font */ --rmf-ls-wide: 0.04em; /* @kind font */ --rmf-ls-caps: 0.18em; /* eyebrow / label caps @kind font */ /* ---- Semantic roles ----------------------------- @kind font --------- */ --rmf-type-display: var(--rmf-fw-bold) var(--rmf-fs-display)/var(--rmf-lh-tight) var(--rmf-font-display); /* @kind font */ --rmf-type-h1: var(--rmf-fw-semibold) var(--rmf-fs-h1)/var(--rmf-lh-snug) var(--rmf-font-display); /* @kind font */ --rmf-type-h2: var(--rmf-fw-semibold) var(--rmf-fs-h2)/var(--rmf-lh-snug) var(--rmf-font-display); /* @kind font */ --rmf-type-h3: var(--rmf-fw-medium) var(--rmf-fs-h3)/var(--rmf-lh-snug) var(--rmf-font-display); /* @kind font */ --rmf-type-body: var(--rmf-fw-regular) var(--rmf-fs-body)/var(--rmf-lh-normal) var(--rmf-font-text); /* @kind font */ --rmf-type-mono: var(--rmf-fw-medium) var(--rmf-fs-sm)/var(--rmf-lh-normal) var(--rmf-font-mono); /* @kind font */ } /* ========================================================================== RMF-OS · Spacing — 4px base grid. Calm, generous, enterprise density. ========================================================================== */ :root { --rmf-sp-0: 0; /* @kind spacing */ --rmf-sp-1: 2px; --rmf-sp-2: 4px; --rmf-sp-3: 6px; --rmf-sp-4: 8px; --rmf-sp-5: 12px; --rmf-sp-6: 16px; --rmf-sp-7: 20px; --rmf-sp-8: 24px; --rmf-sp-9: 32px; --rmf-sp-10: 40px; --rmf-sp-11: 48px; --rmf-sp-12: 64px; --rmf-sp-13: 80px; --rmf-sp-14: 96px; --rmf-sp-15: 128px; /* Layout rhythm */ --rmf-gutter: 24px; --rmf-page-pad: 32px; --rmf-section-gap: 64px; --rmf-content-max: 1240px; --rmf-sidebar-w: 248px; --rmf-topbar-h: 56px; } /* ========================================================================== RMF-OS · Radius — geometric, restrained. Hardware-precise, not pill-soft. ========================================================================== */ :root { --rmf-r-0: 0; /* @kind radius */ --rmf-r-xs: 3px; /* tags, chips */ --rmf-r-sm: 5px; /* inputs, small buttons */ --rmf-r-md: 8px; /* buttons, cards inner */ --rmf-r-lg: 12px; /* cards, panels */ --rmf-r-xl: 16px; /* modals, feature panels */ --rmf-r-2xl: 22px; /* app-icon (square mark) */ --rmf-r-pill: 999px; /* status pills, avatars */ /* The hexagon mark implies angular geometry; default surfaces stay crisp. */ --rmf-r-surface: var(--rmf-r-lg); --rmf-r-control: var(--rmf-r-md); --rmf-r-field: var(--rmf-r-sm); } /* ========================================================================== RMF-OS · Elevation & Glow On dark, elevation is carried by thin light borders + soft deep shadows. The blue "core glow" is a signature — used sparingly on focus/active nodes. Glow RGBA follow the Graphite Canon accent (#4F62E3 = 79,98,227). ========================================================================== */ :root { /* Deep ambient shadows (dark UI) */ --rmf-shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --rmf-shadow-md: 0 4px 14px rgba(0,0,0,0.45); --rmf-shadow-lg: 0 12px 34px rgba(0,0,0,0.55); --rmf-shadow-xl: 0 28px 70px rgba(0,0,0,0.62); /* Hairline "inset border" look for surfaces on dark */ --rmf-edge-top: inset 0 1px 0 rgba(255,255,255,0.06); /* @kind shadow */ --rmf-edge-hair: inset 0 0 0 1px rgba(255,255,255,0.06); /* @kind shadow */ /* Signature blue glow (identity core / active node / focus) */ --rmf-glow-sm: 0 0 0 3px rgba(79,98,227,0.18); --rmf-glow-md: 0 0 20px rgba(79,98,227,0.35); --rmf-glow-lg: 0 0 40px rgba(79,98,227,0.45); --rmf-glow-core: 0 0 24px rgba(79,98,227,0.55), 0 0 4px rgba(154,165,239,0.9); /* Focus ring */ --rmf-ring: 0 0 0 3px var(--rmf-focus-ring); /* Composed surface elevations */ --rmf-elev-card: var(--rmf-edge-hair), var(--rmf-shadow-md); --rmf-elev-panel: var(--rmf-edge-hair), var(--rmf-shadow-lg); --rmf-elev-pop: var(--rmf-edge-hair), var(--rmf-shadow-xl); } /* ========================================================================== RMF-OS · Motion — calm, precise, mechanical. No bounce, no overshoot. Movement should feel like a system settling into a decided state. ========================================================================== */ :root { --rmf-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */ --rmf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --rmf-ease-in: cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */ --rmf-ease-linear: linear; /* @kind other */ --rmf-dur-instant: 80ms; /* @kind other */ --rmf-dur-fast: 140ms; /* @kind other */ --rmf-dur-base: 220ms; /* @kind other */ --rmf-dur-slow: 360ms; /* @kind other */ --rmf-dur-glow: 600ms; /* core pulse @kind other */ --rmf-t-control: color var(--rmf-dur-fast) var(--rmf-ease-standard), background-color var(--rmf-dur-fast) var(--rmf-ease-standard), border-color var(--rmf-dur-fast) var(--rmf-ease-standard), box-shadow var(--rmf-dur-fast) var(--rmf-ease-standard), transform var(--rmf-dur-fast) var(--rmf-ease-standard); /* @kind other */ } @media (prefers-reduced-motion: reduce) { :root { --rmf-dur-instant: 0ms; /* @kind other */ --rmf-dur-fast: 0ms; /* @kind other */ --rmf-dur-base: 0ms; /* @kind other */ --rmf-dur-slow: 0ms; /* @kind other */ --rmf-dur-glow: 0ms; /* @kind other */ } }