/* ========================================================================== FreeCodeSpot design tokens Every colour, radius, shadow and type size the theme uses is defined here. Light is the default; dark is applied by [data-theme="dark"] on , set by assets/js/theme.js (and by prefers-color-scheme when no choice has been saved). ========================================================================== */ :root { /* Brand */ --fcs-accent: #2563eb; --fcs-accent-strong: #1d4ed8; --fcs-accent-soft: #dbeafe; --fcs-accent-text: #1e40af; --fcs-on-accent: #ffffff; /* Surfaces */ --fcs-bg: #f5f7fb; --fcs-surface: #ffffff; --fcs-surface-2: #f1f5f9; --fcs-surface-3: #e2e8f0; --fcs-border: #e2e8f0; --fcs-border-strong: #cbd5e1; /* Text */ --fcs-text: #0f172a; --fcs-text-2: #475569; --fcs-text-3: #64748b; --fcs-text-inverse: #f8fafc; /* Feedback */ --fcs-success: #16a34a; --fcs-success-soft: #dcfce7; --fcs-warning: #d97706; --fcs-warning-soft: #fef3c7; --fcs-info-soft: #eff6ff; /* Hero / footer (always dark) */ --fcs-dark-bg: #0b1220; --fcs-dark-bg-2: #111a2e; --fcs-dark-border: #1f2a44; /* Shape */ --fcs-radius-sm: 6px; --fcs-radius: 10px; --fcs-radius-lg: 16px; --fcs-radius-pill: 999px; /* Elevation */ --fcs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --fcs-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 20px -8px rgba(15, 23, 42, 0.12); --fcs-shadow-lg: 0 10px 40px -12px rgba(15, 23, 42, 0.25); /* Type */ --fcs-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fcs-font-mono: "JetBrains Mono", "Cascadia Code", Consolas, Menlo, ui-monospace, monospace; --fcs-text-xs: 0.75rem; --fcs-text-sm: 0.875rem; --fcs-text-base: 1rem; --fcs-text-md: 1.0625rem; --fcs-text-lg: 1.125rem; --fcs-text-xl: 1.375rem; --fcs-text-2xl: 1.75rem; --fcs-text-3xl: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); --fcs-text-4xl: clamp(2.1rem, 1.5rem + 2.6vw, 3rem); --fcs-leading: 1.7; /* Spacing */ --fcs-space-1: 0.25rem; --fcs-space-2: 0.5rem; --fcs-space-3: 0.75rem; --fcs-space-4: 1rem; --fcs-space-5: 1.5rem; --fcs-space-6: 2rem; --fcs-space-7: 3rem; --fcs-space-8: 4rem; /* Layout */ --fcs-container: 1200px; --fcs-gutter: 1rem; --fcs-sidebar: 300px; --fcs-header-h: 64px; /* Motion */ --fcs-ease: cubic-bezier(0.2, 0, 0, 1); --fcs-dur: 160ms; color-scheme: light; } /* Dark theme: applied explicitly */ :root[data-theme="dark"] { --fcs-accent: #60a5fa; --fcs-accent-strong: #93c5fd; --fcs-accent-soft: #1e3a8a; --fcs-accent-text: #bfdbfe; --fcs-on-accent: #0b1220; --fcs-bg: #0b1220; --fcs-surface: #111a2e; --fcs-surface-2: #172238; --fcs-surface-3: #1f2a44; --fcs-border: #1f2a44; --fcs-border-strong: #2b3a5c; --fcs-text: #e5e9f2; --fcs-text-2: #aab4c8; --fcs-text-3: #8391ab; --fcs-text-inverse: #0f172a; --fcs-success: #4ade80; --fcs-success-soft: #14532d; --fcs-warning: #fbbf24; --fcs-warning-soft: #451a03; --fcs-info-soft: #172238; --fcs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --fcs-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 20px -8px rgba(0, 0, 0, 0.6); --fcs-shadow-lg: 0 10px 40px -12px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* Map GeneratePress global colour variables onto ours so any GP-styled element (buttons, nav, widgets) follows the theme automatically. */ :root { --contrast: var(--fcs-text); --contrast-2: var(--fcs-text-2); --contrast-3: var(--fcs-text-3); --base: var(--fcs-surface-3); --base-2: var(--fcs-bg); --base-3: var(--fcs-surface); --accent: var(--fcs-accent); } @media (prefers-reduced-motion: reduce) { :root { --fcs-dur: 0ms; } }