/* ============================================================ BeaverMind.ai — Design Tokens Colors + Typography ============================================================ */ :root { /* ----------------------------------------- COLORS — Canvas & Surfaces Dark-only. No light backgrounds as primary canvas. ----------------------------------------- */ --bm-canvas: #000322; /* page background — deep navy */ --bm-surface: #000B45; /* cards, raised panels */ --bm-surface-2: #001161; /* hover / elevated surface */ --bm-glow: #00187D; /* radial glow (bottom-left signature) */ --bm-hairline: rgba(109,145,242,0.14); /* 1px borders on surfaces */ --bm-hairline-strong: rgba(109,145,242,0.28); /* ----------------------------------------- COLORS — Neutral slate family For breaking up heavy accent-blue sections. These are navy-graphite, still in-brand, but read as neutral next to the deep-blue canvas. Use on alternating sections to introduce rhythm. ----------------------------------------- */ --bm-slate: #0E1220; /* neutral section bg — desaturated navy */ --bm-slate-2: #161A2B; /* raised surface on slate */ --bm-slate-hairline: rgba(255,255,255,0.06); --bm-slate-hairline-strong: rgba(255,255,255,0.12); /* ----------------------------------------- COLORS — Accent (single-accent system) Only one accent color. Don't introduce competing accents. ----------------------------------------- */ --bm-accent: #6D91F2; /* primary accent — cool blue */ --bm-accent-hover: #89A6F5; /* lighter on hover */ --bm-accent-press: #557CE8; /* slightly darker on press */ --bm-accent-soft: rgba(109,145,242,0.12); /* accent tint on surfaces */ --bm-accent-ring: rgba(109,145,242,0.40); /* focus ring */ /* ----------------------------------------- COLORS — Foreground / Text ----------------------------------------- */ --bm-text: #F5F9FF; /* primary text, cool-white */ --bm-text-muted: #8A94B4; /* secondary text, labels, captions */ --bm-text-dim: #5A6380; /* disabled / very tertiary */ --bm-text-on-accent:#000322; /* text on --bm-accent fills */ /* ----------------------------------------- COLORS — Semantic Kept restrained. Lean on accent + muted for most states. ----------------------------------------- */ --bm-success: #5FE2B0; --bm-warning: #F2C46D; --bm-danger: #F26D8A; --bm-info: var(--bm-accent); /* ----------------------------------------- TYPOGRAPHY — Font stacks SF Pro Display for headlines (≥20px). SF Pro Text for body/UI (<20px). Loaded via fonts.css — include it before this file. System fallbacks on if the files fail to load. ----------------------------------------- */ --bm-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --bm-font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --bm-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", Consolas, monospace; /* ----------------------------------------- TYPOGRAPHY — Weights ----------------------------------------- */ --bm-weight-regular: 400; --bm-weight-medium: 500; --bm-weight-semibold:600; --bm-weight-bold: 700; /* ----------------------------------------- TYPOGRAPHY — Sizes (rem scale, 16px base) ----------------------------------------- */ --bm-size-display-xl: 4.5rem; /* 72px */ --bm-size-display-lg: 3.5rem; /* 56px */ --bm-size-display-md: 2.75rem; /* 44px */ --bm-size-h1: 2.25rem; /* 36px */ --bm-size-h2: 1.75rem; /* 28px */ --bm-size-h3: 1.375rem; /* 22px */ --bm-size-h4: 1.125rem; /* 18px */ --bm-size-body: 1rem; /* 16px */ --bm-size-small: 0.875rem; /* 14px */ --bm-size-micro: 0.75rem; /* 12px */ /* ----------------------------------------- TYPOGRAPHY — Line heights Tight on display. Comfortable on body. ----------------------------------------- */ --bm-lh-display: 1.05; --bm-lh-heading: 1.15; --bm-lh-body: 1.55; --bm-lh-tight: 1.3; /* ----------------------------------------- TYPOGRAPHY — Letter spacing -0.025em on headlines is a brand signature. ----------------------------------------- */ --bm-tracking-display: -0.025em; --bm-tracking-heading: -0.02em; --bm-tracking-body: 0; --bm-tracking-label: 0.04em; /* ALL-CAPS eyebrow labels */ --bm-tracking-caps: 0.08em; /* ----------------------------------------- RADII ----------------------------------------- */ --bm-radius-sm: 8px; /* inputs, chips, small buttons */ --bm-radius-md: 14px; /* buttons, tags, mid elements */ --bm-radius-lg: 18px; /* cards, panels, hero containers */ --bm-radius-pill: 999px; /* ----------------------------------------- SPACING (4px base) ----------------------------------------- */ --bm-space-1: 4px; --bm-space-2: 8px; --bm-space-3: 12px; --bm-space-4: 16px; --bm-space-5: 24px; --bm-space-6: 32px; --bm-space-7: 48px; --bm-space-8: 64px; --bm-space-9: 96px; --bm-space-10: 128px; /* ----------------------------------------- SHADOWS / ELEVATION Elevation is subtle — depth comes from surface value, not drop shadows. ----------------------------------------- */ --bm-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --bm-shadow-md: 0 8px 24px rgba(0,0,0,0.45); --bm-shadow-lg: 0 24px 64px rgba(0,0,0,0.55); --bm-glow-accent: 0 0 0 1px var(--bm-hairline-strong), 0 20px 60px -20px rgba(109,145,242,0.45); /* ----------------------------------------- SIGNATURE BACKGROUND Radial warm-blue glow at bottom-left. Apply `background: var(--bm-canvas-bg)` to full-bleed surfaces. ----------------------------------------- */ --bm-canvas-bg: radial-gradient(ellipse 60% 55% at 0% 100%, rgba(0,24,125,0.75) 0%, rgba(0,11,69,0.50) 35%, rgba(0,3,34,0) 70%), #000322; /* ----------------------------------------- PERSONAL BRAND — Founder Blue Personal-brand-only. Use on LinkedIn headshots, founder profile assets, and social content where Ruben is on camera. NEVER use on BeaverMind product, client, or marketing surfaces. ----------------------------------------- */ --bm-founder-blue-top: #025DBD; --bm-founder-blue-bottom: #489CF2; --bm-founder-blue: linear-gradient(180deg, #025DBD 0%, #489CF2 100%); /* ----------------------------------------- MOTION ----------------------------------------- */ --bm-duration-fast: 120ms; --bm-duration-med: 220ms; --bm-duration-slow: 420ms; --bm-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --bm-ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1); } /* ============================================================ SEMANTIC ELEMENT STYLES Opt-in by scoping under `.bm` or applying to a root. ============================================================ */ .bm, .bm-root { background: var(--bm-canvas-bg); color: var(--bm-text); font-family: var(--bm-font-body); font-size: var(--bm-size-body); font-weight: var(--bm-weight-regular); line-height: var(--bm-lh-body); letter-spacing: var(--bm-tracking-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .bm h1, .bm .bm-h1 { font-family: var(--bm-font-display); font-size: var(--bm-size-h1); font-weight: var(--bm-weight-bold); line-height: var(--bm-lh-heading); letter-spacing: var(--bm-tracking-display); color: var(--bm-text); margin: 0; } .bm h2, .bm .bm-h2 { font-family: var(--bm-font-display); font-size: var(--bm-size-h2); font-weight: var(--bm-weight-bold); line-height: var(--bm-lh-heading); letter-spacing: var(--bm-tracking-display); color: var(--bm-text); margin: 0; } .bm h3, .bm .bm-h3 { font-family: var(--bm-font-display); font-size: var(--bm-size-h3); font-weight: var(--bm-weight-semibold); line-height: var(--bm-lh-tight); letter-spacing: var(--bm-tracking-heading); color: var(--bm-text); margin: 0; } .bm h4, .bm .bm-h4 { font-family: var(--bm-font-display); font-size: var(--bm-size-h4); font-weight: var(--bm-weight-semibold); line-height: var(--bm-lh-tight); letter-spacing: var(--bm-tracking-heading); color: var(--bm-text); margin: 0; } .bm p, .bm .bm-p { font-size: var(--bm-size-body); line-height: var(--bm-lh-body); color: var(--bm-text); margin: 0; } .bm .bm-lead { font-size: var(--bm-size-h4); line-height: var(--bm-lh-tight); color: var(--bm-text); } .bm .bm-muted, .bm small { color: var(--bm-text-muted); font-size: var(--bm-size-small); } .bm .bm-eyebrow { font-size: var(--bm-size-micro); font-weight: var(--bm-weight-semibold); letter-spacing: var(--bm-tracking-label); text-transform: uppercase; color: var(--bm-accent); } .bm code, .bm .bm-mono { font-family: var(--bm-font-mono); font-size: 0.92em; color: var(--bm-text); background: var(--bm-surface); padding: 2px 6px; border-radius: var(--bm-radius-sm); border: 1px solid var(--bm-hairline); } .bm a { color: var(--bm-accent); text-decoration: none; transition: color var(--bm-duration-fast) var(--bm-ease-standard); } .bm a:hover { color: var(--bm-accent-hover); } .bm hr { border: 0; height: 1px; background: var(--bm-hairline); margin: var(--bm-space-5) 0; } /* Display sizes (opt-in) */ .bm .bm-display-xl { font-family: var(--bm-font-display); font-size: var(--bm-size-display-xl); font-weight: var(--bm-weight-bold); line-height: var(--bm-lh-display); letter-spacing: var(--bm-tracking-display); } .bm .bm-display-lg { font-family: var(--bm-font-display); font-size: var(--bm-size-display-lg); font-weight: var(--bm-weight-bold); line-height: var(--bm-lh-display); letter-spacing: var(--bm-tracking-display); } .bm .bm-display-md { font-family: var(--bm-font-display); font-size: var(--bm-size-display-md); font-weight: var(--bm-weight-bold); line-height: var(--bm-lh-display); letter-spacing: var(--bm-tracking-display); }