/* * SnapBrainy Design Tokens — v4 Signal Teal Rebrand * Palette: Fog White · Chalk · Iron Slate · Obsidian · Signal Teal · Electric Copper · Brass * Typography: Playfair Display (display serif) · Inter (UI) */ :root { /* ═══════════════════════════════════════════════════════ v2 — New brand system (used by home page + future) ═══════════════════════════════════════════════════════ */ /* Color palette */ --color-bg: #F5F4EF; /* Fog White — dominant bg */ --color-surface: #EDECEA; /* Chalk — card elevated */ --color-surface-2: #E4E2DC; /* Inset surfaces, hover */ --color-surface-deep: #111318; /* Ink Black — closing CTA dark section */ --color-dark: #1A2328; /* Iron Slate — manifesto, footer dark sections */ --color-text: #0E1113; /* Obsidian — headings, primary */ --color-text-muted: #8A969B; /* Steel Mist — meta, labels, descriptions */ --color-text-faint: #B0B8BC; /* Faint — placeholders, decorative */ --color-text-inverse: #F5F4EF; /* Fog on dark backgrounds */ --color-brand: #0F6B78; /* Signal Teal — primary brand identity */ --color-blue: #0F6B78; /* Signal Teal — backward-compat alias */ --color-blue-dark: #0A5764; /* Signal Teal hover/active */ --color-blue-subtle: rgba(15,107,120,0.08); --color-cta: #B85E1F; /* Electric Copper — primary CTA buttons */ --color-cta-hover: #9E4F18; --color-gold: #B88746; /* Brass — stars, small badges */ --color-gold-dark: #9A6E35; --color-gold-subtle: #F0E6D0; --color-divider: #D7DDDF; /* Pale Graphite — borders, dividers */ --color-border: rgba(14,17,19,0.10); --color-border-subtle: rgba(14,17,19,0.06); --color-success: #567C5C; /* Tactical Green */ --color-pine: #1E8A67; /* Pine — legacy success */ --color-pine-bg: #E8F5F0; --color-oxide: #C84D4D; /* Oxide — error, alert */ --color-oxide-bg: #FAECEC; /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* Text scale — fluid with clamp() */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem); /* Spacing — 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Border radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 20px; /* Card radius per brand spec */ --radius-xl: 28px; --radius-full: 999px; /* Pill shape for CTAs */ /* Shadows — warm-toned, never heavy black */ --shadow-sm: 0 1px 3px rgba(17,19,24,0.06), 0 1px 2px rgba(17,19,24,0.04); --shadow-md: 0 4px 16px rgba(17,19,24,0.08), 0 1px 4px rgba(17,19,24,0.04); --shadow-lg: 0 16px 48px rgba(17,19,24,0.10), 0 4px 12px rgba(17,19,24,0.05); --shadow-card-hover: 0 24px 64px rgba(17,19,24,0.12), 0 6px 16px rgba(17,19,24,0.06); --shadow-blue: 0 4px 20px rgba(15,107,120,0.30); --shadow-gold: 0 4px 20px rgba(184,135,70,0.25); /* Borders */ --border-subtle: 1px solid rgba(14,17,19,0.06); --border-default: 1px solid rgba(14,17,19,0.10); /* Brand utility tokens */ --radius-card: 8px; --radius-btn: 6px; --section-gap: clamp(5rem, 9vw, 9rem); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 480ms; /* ═══════════════════════════════════════════════════════ v1 LEGACY — backward compat with non-home CSS files Fully aligned to new brand values. ═══════════════════════════════════════════════════════ */ /* Brand colors — legacy aliases */ --sb-navy: #01144F; /* kept only for product landing pages */ --sb-navy-deep: #000D38; --sb-navy-dark: #0A0F1E; --sb-gold: #B88746; /* Brass replaces old gold */ --sb-gold-dark: #9A6E35; --sb-gold-bg: #F0E6D0; /* Brass tint */ /* Signal Teal — primary brand */ --sb-blue: #0F6B78; --sb-blue-dark: #0A5764; --sb-blue-glow: 0 8px 24px rgba(15,107,120,0.30); /* Neutrals — new editorial palette */ --sb-ink: #111318; /* Ink Black */ --sb-text: #2A2D35; /* Body text, slightly softer */ --sb-muted: #5F6673; /* Slate */ --sb-subtle: #9AA0AB; --sb-border: #D7DDDF; /* Pale Graphite */ --sb-border-dark: rgba(255,255,255,0.10); --sb-bg: #F5F4EF; /* Fog White */ --sb-surface: #EDECEA; /* Chalk */ --sb-surface-2: #E4E2DC; /* Status */ --sb-success: #1E8A67; /* Pine */ --sb-success-bg: #E8F5F0; --sb-error: #C84D4D; /* Oxide */ --sb-error-bg: #FAECEC; --sb-warning: #B88746; /* Brass for warnings */ --sb-warning-bg: #F0E6D0; /* Typography — Inter for UI, Fraunces for display */ --sb-font-heading: 'Inter', system-ui, -apple-system, sans-serif; --sb-font-body: 'Inter', system-ui, -apple-system, sans-serif; --sb-font: 'Inter', system-ui, -apple-system, sans-serif; /* Font Scale */ --sb-text-xs: 0.75rem; --sb-text-sm: 0.875rem; --sb-text-base: 1rem; --sb-text-lg: 1.125rem; --sb-text-xl: 1.25rem; --sb-text-2xl: 1.5rem; --sb-text-3xl: clamp(1.5rem, 3vw, 1.875rem); --sb-text-4xl: clamp(1.875rem, 4vw, 2.25rem); --sb-text-5xl: clamp(2rem, 5vw, 3rem); --sb-text-hero: clamp(2.2rem, 6vw, 3.75rem); /* Spacing */ --sb-space-1: 0.25rem; --sb-space-2: 0.5rem; --sb-space-3: 0.75rem; --sb-space-4: 1rem; --sb-space-5: 1.25rem; --sb-space-6: 1.5rem; --sb-space-8: 2rem; --sb-space-10: 2.5rem; --sb-space-12: 3rem; --sb-space-16: 4rem; --sb-space-20: 5rem; --sb-space-24: 6rem; --sb-section-y: clamp(3rem, 7vw, 5rem); --sb-page-top: clamp(2.5rem, 5vw, 4rem); /* Layout */ --sb-container: 1200px; --sb-container-tight: 800px; --sb-container-wide: 1400px; --sb-container-px: clamp(1rem, 4vw, 2rem); /* Radius — aligned to brand spec */ --sb-radius-sm: 6px; --sb-radius: 10px; --sb-radius-md: 16px; --sb-radius-lg: 20px; /* Card: 20px per spec */ --sb-radius-xl: 28px; --sb-radius-pill: 999px; /* Shadows — warm, soft */ --sb-shadow-xs: 0 1px 3px rgba(17,19,24,0.05); --sb-shadow-sm: 0 4px 12px rgba(17,19,24,0.06); --sb-shadow: 0 8px 24px rgba(17,19,24,0.08); --sb-shadow-md: 0 16px 40px rgba(17,19,24,0.09); --sb-shadow-lg: 0 24px 60px rgba(17,19,24,0.11); /* Glows */ --sb-navy-glow: 0 8px 24px rgba(1, 20, 79, 0.28); /* legacy */ --sb-gold-glow: 0 8px 24px rgba(184, 135, 70, 0.28); /* Brass */ /* Focus — Brain Blue */ --sb-focus-ring: 0 0 0 3px rgba(59, 91, 255, 0.35); /* Motion */ --sb-ease: cubic-bezier(0.25, 1, 0.5, 1); --sb-ease-out: cubic-bezier(0, 0, 0.2, 1); --sb-duration: 180ms; --sb-duration-slow: 320ms; /* Z-index */ --sb-z-header: 100; --sb-z-drawer: 200; --sb-z-overlay: 190; --sb-z-modal: 300; --sb-z-toast: 400; /* Header heights */ --sb-header-h: 64px; --sb-header-h-lg: 72px; /* Legacy aliases */ --sb-brand: var(--sb-blue); --sb-brand-2: var(--sb-blue-dark); --sb-brand-hover: var(--sb-blue-dark); --sb-brand-glow: rgba(15, 107, 120, 0.25); --sb-dark: var(--sb-ink); --sb-bg-premium: var(--sb-bg); } /* ── Dark mode ── */ [data-theme="dark"] { --color-bg: #171614; --color-surface: #1C1B19; --color-surface-2: #242320; --color-text: #CDCCCA; --color-text-muted: #8C8A85; --color-text-faint: #5C5A56; --color-divider: rgba(255,255,255,0.08); --color-border: rgba(255,255,255,0.08); --color-border-subtle: rgba(255,255,255,0.05); --color-blue: #5B79FF; --color-blue-dark: #4A68EE; --color-gold: #C49A50; --color-gold-subtle: rgba(196,154,80,0.12); } /* ── Dark surface class (drawer, inline dark sections) ── */ .sb-dark-surface { --sb-text: #F6F1E8; --sb-muted: #9AA0AB; --sb-border: rgba(255,255,255,0.10); --sb-surface: #111318; }