/* todue — design tokens * Light theme = default (:root). Dark theme = [data-theme="dark"] override. * Brand colors (4) sú jediné konštanty cez obe témy — pochádzajú z loga. */ :root { /* ─── Brand (todue) — same in light & dark, source: assets/logo/todue-wordmark.svg ─── */ --brand-blue: #4ca7f2; --brand-yellow: #f2b01c; --brand-green: #37b758; --brand-red: #f24c4c; /* Soft variants — derived (12% opacity backgrounds, 18% for selected states) */ --brand-blue-soft: rgba(76, 167, 242, 0.12); --brand-yellow-soft: rgba(242, 176, 28, 0.14); --brand-green-soft: rgba(55, 183, 88, 0.14); --brand-red-soft: rgba(242, 76, 76, 0.12); /* Background — light cream Reminders feel */ --bg: #f5f2e8; --bg-alt: #faf7ed; --bg-surface: #fffdf6; --bg-input: #ffffff; --bg-hover: #ede8d8; --bg-selected: rgba(55, 183, 88, 0.18); --border: #e3dcc4; --border-soft: rgba(0, 0, 0, 0.06); --border-strong: #c9c0a3; /* Text */ --text-primary: #3f3f3f; /* matches todue wordmark dark grey */ --text-secondary: #6b6545; --text-muted: #a09878; --text-disabled: #c9c0a3; /* Brand role aliases — primary product accent uses brand-green */ --product-primary: var(--brand-green); --product-primary-hover: #2ea24c; --product-primary-soft: var(--brand-green-soft); --product-primary-dim: rgba(55, 183, 88, 0.14); --cta: #ff1a8c; --cta-dim: rgba(255, 26, 140, 0.10); /* Status — mapped to brand colors */ --success: var(--brand-green); --success-dim: var(--brand-green-soft); --warning: var(--brand-yellow); --warning-dim: var(--brand-yellow-soft); --danger: var(--brand-red); --danger-dim: var(--brand-red-soft); --info: var(--brand-blue); --info-dim: var(--brand-blue-soft); /* Section colors — STRICT brand palette only (4 farby + neutral gray). * Avatar palette (--av-*) má extra farby pre rozlíšenie klientov — NEPOUŽÍVAJ ich * mimo Avatar komponenty. Tu sú len 4 brand + gray. */ --sec-blue: var(--brand-blue); --sec-blue-soft: #d6e4f7; --sec-red: var(--brand-red); --sec-red-soft: #fadcdf; --sec-yellow: var(--brand-yellow); --sec-yellow-soft: #f7eac7; --sec-green: var(--brand-green); --sec-green-soft: #cfecdd; --sec-gray: #80795f; --sec-gray-soft: #e3ddc8; /* Avatar palette */ --av-1: #e88a3a; --av-2: #3a7bd5; --av-3: #9a6cd9; --av-4: #2bbf85; --av-5: #e35aa6; --av-6: #2ab8b8; --av-7: #d9a824; --av-8: #6b6545; /* Type — todue Red Hat family (self-hosted, identical na všetkých OS). * System fallback drží UI funkčné kým sa woff2 stiahne (font-display: swap). */ --font: 'Red Hat Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Red Hat Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace; --t-micro: 10px; --t-cap: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 14px; --t-lg: 17px; --t-xl: 22px; --t-2xl: 28px; --t-3xl: 36px; --t-display: 48px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --r-xs: 4px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 26px; --r-full: 999px; --sh-sm: 0 1px 2px rgba(40, 30, 0, 0.04); --sh-md: 0 4px 16px rgba(40, 30, 0, 0.08); --sh-lg: 0 18px 48px rgba(40, 30, 0, 0.16); --sh-modal: 0 24px 80px rgba(20, 15, 0, 0.28); --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --t-fast: 0.15s; --t-mid: 0.28s; } /* ─── Dark theme ─── * Aktivácia: alebo programaticky * document.documentElement.setAttribute('data-theme', 'dark') * Brand farby (blue/yellow/green/red) ostávajú rovnaké — menia sa len bg/text/border tokens. * Teplý dark (warm dark) — zachová Reminders feel s teplotou ako náprotivok cream light. */ [data-theme="dark"] { /* Background — warm dark, mirroring cream */ --bg: #1a1a0f; --bg-alt: #221f12; --bg-surface: #2a2618; --bg-input: #1f1d12; --bg-hover: #302d1d; --bg-selected: rgba(55, 183, 88, 0.22); --border: #3a3520; --border-soft: rgba(255, 255, 255, 0.06); --border-strong: #524c30; /* Text */ --text-primary: #f5f2e8; --text-secondary: #c9c0a3; --text-muted: #80795f; --text-disabled: #4a462f; /* Soft brand backgrounds — slightly stronger v dark pre čitateľnosť */ --brand-blue-soft: rgba(76, 167, 242, 0.18); --brand-yellow-soft: rgba(242, 176, 28, 0.20); --brand-green-soft: rgba(55, 183, 88, 0.20); --brand-red-soft: rgba(242, 76, 76, 0.18); /* Section softs — re-derived from brand for dark contrast */ --sec-blue-soft: rgba(76, 167, 242, 0.18); --sec-red-soft: rgba(242, 76, 76, 0.18); --sec-yellow-soft: rgba(242, 176, 28, 0.20); --sec-green-soft: rgba(55, 183, 88, 0.20); --sec-gray-soft: rgba(128, 121, 95, 0.22); --product-primary-hover: #4ec96a; /* Shadows — deeper s dark backdrop */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --sh-md: 0 4px 16px rgba(0, 0, 0, 0.40); --sh-lg: 0 18px 48px rgba(0, 0, 0, 0.55); --sh-modal: 0 24px 80px rgba(0, 0, 0, 0.70); }