/* ================================================================= * main.css — RTL base styles + theme variables * ================================================================= * Theme variables centralize colors and sizing. * * Theme selection (per-user, stored as ui.theme in user_settings): * "auto" → no [data-theme] attribute on ; the media query * at the bottom of this section follows the OS preference. * "light" → ; same as :root defaults. * "dark" → ; the dark overrides apply. * * Status pills, inline-styled cards in views, and other hard-coded * colors stay light — only the chrome that uses these variables flips. * Improving the per-component dark contrast is a follow-up. */ :root { --color-bg: #f5f7fa; --color-surface: #ffffff; --color-text: #1a202c; --color-text-muted: #718096; --color-border: #e2e8f0; --color-primary: #2d3748; --color-primary-text: #ffffff; --color-accent: #3182ce; --color-accent-hover: #2b6cb0; --color-success: #0a8a3a; --color-danger: #c53030; --color-warning: #d69e2e; } /* Explicit dark theme — user chose "חשוך" in personal settings. */ [data-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-border: #334155; --color-primary: #020617; --color-primary-text: #f1f5f9; --color-accent: #60a5fa; --color-accent-hover: #93c5fd; } /* Auto theme — no explicit attribute, follow OS dark-mode preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-bg: #0f172a; --color-surface: #1e293b; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-border: #334155; --color-primary: #020617; --color-primary-text: #f1f5f9; --color-accent: #60a5fa; --color-accent-hover: #93c5fd; } } :root { --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --sidebar-width: 240px; --header-height: 56px; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Rubik", "Arial Hebrew", Arial, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-family); font-size: 14px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); direction: rtl; } /* Native