/* ======================================== * OFFICE SEMANTIC TOKENS * Used by: Web.Office ONLY * References primitive tokens from app.css * Dark mode overrides go in [data-theme="dark"] block * ======================================== */ :root { /* Primary brand colors */ --office-primary: var(--color-blue-600); --office-primary-hover: var(--color-blue-700); --office-primary-light: var(--color-blue-50); /* Surface colors */ --office-surface: var(--color-white); --office-surface-secondary: var(--color-slate-50); /* Border colors */ --office-border: var(--color-slate-200); --office-border-focus: var(--office-primary); /* Text colors */ --office-text: var(--color-slate-900); --office-text-secondary: var(--color-slate-600); --office-text-muted: var(--color-slate-400); /* Status colors */ --office-success: var(--color-green-600); --office-warning: var(--color-amber-600); --office-danger: var(--color-red-600); /* Semantic spacing */ --office-space-xs: var(--space-1); --office-space-sm: var(--space-2); --office-space-md: var(--space-4); --office-space-lg: var(--space-6); --office-space-xl: var(--space-8); /* Responsive Breakpoints */ --breakpoint-mobile: 360px; --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --breakpoint-large: 1366px; /* Semantic shadows */ --office-shadow-sm: var(--shadow-sm); --office-shadow-md: var(--shadow-md); --office-shadow-lg: var(--shadow-lg); /* Semantic radii */ --office-radius-sm: var(--radius-sm); --office-radius: var(--radius-md); --office-radius-lg: var(--radius-lg); /* Semantic durations */ --office-duration-fast: var(--duration-fast); --office-duration-normal: var(--duration-normal); --office-duration-slow: var(--duration-slow); } /* ======================================== * DARK MODE OVERRIDES * Applied when * Only override colors and shadows -- spacing/radii stay the same * Brand color (--office-primary) stays consistent for brand identity * ======================================== */ [data-theme="dark"] { /* Surface colors */ --office-surface: #0F172A; --office-surface-secondary: #1E293B; /* Border colors */ --office-border: #334155; --office-border-focus: var(--color-blue-600); /* Text colors - WCAG 2.1 AA compliant against dark backgrounds */ --office-text: #F1F5F9; --office-text-secondary: #CBD5E1; --office-text-muted: #64748B; /* Status colors - slightly brighter for dark backgrounds */ --office-success: #22C55E; --office-warning: #F59E0B; --office-danger: #EF4444; /* Shadows - more pronounced on dark backgrounds */ --office-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --office-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3); --office-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4); /* Focus glow - adjusted for dark backgrounds */ --focus-glow-color: rgba(37, 99, 235, 0.25); }