/* ============================================================ VoxPost — Design System Single source of truth for colors, typography, and spacing. Loaded FIRST in every page . ============================================================ */ /* ── DESIGN TOKENS ── */ :root { /* ── COLORS ── */ /* Primary (brand) */ --color-primary: #0A66AF; --color-primary-dark: #00418F; --color-primary-light: #70B5FF; --color-primary-soft: #E8F1FA; --color-primary-hover: #00418F; /* Neutrals */ --color-bg: #FFFFFF; --color-bg-feed: #F3F2EF; --color-bg-subtle: #F8F9FA; --color-text-primary: #19191F; --color-text-secondary: #66666F; --color-text-muted: #9CA3AF; --color-border: #E2E2E8; --color-border-light: #F0F0F4; --color-surface: #FFFFFF; --color-surface-hover: #F5F7FA; /* State colors */ --color-success: #05764F; --color-success-bg: #ECFDF5; --color-error: #CC101F; --color-error-bg: #FEF2F2; --color-warning: #D97706; --color-warning-bg: #FFFBEB; /* Platform colors */ --color-linkedin: #0A66C2; --color-twitter: #1d9bf0; --color-instagram: #E1306C; /* Legacy aliases — backward compatibility with existing CSS */ --ink: var(--color-text-primary); --paper: var(--color-bg-feed); --coral: var(--color-primary); --coral-hover: var(--color-primary-dark); --coral-soft: var(--color-primary-soft); --navy: var(--color-text-primary); --slate: var(--color-text-secondary); --wave: var(--color-border); --success: #4ade80; --error: var(--color-error); --warning: var(--color-warning); --linkedin: var(--color-linkedin); --twitter: var(--color-twitter); /* ── TYPOGRAPHY ── */ /* Font families */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Space Grotesk', 'Inter', sans-serif; --font-accent: 'Space Grotesk', 'Inter', sans-serif; /* Type scale */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; /* Font weights */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-loose: 1.7; /* Letter spacing */ --tracking-tight: -0.5px; --tracking-normal: 0; --tracking-wide: 0.2px; /* ── SPACING (8px grid) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── BORDERS & RADII ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* ── SHADOWS ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15); /* ── TRANSITIONS ── */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* ── MAX WIDTH ── */ --max-width-text: 65ch; --max-width-content: 1280px; } /* ── DARK MODE ── */ [data-theme="dark"] { --color-bg: #0F1117; --color-bg-feed: #181A22; --color-bg-subtle: #1C1E28; --color-text-primary: #E8E8F0; --color-text-secondary: #9090A8; --color-text-muted: #606078; --color-border: #2A2A3A; --color-border-light: #222233; --color-surface: #1A1C28; --color-surface-hover: #222338; --color-primary-soft: #122640; --ink: var(--color-text-primary); --paper: var(--color-bg-feed); --navy: var(--color-text-primary); --slate: var(--color-text-secondary); --wave: var(--color-border); }