/* ============================================= NoteboOk servis — Design Tokens Inspirace: ČSOB.cz — čistota, důvěra, přehlednost Barvy sladěny se stávající identitou projektu (#185FA5), aby přepis na tokeny (fáze C4) neměnil vzhled. ============================================= */ :root { /* Barvy — primární (stávající modrá projektu) */ --color-primary: #185FA5; /* tmavě modrá — důvěra, odbornost */ --color-primary-hover: #0C3A6E; --color-primary-light: #EEF4FF; /* světle modrá pro pozadí karet */ --color-primary-dark: #082848; /* nejtmavší modrá — hero, footer */ /* Barvy — neutrální */ --color-bg: #ffffff; --color-bg-subtle: #f8f9fa; /* velmi světlé šedé pozadí sekcí */ --color-bg-page: #f5f5f5; /* pozadí */ --color-border: #e5e5e5; --color-text: #111111; /* téměř černá — vysoký kontrast */ --color-text-muted: #666666; --color-text-light: #888888; /* Barvy — stavové (stávající hodnoty projektu) */ --color-success: #22A06B; --color-success-dark: #166534; --color-success-light: #F0FFF4; --color-warning: #B45309; --color-warning-light: #FEF3C7; --color-error: #991B1B; --color-error-light: #FFF0F0; /* Typografie — systémový font (bez externích Google Fonts) */ --font-display: system-ui, -apple-system, sans-serif; --font-body: system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.2; --leading-normal: 1.6; /* Mezery */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Rádius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Stíny — jedna hladina, subtilní */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04); /* Přechody */ --transition: 150ms ease; /* Layout */ --container-max: 1100px; --container-pad: 1rem; } @media (min-width: 768px) { :root { --container-pad: 2rem; } }