/* FlowDesk — semantic design tokens (§ב.10). Components use ONLY these tokens; no hardcoded colors anywhere. Two themes: light (default) + dark. Theme is chosen by [data-theme] on (persisted); if absent, the OS preference is followed via the media query. Contrast targets AA in both modes. */ :root { /* light theme (default) */ --color-bg: #f4f6fb; --color-surface: #ffffff; --color-surface-2: #eef1f7; --color-text: #14181f; --color-muted: #4f5967; /* AA on surface + bg (>=4.5:1) */ --color-primary: #1f5fd6; --color-primary-text: #ffffff; --color-on-primary-soft: #1746a0; --color-primary-soft: #e5edfb; --color-danger: #c0392b; --color-danger-soft: #fbe7e4; --color-success: #1c7a4a; --color-warning: #a5680b; --color-border: #d0d7e3; /* input/card outline */ --color-line: #c5cdda; /* dividers/rules — a touch stronger so rows read as layered */ --color-focus: #1f5fd6; --shadow-1: 0 1px 2px rgba(20, 24, 31, .08), 0 2px 8px rgba(20, 24, 31, .06); /* spacing / radius / typography — semantic, theme-independent */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --radius-1: 8px; --radius-2: 14px; --radius-pill: 999px; --font-sans: "Heebo", "Rubik", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fs-sm: .82rem; --fs-base: 1rem; --fs-lg: 1.2rem; --fs-xl: 1.5rem; --lh: 1.55; } [data-theme="dark"] { --color-bg: #0f141c; --color-surface: #1a2536; /* one clear step lighter than the page bg so cards read as surfaces */ --color-surface-2: #24344b; --color-text: #eef2f8; --color-muted: #b2bfd1; /* raised lightness → >=4.5:1 on the dark surface */ --color-primary: #5b9bff; --color-primary-text: #0a1420; --color-on-primary-soft: #cfe0ff; --color-primary-soft: #1c2c46; --color-danger: #ff6f61; --color-danger-soft: #3a1f1c; --color-success: #57c98a; --color-warning: #e0a94a; --color-border: #3a4d69; /* brighter card/input outline on near-black */ --color-line: #44597b; /* brighter still for dividers so rows separate visibly */ --color-focus: #7fb2ff; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .35); } /* Follow the OS preference only when the user has NOT explicitly chosen a theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #0f141c; --color-surface: #1a2536; --color-surface-2: #24344b; --color-text: #eef2f8; --color-muted: #b2bfd1; --color-primary: #5b9bff; --color-primary-text: #0a1420; --color-on-primary-soft: #cfe0ff; --color-primary-soft: #1c2c46; --color-danger: #ff6f61; --color-danger-soft: #3a1f1c; --color-success: #57c98a; --color-warning: #e0a94a; --color-border: #3a4d69; --color-line: #44597b; --color-focus: #7fb2ff; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35); } }