/** * Tokeny systemu wizualnego — SamoWolność / „Mózg w formie". * * Wszystkie wartości wizualne w kodzie pochodzą wyłącznie stąd — patrz * CLAUDE.md, sekcja „Konwencje kodu": żadnych kolorów, odstępów ani * czasów animacji wpisanych wprost. Referencja wizualna: /styleguide. * * Kroje pisma hostowane lokalnie (public_html/assets/fonts/) — decyzja * z Etapu 0.5, patrz docs/STATUS.md. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/caveat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/caveat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/vt323-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/vt323-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ============ KOLORY — paleta bazowa marki ============ */ --color-brand-violet: #7000FF; --color-brand-lime: #CBFF00; --color-brand-light: #FBFBFB; --color-brand-dark: #1C1C1E; --color-primary: var(--color-brand-violet); --color-primary-soft: #F1E5FF; /* Limonka: WYŁĄCZNIE jako tło pod ciemnym tekstem — nigdy jako tekst na jasnym tle, patrz sekcja 14 dokumentu wsadowego (kontrast). */ --color-accent: var(--color-brand-lime); --color-accent-hover: #B8E600; --color-accent-text: var(--color-brand-dark); /* Tła — kilka poziomów */ --color-bg-base: var(--color-brand-light); --color-bg-surface: #FFFFFF; --color-bg-sunken: #F1EEF7; --color-bg-inverse: var(--color-brand-dark); /* Tekst */ --color-text-primary: var(--color-brand-dark); --color-text-muted: #6B6870; --color-text-inverse: var(--color-brand-light); --color-text-inverse-muted: #C7C5CE; --color-text-on-primary: var(--color-brand-light); --color-text-link: var(--color-primary); /* Stany systemowe — nieopisane w materiałach marki, dobrane pod paletę. Bardziej nasycone niż typowy, stonowany zestaw — bliżej żywego, maksymalistycznego charakteru marki (decyzja z Etapu 0.5). */ --color-success: #00A85C; --color-success-bg: #DFF7E9; --color-error: #E31C41; --color-error-bg: #FDE3E9; --color-warning: #CC6A00; --color-warning-bg: #FBEBD6; --color-info: var(--color-primary); --color-info-bg: var(--color-primary-soft); /* Obramowania */ --color-border: rgba(28, 28, 30, 0.12); --color-border-strong: rgba(28, 28, 30, 0.24); --color-border-on-inverse: rgba(251, 251, 251, 0.16); /* ============ SZKŁO — panele, nawigacja, modale ============ */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-inverse: rgba(28, 28, 30, 0.45); --glass-border: rgba(255, 255, 255, 0.6); --glass-border-inverse: rgba(255, 255, 255, 0.18); /* Mocne rozmycie + wzmocnione nasycenie tego, co pod spodem — duże powierzchnie (karty, modal) mają „czytać się" jako grube szkło, nie płaska mgiełka. Bez kontrastowego tła pod spodem efekt i tak będzie ledwo widoczny; patrz „scena" w /styleguide. */ --glass-blur: 48px; --glass-saturate: 200%; /* Zapasowe, w pełni nieprzezroczyste tło — używane, gdy backdrop-filter jest niedostępny albo prefers-reduced-transparency jest włączone. */ --glass-fallback-bg: var(--color-bg-surface); --glass-fallback-bg-inverse: var(--color-bg-inverse); /* ============ TYPOGRAFIA ============ */ /* Inter — treści pisane. VT323 — hasła, nagłówki, nazwy modułów (krój pikselowy, tylko grubość 400 — celowo, decyzja marki). Caveat — dopiski, zdobienia, akcenty odręczne. */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'VT323', ui-monospace, 'SFMono-Regular', Menlo, monospace; --font-accent: 'Caveat', cursive; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ /* VT323 jest krojem pikselowym — wizualnie drobniejszym niż Inter przy tym samym rozmiarze, dlatego nagłówki na nim celowo o stopień większe */ --text-display-lg: 3.5rem; /* 56px */ --text-display-xl: 4.5rem; /* 72px */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.15; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --letter-spacing-display: 0.02em; --letter-spacing-caps: 0.06em; /* ============ ODSTĘPY — skala oparta na module 4px ============ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ /* Minimalny obszar dotykowy — sekcja 13 dokumentu wsadowego wymaga 44×44 px. Zmierzone w rewizji platformy (23 sierpnia 2026): żaden przycisk w produkcie tego nie spełniał (.btn miał 42px wysokości). Jeden token, żeby nie rozjeżdżało się to komponent po komponencie. */ --touch-target-min: 2.75rem; /* 44px */ /* ============ PROMIENIE ============ */ --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.5rem; --radius-full: 999px; /* ============ CIENIE — warstwowe, nie pojedyncze twarde ============ */ --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.06), 0 1px 1px rgba(28, 28, 30, 0.04); --shadow-md: 0 8px 24px rgba(28, 28, 30, 0.10), 0 2px 6px rgba(28, 28, 30, 0.06); --shadow-lg: 0 20px 48px rgba(28, 28, 30, 0.16), 0 6px 16px rgba(28, 28, 30, 0.08); /* Cień „grubego" szkła — głęboki i ciemny (żeby czytał się na kolorowym tle), plus poświata w barwie marki, plus jasna krawędź u góry (światło łapiące się na krawędzi materiału) i cienki wewnętrzny kontur. Cztery warstwy naraz, nie jeden płaski cień. */ --shadow-glass: 0 24px 64px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(112, 0, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08); /* Był --color-primary-soft — kontrast pierścienia względem tła zmierzony w rewizji platformy (23 sierpnia 2026) na 1,17:1, przy wymaganych WCAG 3:1. --color-primary daje 6,7:1 i to jest już kolor marki, nie nowy dodatek. Pola formularzy miały ten problem złagodzony przez dodatkową zmianę koloru obramowania — teraz przyciski i linki dostają ten sam poziom widoczności. */ --shadow-focus: 0 0 0 3px var(--color-primary); /* ============ MOTION ============ */ /* Interakcje: 150-250ms. Wejście elementu na ekran: 300-400ms. Punkt wyjścia z sekcji 14 dokumentu wsadowego, do zweryfikowania w praktyce. */ --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 350ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); } /* ============ prefers-reduced-motion — traktowane poważnie ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============ prefers-reduced-transparency — wyłącza szkło ============ */ @media (prefers-reduced-transparency: reduce) { :root { --glass-bg: var(--glass-fallback-bg); --glass-bg-inverse: var(--glass-fallback-bg-inverse); --glass-blur: 0px; } }