/* ============================================================ Bron Labs — Colors & Type Foundation "All brain. All brawn." ============================================================ */ /* ---- Web fonts (Google Fonts — substituted for now, see README) ---- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ---------------------------------------------------------- PALETTE Dark-first brand. Void is the canvas, Electric Indigo is the dominant brand color, Cyan Pulse is a sparing accent. ---------------------------------------------------------- */ /* Foundation */ --bron-void: #08090F; /* primary background */ --bron-surface: #12141F; /* cards, panels */ --bron-surface-2: #1A1D2B; /* raised surfaces, hover */ --bron-line: #232739; /* hairline dividers on dark */ --bron-line-strong: #2E3450; /* stronger dividers, input borders */ /* Brand */ --bron-indigo: #5C6EFA; /* primary brand, CTAs */ --bron-indigo-hover: #7281FB; --bron-indigo-press: #4858E0; --bron-indigo-soft: #5C6EFA1F; /* 12% alpha — fill tints */ --bron-cyan: #00D4FF; /* accent only — used sparingly */ --bron-cyan-soft: #00D4FF1F; /* Mark gradient anchors (3D wedge) */ --bron-indigo-deep: #2A3A9E; --bron-indigo-shadow: #111630; /* Neutrals (on-dark text scale) */ --bron-white: #F0F2FF; /* headlines, primary text */ --bron-fog: #A0ABBB; /* body text, secondary copy */ --bron-fog-dim: #6B7388; /* tertiary, captions, metadata */ --bron-fog-dark: #3C4256; /* disabled, hairlines on dark */ /* Semantic */ --bron-success: #4FD18B; --bron-warning: #FFB454; --bron-danger: #FF5C7A; /* ---------------------------------------------------------- SEMANTIC TOKENS — reference these in components ---------------------------------------------------------- */ --bg: var(--bron-void); --bg-elevated: var(--bron-surface); --bg-elevated-2: var(--bron-surface-2); --fg: var(--bron-white); --fg-muted: var(--bron-fog); --fg-dim: var(--bron-fog-dim); --fg-disabled: var(--bron-fog-dark); --border: var(--bron-line); --border-strong: var(--bron-line-strong); --accent: var(--bron-indigo); --accent-hover: var(--bron-indigo-hover); --accent-press: var(--bron-indigo-press); --accent-soft: var(--bron-indigo-soft); --highlight: var(--bron-cyan); --highlight-soft: var(--bron-cyan-soft); /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* Type scale (rem-based, 16px root) */ --t-display-xl: clamp(3rem, 6vw + 1rem, 5.5rem); /* hero headlines */ --t-display-lg: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --t-h1: 2.5rem; /* 40 */ --t-h2: 2rem; /* 32 */ --t-h3: 1.5rem; /* 24 */ --t-h4: 1.25rem; /* 20 */ --t-body-lg: 1.125rem; /* 18 */ --t-body: 1rem; /* 16 */ --t-body-sm: 0.875rem; /* 14 */ --t-caption: 0.75rem; /* 12 */ --t-eyebrow: 0.6875rem; /* 11 — tracked uppercase */ /* Tracking / leading */ --track-display: -0.02em; --track-body: 0; --track-eyebrow: 0.18em; --lead-display: 1.04; --lead-headline: 1.15; --lead-body: 1.65; /* ---------------------------------------------------------- SPACING (4px base) ---------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---------------------------------------------------------- RADII Tight, technical. No pill chrome. ---------------------------------------------------------- */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-pill: 9999px; /* ---------------------------------------------------------- SHADOWS / GLOWS On dark backgrounds, shadow is mostly inner light + glow. ---------------------------------------------------------- */ --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px 0 rgba(0,0,0,0.4); --shadow-2: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px -6px rgba(0,0,0,0.6); --shadow-3: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 20px 50px -12px rgba(0,0,0,0.8); --glow-indigo: 0 0 0 1px rgba(92,110,250,0.4), 0 0 32px -4px rgba(92,110,250,0.45); --glow-cyan: 0 0 0 1px rgba(0,212,255,0.4), 0 0 24px -4px rgba(0,212,255,0.45); /* ---------------------------------------------------------- MOTION Sharp, deliberate. No bouncy spring. ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms; } /* ============================================================ BASE RESET + TYPE STYLES ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lead-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headlines — Space Grotesk, tight tracking */ h1, h2, h3, h4, h5, h6, .display-xl, .display-lg, .h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 600; color: var(--fg); letter-spacing: var(--track-display); line-height: var(--lead-headline); margin: 0; } .display-xl { font-size: var(--t-display-xl); font-weight: 700; line-height: var(--lead-display); letter-spacing: -0.03em; } .display-lg { font-size: var(--t-display-lg); font-weight: 700; line-height: var(--lead-display); letter-spacing: -0.025em; } h1, .h1 { font-size: var(--t-h1); font-weight: 600; } h2, .h2 { font-size: var(--t-h2); font-weight: 600; } h3, .h3 { font-size: var(--t-h3); font-weight: 600; } h4, .h4 { font-size: var(--t-h4); font-weight: 500; } /* Body */ p, .p { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lead-body); color: var(--fg-muted); margin: 0; } .p-lg { font-size: var(--t-body-lg); } .p-sm { font-size: var(--t-body-sm); } /* Eyebrow — tracked uppercase label */ .eyebrow { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--accent); } /* Mono / code */ code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; } /* Link */ a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-hover); border-bottom-color: currentColor; } /* Selection */ ::selection { background: var(--accent); color: var(--bg); }