/* ============================================================ * Family Kingdom — Design Tokens * * All visual variables live here. Override these to change the look * of every page, button, card, and team color across the site. * ============================================================ */ :root { /* --- Brand / theme palette --- */ --color-bg: #0f172a; --color-bg-soft: #131c33; --color-surface: #1b2540; --color-surface-2: #243057; --color-border: #2c3a66; --color-overlay: rgba(7, 12, 24, 0.65); --color-text: #f4f7fb; --color-text-muted: #aab4cc; --color-text-faint: #6a7591; --color-text-inverse: #0c1426; --color-primary: #f6c453; /* amber gold */ --color-primary-soft: #f6c45333; --color-secondary: #58c7ff; /* sky */ --color-accent: #ff7ab6; /* hot pink */ --color-success: #5ce28b; --color-warning: #ffb84a; --color-danger: #ff6868; --color-info: #58c7ff; /* --- Team colors (referenced by .fk-team-kids / .fk-team-parents and theme.js) --- */ --color-team-parents: #f6c453; --color-team-kids: #58c7ff; --color-team-guest: #c084fc; /* --- Radii --- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; /* --- Spacing --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* --- Typography --- */ --font-heading: 'Press Start 2P', 'Trebuchet MS', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Menlo', monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px; --lh-tight: 1.15; --lh-normal: 1.45; --lh-loose: 1.6; /* --- Shadows --- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --shadow-md: 0 6px 18px rgba(0,0,0,0.30); --shadow-lg: 0 18px 40px rgba(0,0,0,0.40); --shadow-glow: 0 0 0 2px var(--color-primary), 0 0 24px var(--color-primary-soft); /* --- Motion --- */ --motion-fast: 120ms; --motion-medium: 220ms; --motion-slow: 360ms; --motion-easing: cubic-bezier(.2,.8,.2,1); /* --- Layout --- */ --container-narrow: 640px; --container: 960px; --container-wide: 1200px; --header-height: 64px; /* --- Z-index --- */ --z-header: 10; --z-modal: 100; --z-toast: 200; } /* Example alternate theme (medieval). Activate by setting data-theme="medieval" on . */ [data-theme="medieval"] { --color-bg: #2a1f17; --color-surface: #3a2b1d; --color-primary: #c9a96e; --color-secondary: #8c6e3c; --color-team-parents: #c9a96e; --color-team-kids: #6ec9a9; } /* Example: 90s video game */ [data-theme="nineties"] { --color-bg: #1c0c2c; --color-surface: #2a1640; --color-primary: #39ff14; --color-secondary: #ff00ff; --color-team-parents: #ff00ff; --color-team-kids: #39ff14; --font-heading: 'VT323', 'Courier New', monospace; }