/* ========================================================================== GranitLab – design tokens Paleta: system kolorów Granit (primary #4680ff, tło ciemne #131920). Motyw ciemny jest domyślny; jasny włącza atrybut data-theme="light" na . ========================================================================== */ :root { color-scheme: dark; /* Marka – identyczna w obu motywach (skala primary) */ --brand: #4680ff; --brand-300: #90b3ff; --brand-200: #b5ccff; --brand-100: #dae6ff; --brand-700: #3a6ee0; --brand-800: #2d5bc7; --brand-deep: #176cd6; --teal: #20c997; --teal-2: #3ec9d6; /* Powierzchnie i tekst – ciemny */ --bg: #131920; --surface: #1d2630; --surface-2: #232d3a; --surface-3: #2e3843; --border: #2e3843; --border-strong: #3e4853; --text: #f8f9fa; --text-2: #bec8d0; --text-3: #8996a4; --link: #90b3ff; --ring: #90b3ff; --accent-text: #4680ff; --check: #20c997; --status: #20c997; /* Przyciski: #3a6ee0 + biały = 4,7:1 (AA dla każdego rozmiaru) */ --cta-bg: #3a6ee0; --cta-bg-active: #2d5bc7; --cta-fg: #ffffff; /* Siatka w hero (canvas czyta te wartości) */ --field-dot: rgb(137 150 164 / 0.34); --field-accent: #4680ff; --field-seed: #20c997; --field-flash: #90b3ff; /* Efekty */ --glass: color-mix(in srgb, var(--bg) 78%, transparent); --glow: color-mix(in srgb, var(--brand) 16%, transparent); --panel-glow: color-mix(in srgb, var(--brand) 22%, transparent); --panel-glow-soft: color-mix(in srgb, var(--brand) 10%, transparent); --card-bg: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--brand) 3%, var(--bg)) 72%); --shadow-card: 0 22px 54px color-mix(in srgb, #0b0f14 64%, transparent); --shadow-card-hover: 0 28px 64px color-mix(in srgb, var(--brand) 18%, transparent); --shadow-cta: 0 12px 24px color-mix(in srgb, var(--brand) 30%, transparent); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --noise-opacity: 0.07; /* Kształt i przestrzeń */ --radius-btn: 10px; --radius-card: 18px; --radius-surface: 28px; --radius-pill: 9999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --section-pad: clamp(64px, 8.5vw, 120px); --gutter: clamp(16px, 4vw, 40px); --container: 1240px; --header-h: 64px; /* Typografia */ --font-display: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace; --fs-h1: clamp(2.5rem, 1.35rem + 5.6vw, 5.75rem); --fs-h2: clamp(2.05rem, 1.35rem + 3vw, 3.75rem); --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); --fs-small: 0.9375rem; --fs-mono: 0.78rem; --lh-display: 1.02; --ls-display: -0.035em; /* Ruch */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); --dur-1: 150ms; --dur-2: 350ms; --dur-3: 700ms; } :root[data-theme='light'] { color-scheme: light; --bg: #f8f9fa; --surface: #ffffff; --surface-2: #f3f5f7; --surface-3: #e7eaee; --border: #e7eaee; --border-strong: #dbe0e5; --text: #131920; --text-2: #3e4853; --text-3: #5b6b79; --link: #0d59cf; /* ≥ 4,8:1 także na niebieskich poświatach paneli */ --ring: #0d59cf; --accent-text: #3a6ee0; --check: #1b8d62; --status: #1b8d62; --cta-bg: #176cd6; --cta-bg-active: #0d59cf; --field-dot: rgb(91 107 121 / 0.3); --field-flash: #3a6ee0; --glass: color-mix(in srgb, var(--bg) 80%, transparent); --glow: color-mix(in srgb, var(--brand) 12%, transparent); /* Na jasnym tle poświata musi być słabsza, żeby niebieskie etykiety zachowały ≥ 4,5:1 */ --panel-glow: color-mix(in srgb, var(--brand) 11%, transparent); --panel-glow-soft: color-mix(in srgb, var(--brand) 6%, transparent); --card-bg: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--brand) 2%, #ffffff) 72%); --shadow-card: 0 1px 2px rgb(19 25 32 / 0.04), 0 14px 36px rgb(19 25 32 / 0.07); --shadow-card-hover: 0 1px 2px rgb(19 25 32 / 0.04), 0 22px 48px color-mix(in srgb, var(--brand) 16%, transparent); --shadow-cta: 0 10px 22px color-mix(in srgb, var(--brand-deep) 26%, transparent); --noise-opacity: 0.04; }