/* ================================================================ CSS Variables — Single Source of Truth ---------------------------------------------------------------- Four independent, composable settings live on : [data-theme="light|dark"] → colour palette [data-contrast="normal|high"] → accessibility-boosted colour overrides [data-mode="normal|freak"] → expressive rainbow layer on top [data-font-size="small|medium|large"] → root font-size (rem cascade) Strict hierarchy: 1. Base palette (light defaults) 2. Theme overrides (dark) 3. Contrast overrides (high) → touches ONLY colours 4. Mode overrides (freak) → touches ONLY accents/shadows 5. Font-size overrides → touches ONLY root size ================================================================ */ /* ================================================================ 1. BASE — Light palette, Medium type, Normal contrast ================================================================ */ :root { /* ---- Colours ---- */ --color-bg: #ffffff; --color-text: #121212; --color-text-secondary: #777777; --color-text-tertiary: #99999e; --color-accent: #753ba9; --color-accent-dark: #5f2f88; --color-accent-light: #f0e5fa; --color-border: #e0e0e0; --color-input-bg: #f5f5f5; --color-input-border: #d0d0d0; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); --color-dark-bg: #241c2e; --color-dark-secondary: #332b40; /* ---- Spacing (8 px baseline) ---- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* ---- Typography family ---- */ --font-sans: "Krub", sans-serif; --font-serif: "Roboto Slab", serif; --font-display: "Krub", sans-serif; /* ---- Font sizes (pure rem — scale with html font-size) ---- */ --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --font-size-3xl: 2.5rem; --font-size-4xl: 3rem; --font-size-5xl: 3.5rem; --font-size-6xl: 4.5rem; /* ---- Font weights ---- */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ---- Line heights ---- */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.8; /* ---- Transitions ---- */ --transition-fast: 150ms ease-out; --transition-normal: 300ms ease-out; --transition-slow: 500ms ease-out; /* ---- Border radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* ---- Z-index ---- */ --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 300; --z-modal: 310; --z-toast: 400; } /* ================================================================ 2. THEME — [data-theme="dark"] (colour-only overrides) ================================================================ */ [data-theme="dark"] { --color-bg: #222222; --color-text: #f0f0f0; --color-text-secondary: #bbbbbb; --color-text-tertiary: #757575; --color-border: #3a3a3a; --color-input-bg: #2c2c2c; --color-input-border: #484848; --color-accent: #d4d4d4; --color-accent-dark: #f0f0f0; --color-accent-light: #2c2c2c; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } /* ================================================================ 3. CONTRAST — [data-contrast="high"] (colour-only) ---------------------------------------------------------------- Pushes foreground darker/lighter and borders bolder. Applied after the theme so it stacks correctly in the cascade. ================================================================ */ [data-contrast="high"] { --color-text: #000000; --color-text-secondary: #2a2a2a; --color-text-tertiary: #3a3a3a; --color-border: #000000; --color-input-border: #000000; --color-accent: #3b0078; --color-accent-dark: #1a0040; } [data-theme="dark"][data-contrast="high"] { --color-bg: #000000; --color-text: #ffffff; --color-text-secondary: #f0f0f0; --color-text-tertiary: #d0d0d0; --color-border: #ffffff; --color-input-border: #ffffff; --color-input-bg: #111111; --color-accent: #ffffff; --color-accent-dark: #ffffff; --color-accent-light: #1a1a1a; } /* ================================================================ 4. MODE — [data-mode="freak"] (full neon colour layer) ---------------------------------------------------------------- Backgrounds stay as the user's chosen theme. Three neon colours are defined as --freak-a/b/c and applied explicitly to all major elements in style.css: LIGHT --freak-a #ff0080 hot magenta | headings, logo, CTAs --freak-b #7400e8 electric violet | sub-headings, kickers --freak-c #0060ff electric blue | numbers, tags, icons DARK --freak-a #00ffe0 neon cyan | headings, logo, CTAs --freak-b #ff40ff neon violet | sub-headings, kickers --freak-c #ffe600 electric yellow | numbers, tags, icons ================================================================ */ /* Light + freak */ [data-mode="freak"] { --freak-a: #ff0080; --freak-b: #7400e8; --freak-c: #0060ff; --color-accent: #ff0080; --color-accent-dark: #cc0066; --color-accent-light: #ffe6f2; --shadow-sm: 0 1px 3px rgba(255, 0, 128, 0.25); --shadow-md: 0 4px 16px rgba(255, 0, 128, 0.30); --shadow-lg: 0 12px 36px rgba(255, 0, 128, 0.35); } /* Dark + freak */ [data-theme="dark"][data-mode="freak"] { --freak-a: #00ffe0; --freak-b: #ff40ff; --freak-c: #ffe600; --color-accent: #00ffe0; --color-accent-dark: #00ccb3; --color-accent-light: #0a2622; --shadow-sm: 0 1px 3px rgba(0, 255, 224, 0.30); --shadow-md: 0 4px 16px rgba(0, 255, 224, 0.35); --shadow-lg: 0 12px 36px rgba(0, 255, 224, 0.40); } /* ================================================================ 5. FONT SIZE — [data-font-size="…"] (size-only) ---------------------------------------------------------------- Changing the root font-size cascades through every rem-based token (type, spacing, radii, icons). Layout logic — flex, grid, line-height multipliers — stays identical. ================================================================ */ html[data-font-size="small"] { font-size: 14px; } html[data-font-size="medium"] { font-size: 16px; } html[data-font-size="large"] { font-size: 18px; }