/* ===================================================================== TaskHub — design tokens (kolory, typografia, odstępy, cienie) Jasny motyw domyślnie, ciemny przez [data-theme="dark"] na . ===================================================================== */ :root { /* Tło i powierzchnie */ --color-bg: #FAFAFB; --color-surface: #FFFFFF; --color-surface-hover: #F3F4F6; --color-surface-sunken: #F5F6F8; --color-border: #E7E8EC; --color-border-strong: #D6D8DE; /* Tekst */ --color-text-primary: #16181D; --color-text-secondary: #676B76; --color-text-tertiary: #9599A3; --color-text-on-accent: #FFFFFF; /* Akcent */ --color-accent: #6366F1; --color-accent-hover: #4F46E5; --color-accent-soft: #EEF0FF; /* Stany */ --color-success: #22C55E; --color-success-soft: #E7F9EE; --color-warning: #F59E0B; --color-warning-soft: #FEF3E2; --color-danger: #EF4444; --color-danger-soft: #FDECEC; /* Priorytety */ --color-priority-urgent: #EF4444; --color-priority-high: #F59E0B; --color-priority-medium: #3B82F6; --color-priority-low: #94A3B8; --color-priority-none: #D6D8DE; /* Skala odstępów */ --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; /* Zaokrąglenia i cienie */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(16, 18, 27, 0.04), 0 1px 1px rgba(16, 18, 27, 0.03); --shadow-md: 0 4px 14px rgba(16, 18, 27, 0.08), 0 1px 3px rgba(16, 18, 27, 0.06); --shadow-lg: 0 16px 40px rgba(16, 18, 27, 0.14), 0 4px 10px rgba(16, 18, 27, 0.06); /* Typografia */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14.5px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 26px; --font-size-2xl: 32px; /* Czas animacji */ --transition-fast: 120ms ease; --transition-base: 180ms cubic-bezier(0.2, 0.7, 0.3, 1); --transition-slow: 280ms cubic-bezier(0.2, 0.7, 0.3, 1); } /* Ciemny motyw — ręczny wybór użytkownika */ :root[data-theme="dark"] { --color-bg: #101218; --color-surface: #181B23; --color-surface-hover: #20242E; --color-surface-sunken: #14161C; --color-border: #262A35; --color-border-strong: #343946; --color-text-primary: #F1F2F6; --color-text-secondary: #A0A4B0; --color-text-tertiary: #6B7080; --color-accent: #818CF8; --color-accent-hover: #A5B0FA; --color-accent-soft: #262A45; --color-success: #4ADE80; --color-success-soft: #163223; --color-warning: #FBBF24; --color-warning-soft: #33270E; --color-danger: #F87171; --color-danger-soft: #3A1E1E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); } /* Ciemny motyw — zgodnie z preferencją systemową, kiedy użytkownik wybrał "system" */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --color-bg: #101218; --color-surface: #181B23; --color-surface-hover: #20242E; --color-surface-sunken: #14161C; --color-border: #262A35; --color-border-strong: #343946; --color-text-primary: #F1F2F6; --color-text-secondary: #A0A4B0; --color-text-tertiary: #6B7080; --color-accent: #818CF8; --color-accent-hover: #A5B0FA; --color-accent-soft: #262A45; --color-success: #4ADE80; --color-success-soft: #163223; --color-warning: #FBBF24; --color-warning-soft: #33270E; --color-danger: #F87171; --color-danger-soft: #3A1E1E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); } }