/* ===================================================================== NIRMAN MOTORS — Design Tokens Light + Dark theme. Toggle via [data-theme="dark"] on . ===================================================================== */ :root { /* Brand */ --brand: #E5322D; /* Nirman red */ --brand-hover: #C21F1B; --brand-soft: #FCE9E8; /* Accent (steel / automotive) */ --accent: #1F6FEB; --accent-soft: #E7F0FE; /* Status */ --ok: #16A34A; --ok-soft: #E7F6EC; --warn: #D97706; --warn-soft: #FDF0DD; --danger: #DC2626; --danger-soft: #FCE8E8; --info: #0891B2; /* Neutrals — LIGHT */ --bg: #F5F6F8; /* app background */ --surface: #FFFFFF; /* cards, panels */ --surface-2: #F0F2F5; /* subtle raised / hover */ --border: #E2E5EA; --border-strong: #CBD0D8; --text: #14181F; /* primary text */ --text-2: #4A525E; /* secondary */ --text-3: #8A94A2; /* muted / captions */ --text-inv: #FFFFFF; /* Sidebar (dark rail in light mode) */ --rail: #14181F; --rail-text: #C7CDD6; --rail-text-active: #FFFFFF; --rail-active-bg: rgba(229,50,45,0.15); /* Elevation */ --shadow-sm: 0 1px 2px rgba(20,24,31,0.06); --shadow-md: 0 4px 12px rgba(20,24,31,0.08); --shadow-lg: 0 12px 32px rgba(20,24,31,0.12); /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* Typography */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Layout */ --rail-w: 248px; --header-h: 60px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 160ms; } /* ===================================================================== DARK THEME ===================================================================== */ [data-theme="dark"] { --brand: #FF4D47; --brand-hover: #FF6B66; --brand-soft: rgba(255,77,71,0.14); --accent: #4F8FF7; --accent-soft: rgba(79,143,247,0.14); --ok: #34D399; --ok-soft: rgba(52,211,153,0.14); --warn: #FBBF24; --warn-soft: rgba(251,191,36,0.14); --danger: #F87171; --danger-soft: rgba(248,113,113,0.14); --info: #22D3EE; --bg: #0E1116; --surface: #161B22; --surface-2: #1E242D; --border: #262D37; --border-strong: #363F4C; --text: #E6EAF0; --text-2: #A7B0BD; --text-3: #6E7885; --text-inv: #0E1116; --rail: #0A0D11; --rail-text: #9BA4B0; --rail-text-active: #FFFFFF; --rail-active-bg: rgba(255,77,71,0.18); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 12px 32px rgba(0,0,0,0.6); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }