/* Adi Finances – design tokens (kierunek A · Grafit) Jedyne źródło kolorów, fontów, rozmiarów, odstępów, promieni i cieni. Tryb ciemny: automatycznie wg systemu, albo wymuszony atrybutem data-theme="dark" / "light" na lub na dowolnym kontenerze (tak robi strona /brand). Kontrast wszystkich par tekst/tło sprawdza: node scripts/check-contrast.mjs */ :root { /* Szarości */ --gray-50: #f5f5f7; --gray-100: #e8e8ed; --gray-200: #d2d2d7; --gray-300: #aeaeb2; --gray-400: #8e8e93; --gray-500: #6e6e73; --gray-600: #545458; --gray-700: #3a3a3c; --gray-800: #2c2c2e; --gray-900: #1d1d1f; --gray-950: #0b0b0c; /* Kolory marki */ --brand-primary: #1d1d1f; --brand-accent: #0066cc; /* Typografia */ --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --tracking-display: -0.025em; --tracking-caps: 0.08em; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 56px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.1; --leading-normal: 1.5; /* Odstępy – siatka 4 px */ --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; /* Promienie */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 22px; --radius-full: 999px; /* Układ */ --container: 1200px; /* Tekst na zdjęciach (niezależny od trybu – zdjęcie zawsze jest pod ciemną nakładką) */ --color-on-image: #ffffff; --color-on-image-muted: rgba(255, 255, 255, 0.86); --overlay-hero: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.12) 68%, rgba(0, 0, 0, 0) 100%); --overlay-hero-mobile: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.72) 100%); /* Kolory semantyczne – tryb jasny */ --color-bg: #f5f5f7; --color-surface: #ffffff; --color-surface-2: #e8e8ed; --color-text: #1d1d1f; --color-text-muted: #636366; --color-border: #d2d2d7; --color-primary: #1d1d1f; --color-primary-hover: #3a3a3c; --color-on-primary: #ffffff; --color-accent: #0066cc; --color-on-accent: #ffffff; --color-focus-ring: rgba(0, 102, 204, 0.28); --color-success: #1a6e34; --color-warning: #8a5a00; --color-error: #b8281f; --color-media: #000000; --color-header: rgba(255, 255, 255, 0.72); /* Cienie */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.05); color-scheme: light; } /* Tryb ciemny – te same wartości w trzech miejscach: system, wymuszony na , wymuszony na kontenerze */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #000000; --color-surface: #1c1c1e; --color-surface-2: #2c2c2e; --color-text: #f5f5f7; --color-text-muted: #a1a1a6; --color-border: #3a3a3c; --color-primary: #f5f5f7; --color-primary-hover: #d2d2d7; --color-on-primary: #1d1d1f; --color-accent: #2997ff; --color-on-accent: #000000; --color-focus-ring: rgba(41, 151, 255, 0.35); --color-success: #30d158; --color-warning: #ffd60a; --color-error: #ff6961; --color-media: #000000; --color-header: rgba(22, 22, 23, 0.72); --shadow-sm: 0 0 0 1px #3a3a3c; --shadow-md: 0 0 0 1px #3a3a3c; --shadow-lg: 0 0 0 1px #3a3a3c; color-scheme: dark; } } [data-theme="dark"] { --color-bg: #000000; --color-surface: #1c1c1e; --color-surface-2: #2c2c2e; --color-text: #f5f5f7; --color-text-muted: #a1a1a6; --color-border: #3a3a3c; --color-primary: #f5f5f7; --color-primary-hover: #d2d2d7; --color-on-primary: #1d1d1f; --color-accent: #2997ff; --color-on-accent: #000000; --color-focus-ring: rgba(41, 151, 255, 0.35); --color-success: #30d158; --color-warning: #ffd60a; --color-error: #ff6961; --color-media: #000000; --color-header: rgba(22, 22, 23, 0.72); --shadow-sm: 0 0 0 1px #3a3a3c; --shadow-md: 0 0 0 1px #3a3a3c; --shadow-lg: 0 0 0 1px #3a3a3c; color-scheme: dark; } [data-theme="light"] { --color-bg: #f5f5f7; --color-surface: #ffffff; --color-surface-2: #e8e8ed; --color-text: #1d1d1f; --color-text-muted: #636366; --color-border: #d2d2d7; --color-primary: #1d1d1f; --color-primary-hover: #3a3a3c; --color-on-primary: #ffffff; --color-accent: #0066cc; --color-on-accent: #ffffff; --color-focus-ring: rgba(0, 102, 204, 0.28); --color-success: #1a6e34; --color-warning: #8a5a00; --color-error: #b8281f; --color-media: #000000; --color-header: rgba(255, 255, 255, 0.72); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.05); color-scheme: light; }