:root { --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Arabic', 'Helvetica Neue', Tahoma, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --primary: #0A6FD6; --primary-hover: #085AB0; --primary-ink: #FFFFFF; --secondary: #04223F; --secondary-ink: #FFFFFF; --accent: #0A6FD6; --background: #F7F7F7; --surface: #FFFFFF; --surface-muted: #FAFAFA; --surface-sunken: #F2F2F2; --text: #0A0A0A; --text-muted: #4A4A4A; --text-subtle: #767676; --border: #E4E4E4; --border-strong: #CFCFCF; --success: #137A4B; --warning: #A15C07; --danger: #B42318; --info: #3F5B8C; --primary-soft: rgba(10, 111, 214, 0.12); --primary-soft-2: rgba(10, 111, 214, 0.22); --focus-ring: 0 0 0 3px rgba(10, 111, 214, 0.4); --accent-soft: rgba(10, 111, 214, 0.16); --success-soft: rgba(19, 122, 75, 0.12); --warning-soft: rgba(161, 92, 7, 0.12); --danger-soft: rgba(180, 35, 24, 0.12); --info-soft: rgba(63, 91, 140, 0.12); color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #3AA2FF; --primary-hover: #66B8FF; --primary-ink: #021A33; --secondary: #F2F2F2; --secondary-ink: #0A0A0A; --accent: #3AA2FF; --background: #0A0A0A; --surface: #121212; --surface-muted: #161616; --surface-sunken: #0E0E0E; --text: #F5F5F5; --text-muted: #BDBDBD; --text-subtle: #8A8A8A; --border: #262626; --border-strong: #363636; --success: #4CC38A; --warning: #E0A84E; --danger: #F07167; --info: #8FA8D6; --primary-soft: rgba(58, 162, 255, 0.12); --primary-soft-2: rgba(58, 162, 255, 0.22); --focus-ring: 0 0 0 3px rgba(58, 162, 255, 0.4); --accent-soft: rgba(58, 162, 255, 0.16); --success-soft: rgba(76, 195, 138, 0.12); --warning-soft: rgba(224, 168, 78, 0.12); --danger-soft: rgba(240, 113, 103, 0.12); --info-soft: rgba(143, 168, 214, 0.12); color-scheme: dark; } }
:root[data-theme="dark"] { --primary: #3AA2FF; --primary-hover: #66B8FF; --primary-ink: #021A33; --secondary: #F2F2F2; --secondary-ink: #0A0A0A; --accent: #3AA2FF; --background: #0A0A0A; --surface: #121212; --surface-muted: #161616; --surface-sunken: #0E0E0E; --text: #F5F5F5; --text-muted: #BDBDBD; --text-subtle: #8A8A8A; --border: #262626; --border-strong: #363636; --success: #4CC38A; --warning: #E0A84E; --danger: #F07167; --info: #8FA8D6; --primary-soft: rgba(58, 162, 255, 0.12); --primary-soft-2: rgba(58, 162, 255, 0.22); --focus-ring: 0 0 0 3px rgba(58, 162, 255, 0.4); --accent-soft: rgba(58, 162, 255, 0.16); --success-soft: rgba(76, 195, 138, 0.12); --warning-soft: rgba(224, 168, 78, 0.12); --danger-soft: rgba(240, 113, 103, 0.12); --info-soft: rgba(143, 168, 214, 0.12); color-scheme: dark; }