/* ============================================================ SignalMatrix AI — Foundations Canonical CSS variables. Import this at the root of any SignalMatrix HTML, then style with var(--...) only. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@600;700;800&display=swap'); :root { /* ------------------------------------------------------------ COLOR — Navy surface ladder 1000 = darkest (page bg), 500 = lightest navy still used as a surface. ------------------------------------------------------------ */ --navy-1000: #06091A; /* deeper-than-page; rare. Vignette edges, modal scrims. */ --navy-900: #0A0F1E; /* CANONICAL page background */ --navy-800: #121829; /* card surface */ --navy-700: #1A2238; /* nested element / hover surface */ --navy-600: #232C46; /* input fill on dark / row stripes */ --navy-500: #2D375A; /* dividers when a fill (not 1px line) is needed */ /* Back-compat aliases (DO NOT use in new code — kept so existing files don't break) */ --bg-primary: var(--navy-900); --bg-secondary: var(--navy-800); --bg-tertiary: var(--navy-700); /* Brand green — sampled from the "Matrix" glyphs in the logo */ --brand-green: #00FF88; --brand-green-rgb: 0, 255, 136; --brand-green-soft: #19FF95; /* hover brightness boost */ --brand-green-deep: #00C46A; /* press / pinned-down */ --brand-green-tint: rgba(0, 255, 136, 0.10); /* 10% fill */ --brand-green-glow: rgba(0, 255, 136, 0.25); /* outer glow */ /* ------------------------------------------------------------ COLOR — Pillar accents EXPLICITLY NAMED so it's obvious these belong to *systems*, not general decoration. Never use --pillar-* tokens for non-pillar UI. ------------------------------------------------------------ */ --pillar-aeo: #00FF88; /* AEO / LLM Visibility — brand green (signal/visibility = keystone color) */ --pillar-aeo-tint: rgba(0, 255, 136, 0.10); --pillar-aeo-glow: rgba(0, 255, 136, 0.25); --pillar-automation: #00D4FF; /* Intelligent Automation — bright cyan */ --pillar-automation-tint: rgba(0, 212, 255, 0.10); --pillar-automation-glow: rgba(0, 212, 255, 0.25); --pillar-crm: #A78BFA; /* CRM Revenue Capture — electric purple */ --pillar-crm-tint: rgba(167, 139, 250, 0.10); --pillar-crm-glow: rgba(167, 139, 250, 0.25); /* Utility accent — non-pillar. "Founding partner", premium upsells, warning. */ --amber: #F5B544; --amber-rgb: 245, 181, 68; --amber-tint: rgba(245, 181, 68, 0.10); --amber-glow: rgba(245, 181, 68, 0.25); /* Back-compat aliases (DO NOT use in new code) */ --teal: var(--pillar-aeo); --teal-rgb: 0, 212, 255; --teal-tint: var(--pillar-aeo-tint); --teal-glow: var(--pillar-aeo-glow); --purple: var(--pillar-automation); --purple-rgb: 167, 139, 250; --purple-tint: var(--pillar-automation-tint); --purple-glow: var(--pillar-automation-glow); /* ------------------------------------------------------------ COLOR — Text scale on navy-900 Each token annotated with its measured contrast ratio on --navy-900 and the smallest-allowed text usage. Anything labelled DECORATIVE ONLY must never carry text. ------------------------------------------------------------ */ --fg: #FFFFFF; /* 21:1 AAA · any size · headings + body */ --fg-mute: rgba(255, 255, 255, 0.72); /* 9.6:1 AAA · ≥12px · secondary prose, labels */ --fg-dim: rgba(255, 255, 255, 0.60); /* 6.4:1 AA · ≥14px · captions, attributions */ --fg-faint: rgba(255, 255, 255, 0.30); /* 1.6:1 FAIL · DECORATIVE ONLY — disabled chrome, separators. Never text. */ /* Back-compat aliases (DO NOT use in new code) */ --fg-1: var(--fg); --fg-2: var(--fg); --fg-3: var(--fg-mute); --fg-4: var(--fg-dim); --fg-disabled: var(--fg-faint); /* On light backgrounds (print, partner materials) */ --ink-1: #0A0F1E; --ink-2: rgba(10, 15, 30, 0.85); --ink-3: rgba(10, 15, 30, 0.65); --ink-4: rgba(10, 15, 30, 0.50); /* ------------------------------------------------------------ COLOR — Semantic ------------------------------------------------------------ */ --success: var(--brand-green); --warning: #F5B544; /* shares amber hue; never used adjacent to Product vertical accents */ --error: #FF3B5C; /* vivid coral-red to match pillar saturation */ --info: var(--teal); /* ------------------------------------------------------------ COLOR — Strokes & dividers ------------------------------------------------------------ */ --stroke-1: rgba(255, 255, 255, 0.10); /* card borders */ --stroke-2: rgba(255, 255, 255, 0.20); /* input borders */ --stroke-3: rgba(255, 255, 255, 0.08); /* section dividers */ /* ------------------------------------------------------------ TYPOGRAPHY — Families ------------------------------------------------------------ */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Manrope', 'Inter', system-ui, sans-serif; /* Display + H1 fallback option */ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ------------------------------------------------------------ TYPOGRAPHY — Type ramp Format: size / line-height / weight / tracking ------------------------------------------------------------ */ --t-display-size: 72px; --t-display-lh: 1.04; --t-display-weight: 800; --t-display-track: -0.03em; --t-h1-size: 56px; --t-h1-lh: 1.08; --t-h1-weight: 800; --t-h1-track: -0.025em; --t-h2-size: 40px; --t-h2-lh: 1.15; --t-h2-weight: 700; --t-h2-track: -0.02em; --t-h3-size: 24px; --t-h3-lh: 1.3; --t-h3-weight: 700; --t-h3-track: -0.01em; --t-h4-size: 13px; --t-h4-lh: 1.4; --t-h4-weight: 600; --t-h4-track: 0.12em; /* tracked eyebrow */ --t-h4-transform: uppercase; --t-body-lg-size: 20px; --t-body-lg-lh: 1.55; --t-body-lg-weight: 400; --t-body-size: 16px; --t-body-lh: 1.6; --t-body-weight: 400; --t-body-sm-size: 14px; --t-body-sm-lh: 1.55; --t-body-sm-weight: 400; --t-caption-size: 12px; --t-caption-lh: 1.5; --t-caption-weight: 500; --t-caption-track: 0.02em; --t-button-size: 15px; --t-button-lh: 1; --t-button-weight: 600; --t-button-track: -0.005em; --t-nav-size: 14px; --t-nav-lh: 1; --t-nav-weight: 500; /* ------------------------------------------------------------ SPACING — 8px base ------------------------------------------------------------ */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --space-5xl: 80px; --space-6xl: 96px; --space-7xl: 128px; /* Section + layout */ --section-y: 96px; --card-pad: 32px; --stat-pad: 24px; --max-width: 1440px; --gutter-outer: 80px; --gutter-column: 24px; /* ------------------------------------------------------------ RADII ------------------------------------------------------------ */ --radius-sm: 4px; /* badges, pills */ --radius-md: 8px; /* buttons, inputs */ --radius-lg: 12px; /* cards */ --radius-xl: 16px; /* modals, sheets */ --radius-full: 9999px; /* ------------------------------------------------------------ ELEVATION — glow over gloss ------------------------------------------------------------ */ --glow-green: 0 0 32px var(--brand-green-glow); --glow-teal: 0 0 32px var(--teal-glow); --glow-purple: 0 0 32px var(--purple-glow); --glow-amber: 0 0 32px var(--amber-glow); --glow-soft: 0 0 24px rgba(0, 255, 136, 0.12); /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ============================================================ SEMANTIC TYPE — apply directly to elements ============================================================ */ html, body { background: var(--bg-primary); color: var(--fg-2); font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--t-body-weight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .display, h1.display { font-family: var(--font-display); font-size: var(--t-display-size); line-height: var(--t-display-lh); font-weight: var(--t-display-weight); letter-spacing: var(--t-display-track); color: var(--fg-1); text-wrap: balance; margin: 0; } h1 { font-family: var(--font-display); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); font-weight: var(--t-h1-weight); letter-spacing: var(--t-h1-track); color: var(--fg-1); text-wrap: balance; margin: 0; } h2 { font-family: var(--font-sans); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); font-weight: var(--t-h2-weight); letter-spacing: var(--t-h2-track); color: var(--fg-1); text-wrap: balance; margin: 0; } h3 { font-family: var(--font-sans); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: var(--t-h3-weight); letter-spacing: var(--t-h3-track); color: var(--fg-1); margin: 0; } h4, .eyebrow { font-family: var(--font-sans); font-size: var(--t-h4-size); line-height: var(--t-h4-lh); font-weight: var(--t-h4-weight); letter-spacing: var(--t-h4-track); text-transform: var(--t-h4-transform); color: var(--fg-3); margin: 0; } p { font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--fg-2); text-wrap: pretty; margin: 0; } .lead { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--fg-2); } .small { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); color: var(--fg-3); } .caption { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); font-weight: var(--t-caption-weight); letter-spacing: var(--t-caption-track); color: var(--fg-4); } /* ============================================================ SUPPORTING UTILITIES (used by preview cards) ============================================================ */ .accent-rule { display: inline-block; width: 48px; height: 2px; background: var(--brand-green); margin-bottom: 12px; } .accent-rule--teal { background: var(--teal); } .accent-rule--purple { background: var(--purple); } .accent-rule--amber { background: var(--amber); }