/* ============================================================================
KL DESIGN SYSTEM — TOKENS
============================================================================
@version 1.3.0
@released 2026-05-25
@author Aron J. Kudelski-Lichtenberg
@license Proprietary
Wspólna baza dla portfolio KL:
- kudelski-lichtenberg.com (light theme · personal brand)
- nps2g.com (dark theme · energy resilience)
- quarocks.com (dark theme · material resilience)
- lithors.com (dark theme · operational resilience)
Każdy projekt ładuje:
Modyfikacja tego pliku wymaga wpisu w CHANGELOG.md i bump wersji.
============================================================================ */
/* ----------------------------------------------------------------------------
1. FONTY — Google Fonts import
----------------------------------------------------------------------------
Wszystkie fonty open-source (SIL OFL). Można je też pobrać i zainstalować
lokalnie na systemie operacyjnym dla Word / Outlook / Pages / Keynote.
---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Saira+Condensed:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ----------------------------------------------------------------------------
2. PRIMITIVE TOKENS — surowe wartości
----------------------------------------------------------------------------
Niezmienne podstawy. Nie używać bezpośrednio w komponentach —
tylko przez semantic tokens (sekcja 3) lub brand overrides (brands/*.css).
---------------------------------------------------------------------------- */
:root {
/* === NAVY SCALE — 15 stopni === */
--kl-navy-50: #F0F3FA;
--kl-navy-100: #D8E0EE;
--kl-navy-150: #C4D1E2;
--kl-navy-200: #B0C2D5;
--kl-navy-250: #A0B5CA;
--kl-navy-300: #8FA8C0; /* steel — naturalny neutral portfolio */
--kl-navy-400: #5C7090;
--kl-navy-500: #3B4D6E;
--kl-navy-600: #1F3050;
--kl-navy-700: #142340;
--kl-navy-800: #0D1A30;
--kl-navy-850: #0C162A;
--kl-navy-900: #0A1224;
--kl-navy-925: #080E1B;
--kl-navy-950: #050912;
/* === NEUTRALNE === */
--kl-white: #FFFFFF;
--kl-black: #000000;
/* === RODZINY FONTÓW === */
--kl-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--kl-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--kl-font-cond: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
--kl-font-grotesk: 'Space Grotesk', 'DM Sans', -apple-system, sans-serif;
/* === FALLBACK STACK DLA EMAIL (klienty pocztowe nie wspierają custom fonts) === */
--kl-font-email-serif: Georgia, 'Times New Roman', serif;
--kl-font-email-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
/* === WAGI === */
--kl-fw-regular: 400;
--kl-fw-medium: 500;
--kl-fw-semibold: 600;
--kl-fw-bold: 700;
/* === ROZMIARY TEKSTU (rem-based, base 16px) === */
--kl-text-xs: 0.6875rem; /* 11px */
--kl-text-sm: 0.8125rem; /* 13px */
--kl-text-base: 1rem; /* 16px */
--kl-text-md: 1.125rem; /* 18px */
--kl-text-lg: 1.375rem; /* 22px */
--kl-text-xl: 1.75rem; /* 28px */
--kl-text-2xl: 2.25rem; /* 36px */
--kl-text-3xl: 3rem; /* 48px */
--kl-text-4xl: 4rem; /* 64px */
/* === LINE HEIGHT === */
--kl-lh-tight: 1.2;
--kl-lh-snug: 1.4;
--kl-lh-normal: 1.55;
--kl-lh-relaxed: 1.75;
/* === LETTER SPACING === */
--kl-ls-tight: -0.01em;
--kl-ls-normal: 0;
--kl-ls-wide: 0.04em;
--kl-ls-wider: 0.08em;
--kl-ls-widest: 0.18em;
/* === SPACING — 4px base scale === */
--kl-space-0: 0;
--kl-space-1: 0.25rem; /* 4px */
--kl-space-2: 0.5rem; /* 8px */
--kl-space-3: 0.75rem; /* 12px */
--kl-space-4: 1rem; /* 16px */
--kl-space-5: 1.5rem; /* 24px */
--kl-space-6: 2rem; /* 32px */
--kl-space-7: 3rem; /* 48px */
--kl-space-8: 4rem; /* 64px */
--kl-space-9: 6rem; /* 96px */
--kl-space-10: 8rem; /* 128px */
/* === BORDER RADIUS === */
--kl-radius-none: 0;
--kl-radius-sm: 4px;
--kl-radius-md: 6px;
--kl-radius-lg: 10px;
--kl-radius-xl: 14px;
--kl-radius-full: 9999px;
/* === BORDER WIDTH === */
--kl-border-hairline: 0.5px;
--kl-border-thin: 1px;
--kl-border-thick: 2px;
/* === TRANSITIONS === */
--kl-transition-fast: 150ms ease;
--kl-transition-base: 250ms ease;
--kl-transition-slow: 400ms ease;
/* === Z-INDEX === */
--kl-z-base: 1;
--kl-z-dropdown: 100;
--kl-z-sticky: 200;
--kl-z-overlay: 300;
--kl-z-modal: 400;
--kl-z-popover: 500;
}
/* ----------------------------------------------------------------------------
3. SEMANTIC TOKENS — domyślne (light theme)
----------------------------------------------------------------------------
Nadpisywane przez brand overrides (brands/*.css).
Komponenty używają wyłącznie tych zmiennych — nigdy primitives bezpośrednio.
---------------------------------------------------------------------------- */
:root {
/* === POWIERZCHNIE === */
--kl-bg: var(--kl-navy-50);
--kl-bg-elevated: var(--kl-navy-100);
--kl-bg-hover: var(--kl-navy-150);
--kl-bg-muted: var(--kl-navy-200);
/* === BORDERY === */
--kl-border: var(--kl-navy-200);
--kl-border-strong: var(--kl-navy-300);
--kl-border-subtle: var(--kl-navy-150);
/* === TEKST === */
--kl-text: var(--kl-navy-850); /* primary */
--kl-text-muted: var(--kl-navy-700);
--kl-text-subtle: var(--kl-navy-600);
--kl-text-on-accent: var(--kl-white);
/* === AKCENTY (overrides per brand) === */
--kl-accent-primary: var(--kl-navy-700);
--kl-accent-secondary: var(--kl-navy-300);
/* === TYPOGRAFIA SEMANTYCZNA === */
--kl-font-display: var(--kl-font-serif);
--kl-font-body: var(--kl-font-sans);
}
/* ----------------------------------------------------------------------------
4. DARK THEME — wspólny dla wszystkich ventures
----------------------------------------------------------------------------
Aktywowane przez data-theme="dark" na lub przez import brand file
ventures (nps2g.css, quarocks.css, lithors.css).
---------------------------------------------------------------------------- */
[data-theme="dark"] {
/* === POWIERZCHNIE === */
--kl-bg: var(--kl-navy-900);
--kl-bg-elevated: var(--kl-navy-850);
--kl-bg-hover: var(--kl-navy-800);
--kl-bg-muted: var(--kl-navy-600);
/* === BORDERY === */
--kl-border: var(--kl-navy-700);
--kl-border-strong: var(--kl-navy-600);
--kl-border-subtle: var(--kl-navy-800);
/* === TEKST === */
--kl-text: var(--kl-navy-50); /* primary */
--kl-text-muted: var(--kl-navy-150); /* secondary */
--kl-text-subtle: var(--kl-navy-250);
--kl-text-on-accent: var(--kl-navy-900);
}
/* ----------------------------------------------------------------------------
5. REDUCED MOTION
----------------------------------------------------------------------------
Respekt dla preferencji systemowych użytkownika.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:root {
--kl-transition-fast: 0ms;
--kl-transition-base: 0ms;
--kl-transition-slow: 0ms;
}
}