/* ============================================================================= EHCKK Design System — Tokens Framework-agnostic CSS variables. Drop into any project (Blazor, React, etc.) Light theme is default. Toggle dark via [data-theme="dark"] on . ============================================================================= */ :root { /* ── Brand palette ──────────────────────────────────────────────────────── */ --ehckk-blue: #0F2557; --ehckk-blue-deep: #081633; --ehckk-blue-soft: #1B3D8F; --ehckk-red: #D1001C; --ehckk-red-glow: #FF2535; --ehckk-red-deep: #8A0011; --ehckk-ice: #F4F7FB; --ehckk-ice-tint: #E8EEF7; --ehckk-ice-edge: #D6E0F0; --ehckk-puck: #0A0A0A; --ehckk-steel: #5A6B85; --ehckk-steel-soft: #8B98AE; --ehckk-white: #FFFFFF; /* ── Semantic aliases (LIGHT) ───────────────────────────────────────────── */ --color-bg: var(--ehckk-ice); --color-bg-elevated: var(--ehckk-white); --color-fg: var(--ehckk-puck); --color-fg-muted: var(--ehckk-steel); --color-fg-on-primary: var(--ehckk-white); --color-fg-on-accent: var(--ehckk-white); --color-primary: var(--ehckk-blue); --color-primary-hover: var(--ehckk-blue-deep); --color-primary-soft: var(--ehckk-ice-tint); --color-accent: var(--ehckk-red); --color-accent-hover: var(--ehckk-red-glow); --color-accent-deep: var(--ehckk-red-deep); --color-card: var(--ehckk-white); --color-card-fg: var(--ehckk-puck); --color-muted: var(--ehckk-ice-tint); --color-muted-fg: var(--ehckk-steel); --color-border: var(--ehckk-ice-edge); --color-border-strong: var(--ehckk-puck); --color-input: var(--ehckk-white); --color-input-border: var(--ehckk-ice-edge); --color-ring: var(--ehckk-red); --color-success: #0F8A4A; --color-warning: #C97A00; --color-danger: var(--ehckk-red); --color-info: var(--ehckk-blue-soft); /* ── Gradients ──────────────────────────────────────────────────────────── */ --gradient-stadium: linear-gradient(135deg, var(--ehckk-blue) 0%, var(--ehckk-blue-deep) 50%, var(--ehckk-puck) 100%); --gradient-ice: linear-gradient(180deg, var(--ehckk-white) 0%, var(--ehckk-ice-tint) 100%); --gradient-spotlight: radial-gradient(circle at 30% 20%, rgba(255, 37, 53, 0.18) 0%, transparent 60%); --gradient-puck: linear-gradient(180deg, var(--ehckk-puck) 0%, #1A1A1A 100%); --gradient-accent: linear-gradient(135deg, var(--ehckk-red) 0%, var(--ehckk-red-glow) 100%); /* ── Shadows ────────────────────────────────────────────────────────────── */ /* Brutalist hard offset shadow — the signature look */ --shadow-puck: 4px 4px 0 0 var(--ehckk-puck); --shadow-puck-lg: 8px 8px 0 0 var(--ehckk-puck); --shadow-puck-blue: 4px 4px 0 0 var(--ehckk-blue); --shadow-puck-red: 4px 4px 0 0 var(--ehckk-red); --shadow-glow-red: 0 0 0 3px rgba(209, 0, 28, 0.25), 0 8px 24px -8px rgba(209, 0, 28, 0.55); --shadow-glow-blue: 0 0 0 3px rgba(15, 37, 87, 0.20), 0 8px 24px -8px rgba(15, 37, 87, 0.50); --shadow-elevated: 0 1px 2px rgba(10,10,10,0.06), 0 8px 24px -12px rgba(10,10,10,0.18); --shadow-card: 0 1px 3px rgba(10,10,10,0.08), 0 1px 2px rgba(10,10,10,0.04); --shadow-focus-ring: 0 0 0 3px rgba(209, 0, 28, 0.35); /* ── Radii (kantig, sportlich) ─────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px; --radius-pill: 9999px; /* ── Spacing (8px grid + halves) ────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── Typography ─────────────────────────────────────────────────────────── */ --font-display: "Bebas Neue", "Impact", "Oswald", system-ui, sans-serif; --font-body: "Barlow", "Inter", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace; /* Type scale (clamp for fluidity) */ --text-display: clamp(3.5rem, 8vw, 7.5rem); /* hero numbers / shouts */ --text-h1: clamp(2.5rem, 5vw, 4rem); --text-h2: clamp(2rem, 3.6vw, 3rem); --text-h3: clamp(1.5rem, 2.4vw, 2rem); --text-h4: clamp(1.125rem, 1.6vw, 1.375rem); --text-body-lg: 1.125rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-caption: 0.8125rem; --text-overline: 0.75rem; --leading-display: 0.92; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; --tracking-widest: 0.2em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ── Motion ─────────────────────────────────────────────────────────────── */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 400ms; --dur-slower: 640ms; --ease-slap: cubic-bezier(0.2, 0.9, 0.2, 1.2); /* punchy overshoot */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-linear: linear; /* ── Layout ─────────────────────────────────────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; /* ── Z-index scale ──────────────────────────────────────────────────────── */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; } /* ============================================================================= DARK THEME — Stadion at night ============================================================================= */ [data-theme="dark"] { --color-bg: var(--ehckk-puck); --color-bg-elevated: #161B26; --color-fg: var(--ehckk-ice); --color-fg-muted: var(--ehckk-steel-soft); --color-fg-on-primary: var(--ehckk-white); --color-fg-on-accent: var(--ehckk-white); --color-primary: #4A78D6; /* lifted blue for dark contrast */ --color-primary-hover: #6B92E0; --color-primary-soft: #1A2A4A; --color-accent: var(--ehckk-red-glow); --color-accent-hover: #FF5263; --color-accent-deep: var(--ehckk-red); --color-card: #161B26; --color-card-fg: var(--ehckk-ice); --color-muted: #1F2533; --color-muted-fg: var(--ehckk-steel-soft); --color-border: #2A3142; --color-border-strong: var(--ehckk-ice); --color-input: #161B26; --color-input-border: #2A3142; --color-ring: var(--ehckk-red-glow); --shadow-puck: 4px 4px 0 0 var(--ehckk-red); --shadow-puck-lg: 8px 8px 0 0 var(--ehckk-red); --shadow-puck-blue: 4px 4px 0 0 #4A78D6; --shadow-puck-red: 4px 4px 0 0 var(--ehckk-red-glow); --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --shadow-elevated: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -12px rgba(255, 37, 53, 0.25); --gradient-ice: linear-gradient(180deg, #161B26 0%, var(--ehckk-puck) 100%); --gradient-spotlight: radial-gradient(circle at 30% 20%, rgba(255, 37, 53, 0.30) 0%, transparent 60%); }