/* ========================================================================== tokens.css — Siberforge design tokens (single source of truth). Loaded by every page before any other stylesheet. Section-specific CSS may add new tokens but must NOT redefine these. Theming: dark by default, light theme via :root[data-theme="light"]. theme-toggle.js writes data-theme to and persists in localStorage. ========================================================================== */ :root { /* Colors — dark theme defaults */ --bg: #0b0d10; --panel: #13171c; --panel-2: #1a2028; --line: #232b35; --text: #e5e9ee; --muted: #8a94a3; --accent: #f7a700; --green: #3ecf8e; --red: #ef4f5a; --blue: #5a9cff; /* Brand colors (used in inline SVG marks) */ --brand-red: #E63946; --brand-ice: #3EB8E0; --brand-amber: #E09A3E; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; /* Spacing scale — 4px grid */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* Radii */ --r-sm: 3px; --r-md: 4px; --r-lg: 6px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.42); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: .12s; --t-med: .15s; --t-slow: .22s; /* Z-layers */ --z-header: 100; --z-nav: 95; --z-modal: 500; } /* Light theme — same names, swapped values. */ :root[data-theme="light"] { --bg: #f7f9fb; --panel: #ffffff; --panel-2: #f0f3f7; --line: #d8dee5; --text: #1a2028; --muted: #5a6470; --accent: #b56700; --green: #1f8a55; --red: #c4283c; --blue: #1f5fc4; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10); }