/* ============================================================ MONOSYSM ECOSYSTEM — DESIGN TOKENS One source of truth. The whole site re-themes by flipping a single [data-brand] attribute on . No gradients, no glass, no neon — flat industrial-software surfaces only. ============================================================ */ :root { /* ---- Brand constants (never change between brands) ---- */ --accent: #FF370A; /* Pantone Orange 172C */ --accent-dim: #d42d08; --ink: #000000; --paper: #ffffff; --render-void: #0b0b0c; /* neutral stage behind product renders */ /* ---- Type ---- */ --font-display: "Martian Mono", "JetBrains Mono", ui-monospace, monospace; --font-ui: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace; /* Fluid type scale (clamp: min, preferred, max) */ --t-mega: clamp(2.6rem, 7.2vw, 6.4rem); --t-hero: clamp(2rem, 5vw, 4.2rem); --t-xl: clamp(1.4rem, 2.6vw, 2.1rem); --t-lg: 1.25rem; --t-md: 0.95rem; --t-sm: 0.8rem; --t-xs: 0.7rem; --t-2xs: 0.62rem; --lh-tight: 0.98; --lh-snug: 1.15; --lh-body: 1.5; --tracking-label: 0.16em; /* wide-tracked mono labels */ --tracking-wide: 0.28em; /* ---- Spacing (8px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- Structure ---- */ --hair: 1px; /* hairline weight */ --gutter: clamp(16px, 3.4vw, 40px); --radius: 0px; /* industrial = square corners */ --tick: 9px; /* corner-tick arm length on panels */ --scrollbar-w: 0px; /* scrollbars are overlay/hidden — reserve no layout width */ /* ---- Motion (every animation communicates state) ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-overlay: 240ms; --dur-screen: 420ms; --dur-brand: 680ms; /* brand switch: within 500–800ms */ --z-screen: 1; --z-topbar: 40; --z-overlay: 100; --z-transition: 200; } /* ============================================================ BRAND THEMES — semantic tokens the components actually use ============================================================ */ /* MONOSYSM — orange field, black ink, editorial negative space */ [data-brand="monosysm"] { color-scheme: light; --bg: var(--accent); --fg: var(--ink); --fg-soft: rgba(0, 0, 0, 0.62); --fg-faint: rgba(0, 0, 0, 0.38); --line: rgba(0, 0, 0, 0.24); --line-strong: var(--ink); --field-bg: rgba(0, 0, 0, 0.04); --btn-bg: var(--ink); --btn-fg: var(--accent); --btn-ghost-fg: var(--ink); /* inverted surface (dark spec panels sit inside the orange page) */ --inv-bg: #0d0d0e; --inv-fg: var(--accent); --inv-line: rgba(255, 55, 10, 0.26); --inv-soft: rgba(255, 55, 10, 0.55); --render-bg: var(--render-void); --ascii-color: var(--ink); /* ascii art on orange = black glyphs */ } /* BASIC_SYSTEM — black field, orange ink, inventory efficiency */ [data-brand="basys"] { color-scheme: dark; --bg: #050505; --fg: var(--accent); --fg-soft: rgba(255, 55, 10, 0.66); --fg-faint: rgba(255, 55, 10, 0.38); --line: rgba(255, 55, 10, 0.22); --line-strong: var(--accent); --field-bg: rgba(255, 55, 10, 0.05); --btn-bg: var(--accent); --btn-fg: var(--ink); --btn-ghost-fg: var(--accent); --inv-bg: #0d0d0e; --inv-fg: var(--accent); --inv-line: rgba(255, 55, 10, 0.26); --inv-soft: rgba(255, 55, 10, 0.55); --render-bg: var(--render-void); --ascii-color: var(--accent); /* ascii art on black = orange glyphs */ } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-overlay: 0ms; --dur-screen: 0ms; --dur-brand: 0ms; } }