/** * SocialPulse Design Tokens * Version 2.0 — March 2026 — Kubrick Warm Daylight Refresh * * WHAT CHANGED FROM v1.0: * - Replaced near-black (#0a0a0f) base with warm off-white (#f7f5f0) for light sections * - Replaced near-black surfaces with deep navy (#0d1b2a) for dark sections (hero/nav/footer) * - Dual text color sets: --color-text-* for light bg, --color-text-*-on-dark for dark bg * - Shadows rebuilt for light bg (softer navy shadows, not heavy black) * - Amber dark shade updated to #c97d08 (better contrast on warm white) * - All spacing, typography, animation, layout tokens UNCHANGED * * Import this file first in your stylesheet. */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ============================================================ * COLORS — Core Palette * ============================================================ */ /* ---- LIGHT SECTION BACKGROUNDS (default / content areas) ---- */ --color-bg: #f7f5f0; /* warm off-white — primary page background */ --color-bg-alt: #f0ede6; /* warm tint — alternate section background */ --color-surface: #ffffff; /* card / component background */ --color-surface-raised: #faf9f6; /* slightly elevated card on warm bg */ /* ---- DARK SECTION BACKGROUNDS (nav, hero, footer, dark cards) ---- */ --color-navy: #0d1b2a; /* deep navy — replaces midnight */ --color-navy-surface-1: #132233; /* dark card background */ --color-navy-surface-2: #1a2d40; /* dark elevated surface */ --color-navy-surface-3: #213349; /* dark section variant */ /* ---- LEGACY ALIASES (keep for backward compat in style.css) ---- */ /* These now map to navy values — update style.css references accordingly */ --color-midnight: #0d1b2a; /* WAS #0a0a0f — now deep navy */ --color-surface-1: #132233; /* WAS #111118 */ --color-surface-2: #1a2d40; /* WAS #1a1a24 */ --color-surface-3: #213349; /* WAS #222232 */ /* ---- BORDERS ---- */ --color-border: #e4dfd6; /* light section borders */ --color-border-dark: #243548; /* dark section borders */ --color-border-subtle: rgba(13, 27, 42, 0.07); /* ultra-subtle on light bg */ --color-border-amber: rgba(245, 166, 35, 0.3); /* unchanged */ /* ---- PRIMARY ACCENT: Amber Gold ---- */ --color-amber: #f5a623; /* unchanged — hero accent, CTAs */ --color-amber-light: #f7c060; /* unchanged — gradient, hover */ --color-amber-dark: #c97d08; /* WAS #d4870a — richer, better contrast on warm white */ --color-amber-muted: rgba(245, 166, 35, 0.12); --color-amber-subtle: rgba(245, 166, 35, 0.06); /* ---- TEXT — Light backgrounds (default) ---- */ --color-text-primary: #0d1b2a; /* navy — headings on light bg */ --color-text-secondary: #6b7280; /* warm gray — body, captions */ --color-text-muted: #9ca3af; /* muted on light bg */ --color-text-body: #374151; /* rich dark gray — default body copy */ --color-text-amber: #c97d08; /* amber text on light bg */ /* ---- TEXT — Dark backgrounds (navy sections) ---- */ --color-text-on-dark: #ffffff; /* headings on navy */ --color-text-secondary-on-dark: #93a3b4; /* body copy on navy */ --color-text-muted-on-dark: #4a5f72; /* muted on navy */ --color-text-body-on-dark: rgba(255, 255, 255, 0.82); /* main body on dark */ --color-text-amber-on-dark: #f5a623; /* amber on navy — unchanged */ /* ---- SEMANTIC COLORS ---- */ --color-success: #22c55e; --color-success-muted: rgba(34, 197, 94, 0.12); --color-warning: #f59e0b; --color-warning-muted: rgba(245, 158, 11, 0.12); --color-error: #ef4444; --color-error-muted: rgba(239, 68, 68, 0.12); --color-info: #3b82f6; --color-info-muted: rgba(59, 130, 246, 0.12); /* ---- PLATFORM BRAND COLORS ---- */ --color-instagram: #E1306C; --color-tiktok: #010101; --color-youtube: #FF0000; --color-twitter: #1DA1F2; --color-linkedin: #0A66C2; --color-spotify: #1DB954; /* ============================================================ * SHADOWS / GLOWS * ============================================================ */ /* Amber signature glow — use on featured/CTA elements (unchanged) */ --shadow-amber-sm: 0 0 0 1px rgba(245, 166, 35, 0.25), 0 0 12px rgba(245, 166, 35, 0.15); --shadow-amber-md: 0 0 0 1px rgba(245, 166, 35, 0.3), 0 0 24px rgba(245, 166, 35, 0.2), 0 0 48px rgba(245, 166, 35, 0.08); --shadow-amber-lg: 0 0 0 1px rgba(245, 166, 35, 0.4), 0 0 40px rgba(245, 166, 35, 0.25), 0 0 80px rgba(245, 166, 35, 0.12); /* Neutral elevation — rebuilt for LIGHT backgrounds (softer, navy-tinted) */ --shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.08), 0 1px 2px rgba(13, 27, 42, 0.05); --shadow-md: 0 4px 12px rgba(13, 27, 42, 0.10), 0 2px 4px rgba(13, 27, 42, 0.06); --shadow-lg: 0 12px 32px rgba(13, 27, 42, 0.12), 0 4px 8px rgba(13, 27, 42, 0.07); --shadow-xl: 0 24px 64px rgba(13, 27, 42, 0.16); /* Card hover: subtle lift + amber edge */ --shadow-card-hover: 0 8px 32px rgba(13, 27, 42, 0.12), 0 0 0 1px rgba(245, 166, 35, 0.3); /* Dark section card shadows (for navy bg cards) */ --shadow-dark-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-dark-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-dark-card-hover: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(245, 166, 35, 0.25); /* ============================================================ * TYPOGRAPHY * ============================================================ */ /* Font Families — UNCHANGED */ --font-display: 'Syne', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* Font Sizes — UNCHANGED */ --text-hero: clamp(48px, 7vw, 80px); --text-h1: clamp(36px, 5vw, 56px); --text-h2: clamp(28px, 4vw, 40px); --text-h3: clamp(22px, 3vw, 28px); --text-h4: 20px; --text-lg: 18px; --text-base: 16px; --text-sm: 14px; --text-xs: 12px; --text-2xs: 11px; /* Font Weights — UNCHANGED */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line Heights — UNCHANGED */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-loose: 1.8; /* Letter Spacing — UNCHANGED */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.15em; /* ============================================================ * SPACING SCALE (base: 4px) — UNCHANGED * ============================================================ */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-32: 128px; --space-40: 160px; --space-48: 192px; --space-64: 256px; /* ============================================================ * BORDER RADIUS — UNCHANGED * ============================================================ */ --radius-none: 0; --radius-sm: 4px; --radius-base: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; /* ============================================================ * BORDERS — UNCHANGED * ============================================================ */ --border-width: 1px; --border-width-2: 1.5px; --border-width-3: 2px; /* ============================================================ * ANIMATION / TIMING — UNCHANGED * ============================================================ */ /* Durations */ --duration-instant: 50ms; --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 200ms; --duration-slower: 300ms; --duration-slowest: 400ms; --duration-xslow: 600ms; /* Easings */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-linear: linear; /* Transition shorthands */ --transition-colors: color var(--duration-base) var(--ease-default), background-color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); --transition-shadow: box-shadow var(--duration-slow) var(--ease-default); --transition-transform: transform var(--duration-slow) var(--ease-out); --transition-all: all var(--duration-slow) var(--ease-default); /* ============================================================ * BREAKPOINTS — UNCHANGED * ============================================================ */ --bp-xs: 480px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ============================================================ * LAYOUT — UNCHANGED * ============================================================ */ --container-max: 1200px; --container-narrow: 800px; --container-wide: 1440px; --container-pad-x: clamp(16px, 4vw, 40px); --nav-height: 72px; /* ============================================================ * Z-INDEX — UNCHANGED * ============================================================ */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ============================================================ * MEDIA QUERY HELPERS * ============================================================ */ /* @media (max-width: 1280px) { ... } → xl */ /* @media (max-width: 1024px) { ... } → lg */ /* @media (max-width: 768px) { ... } → md */ /* @media (max-width: 640px) { ... } → sm */ /* @media (max-width: 480px) { ... } → xs */ /* ============================================================ * BASE RESET / ROOT STYLES * ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--color-text-body); background-color: var(--color-bg); } /* Default headings: navy on light background */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); } /* Dark sections: override heading color to white */ .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6, nav h1, nav h2, nav h3, footer h1, footer h2, footer h3 { color: var(--color-text-on-dark); } /* Utility classes */ .text-amber { color: var(--color-amber); } .text-amber-dark { color: var(--color-amber-dark); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } /* On dark bg overrides */ .section-dark .text-secondary { color: var(--color-text-secondary-on-dark); } .section-dark .text-muted { color: var(--color-text-muted-on-dark); } /* Amber glow utilities */ .glow-amber-sm { box-shadow: var(--shadow-amber-sm); } .glow-amber-md { box-shadow: var(--shadow-amber-md); } .glow-amber-lg { box-shadow: var(--shadow-amber-lg); }