/* Nostos — design tokeny (paleta jasny/ciemny) */ /* Warstwa 1: prymitywy (skale kolorów) — niezależne od motywu. Warstwa 2: tokeny semantyczne — mapują nazwę roli na prymityw per motyw. W kodzie używamy WYŁĄCZNIE tokenów semantycznych (--bg, --text, --primary...), nigdy prymitywów bezpośrednio. Motyw ciemny = [data-theme="dark"] na . */ :root { /* --- Prymitywy: Navy (marka) --- */ --navy-50: #ECF3FA; --navy-100: #D3E3F2; --navy-200: #A7C6E4; --navy-300: #6E9FCE; --navy-400: #3E79B0; --navy-500: #235C90; --navy-600: #1B4A75; /* kolor marki */ --navy-700: #163A5C; --navy-800: #112C46; --navy-900: #0B1D2F; /* --- Prymitywy: Gold (akcent — gwiazda przewodnia / światło portu) --- */ --gold-50: #FDF6E9; --gold-100: #FAE9C6; --gold-200: #F4D28A; --gold-300: #EEBB54; --gold-400: #E8A63D; /* akcent */ --gold-500: #CE8B27; --gold-600: #A66E1E; --gold-700: #7E521A; /* --- Prymitywy: Slate (neutralne, chłodne pod navy) --- */ --slate-0: #FFFFFF; --slate-50: #F6F8FA; --slate-100: #EDF1F5; --slate-200: #DDE4EC; --slate-300: #C4CFDA; --slate-400: #9AA9B8; --slate-500: #6B7C8C; --slate-550: #5A6B7A; /* tekst drugorzędny w trybie jasnym — patrz --text-muted */ --slate-600: #4C5B6A; --slate-700: #34424F; --slate-800: #22303C; --slate-900: #16222C; --slate-950: #0D161D; /* --- Prymitywy: statusy (ocena) --- */ --green-100: #DCF3E5; --green-400: #34B26A; --green-500: #2E9E5B; --green-600: #237A46; --amber-100: #FBEBCB; --amber-400: #E9B04A; --amber-500: #D9962B; --amber-600: #8D5D19; --red-100: #F8DED8; --red-400: #E16855; --red-500: #D8503C; --red-600: #AE3B2C; --orange-100: #FBD9BC; --orange-400: #E07B2E; --orange-500: #B95C16; --orange-600: #93430E; --teal-100: #D9F0F2; --teal-400: #2C9CA8; --teal-500: #1E7E88; --teal-600: #16646C; } /* === Motyw jasny (domyślny) === */ :root, [data-theme="light"] { --bg: var(--slate-50); --surface: var(--slate-0); --surface-alt: var(--slate-100); --border: var(--slate-200); --border-strong: var(--slate-300); --text: var(--slate-900); /* --slate-500 dawał 4,30 / 4,04 / 3,79:1 na --surface / --bg / --surface-alt, czyli poniżej progu AA 4,5:1 — a token niesie tekst zwykłej wielkości (linki nawigacji, leady, hinty, nagłówki tabel). --slate-550 daje 5,50 / 5,17 / 4,84:1. Dobrane przyciemnieniem tekstu, nie rozjaśnieniem tła. */ --text-muted: var(--slate-550); --text-subtle: var(--slate-400); --text-on-brand: #FFFFFF; --primary: var(--navy-600); --primary-hover: var(--navy-700); --primary-subtle: var(--navy-50); --on-primary: #FFFFFF; --accent: var(--gold-400); --accent-hover: var(--gold-500); --accent-subtle: var(--gold-50); --on-accent: var(--navy-900); --focus-ring: var(--navy-400); --rating-star: var(--gold-400); --rating-star-empty: var(--slate-300); --success-fg: var(--green-600); --success-bg: var(--green-100); --warning-fg: var(--amber-600); --warning-bg: var(--amber-100); --danger-fg: var(--red-600); --danger-bg: var(--red-100); --alert-fg: var(--orange-600); --alert-bg: var(--orange-100); --info-fg: var(--teal-600); --info-bg: var(--teal-100); --shadow-1: 0 1px 2px rgba(16,34,44,.06), 0 1px 3px rgba(16,34,44,.08); --shadow-2: 0 4px 12px rgba(16,34,44,.10); --shadow-3: 0 12px 32px rgba(16,34,44,.14); } /* === Motyw ciemny === */ [data-theme="dark"] { --bg: #0B1D2F; /* głęboka noc morska */ --surface: #102A40; --surface-alt: #16344E; --border: #23425E; --border-strong: #33566F; --text: #E7EEF5; --text-muted: #9DB1C4; --text-subtle: #6E869B; --text-on-brand: var(--navy-900); --primary: var(--navy-300); --primary-hover: var(--navy-200); --primary-subtle: #16344E; --on-primary: var(--navy-900); --accent: var(--gold-300); --accent-hover: var(--gold-200); --accent-subtle: #33301E; --on-accent: var(--navy-900); --focus-ring: var(--navy-300); --rating-star: var(--gold-300); --rating-star-empty: #33566F; --success-fg: #74D79E; --success-bg: #133223; --warning-fg: #F0C06A; --warning-bg: #3A2F14; --danger-fg: #F09184; --danger-bg: #3A1E19; --alert-fg: #F0A870; --alert-bg: #3A2413; --info-fg: #6FC9D3; --info-bg: #123037; --shadow-1: 0 1px 2px rgba(0,0,0,.30); --shadow-2: 0 4px 12px rgba(0,0,0,.38); --shadow-3: 0 12px 32px rgba(0,0,0,.48); } /* === Tokeny nie-kolorowe (wspólne dla motywów) === */ :root { --font-brand: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; /* wordmark + nagłówki */ --font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif; /* tekst / UI */ --text-display: 1.75rem; --lh-display: 1.2; --text-h1: 1.375rem; --lh-h1: 1.25; --text-h2: 1.125rem; --lh-h2: 1.3; --text-h3: 1.0625rem; --lh-h3: 1.4; --text-body: 0.9375rem; --lh-body: 1.5; --text-sm: 0.8125rem; --lh-sm: 1.45; --text-caption: 0.75rem; --lh-caption: 1.4; --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; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; }