/* ========================================================================== Design Tokens — VEX Editor Light + Dark themes via [data-theme="dark"] on ========================================================================== */ :root { /* ---- Light Mode Colors ---- */ --color-bg: #F2F4F7; --color-surface: #FFFFFF; --color-surface-alt: #E8EBF0; --color-panel: #FFFFFF; --color-heading: #243A5E; --color-text: #5A6473; --color-text-muted: #8891A0; --color-link: #2E4E86; --color-primary: #243A5E; --color-primary-hover: #2E4E86; --color-accent: #3FA7A3; --color-accent-hover: #369B97; --color-ink: #2E4E86; --color-border: #A3AAB7; --color-border-light: #D1D5DB; --color-divider: #E5E7EB; /* Status Colors */ --color-status-not-affected: #16A34A; --color-status-not-affected-bg: #F0FDF4; --color-status-affected: #DC2626; --color-status-affected-bg: #FEF2F2; --color-status-fixed: #2563EB; --color-status-fixed-bg: #EFF6FF; --color-status-under-investigation:#D97706; --color-status-under-investigation-bg: #FFFBEB; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04); /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Typography */ --font-primary: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif; --font-ui: 'Inter', system-ui, sans-serif; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --leading-tight: 1.25; --leading-normal: 1.5; --leading-loose: 1.75; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.025em; /* Border Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* Layout */ --header-height: 3.5rem; --sidebar-width: 320px; --max-width: 1200px; --max-width-narrow: 800px; } /* ---- Dark Mode ---- */ [data-theme="dark"] { --color-bg: #0B1020; --color-surface: #111833; --color-surface-alt: #182040; --color-panel: #111833; --color-heading: #EAF0FF; --color-text: rgba(234,240,255,0.72); --color-text-muted: rgba(234,240,255,0.45); --color-link: #7EA3D8; --color-primary: #7EA3D8; --color-primary-hover: #9BB8E3; --color-accent: #3FA7A3; --color-accent-hover: #4DBDB9; --color-ink: #7EA3D8; --color-border: rgba(234,240,255,0.15); --color-border-light: rgba(234,240,255,0.08); --color-divider: rgba(234,240,255,0.08); /* Status Colors (dark mode) */ --color-status-not-affected: #4ADE80; --color-status-not-affected-bg: rgba(74,222,128,0.1); --color-status-affected: #F87171; --color-status-affected-bg: rgba(248,113,113,0.1); --color-status-fixed: #60A5FA; --color-status-fixed-bg: rgba(96,165,250,0.1); --color-status-under-investigation:#FBBF24; --color-status-under-investigation-bg: rgba(251,191,36,0.1); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3); }