/* ========================================================================== RentFlow — Enterprise SaaS Design System v2.0 Inspired by Stripe · Linear · Notion · Microsoft 365 · Atlassian · HubSpot WCAG 2.1 AA Compliant · 8px Spacing System · Semantic Design Tokens ========================================================================== */ /* ========================================================================== SECTION 0 — ENTERPRISE DESIGN SYSTEM TOKENS Full semantic token vocabulary: colors, spacing, type, radius, shadow, border, z-index, motion, and component primitives. ========================================================================== */ /* -------------------------------------------------------------------------- LAYER 0-A PRIMITIVE COLOR PALETTE (reference layer, not for direct use) -------------------------------------------------------------------------- */ :root { /* ── Slate (Neutral) ─────────────────────────────────────────────── */ --color-slate-50: #F8FAFC; --color-slate-100: #F1F5F9; --color-slate-200: #E2E8F0; --color-slate-300: #CBD5E1; --color-slate-400: #94A3B8; --color-slate-500: #64748B; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1E293B; --color-slate-900: #0F172A; --color-slate-950: #020617; /* ── Indigo (Brand Primary) ──────────────────────────────────────── */ --color-indigo-50: #EEF2FF; --color-indigo-100: #E0E7FF; --color-indigo-200: #C7D2FE; --color-indigo-400: #818CF8; --color-indigo-500: #6366F1; --color-indigo-600: #4F46E5; --color-indigo-700: #4338CA; --color-indigo-800: #3730A3; --color-indigo-900: #312E81; /* ── Violet (Brand Secondary) ────────────────────────────────────── */ --color-violet-400: #A78BFA; --color-violet-500: #8B5CF6; --color-violet-600: #7C3AED; --color-violet-700: #6D28D9; /* ── Emerald (Success) ───────────────────────────────────────────── */ --color-emerald-50: #ECFDF5; --color-emerald-100: #D1FAE5; --color-emerald-400: #34D399; --color-emerald-500: #10B981; --color-emerald-600: #059669; --color-emerald-700: #047857; /* ── Amber (Warning) ─────────────────────────────────────────────── */ --color-amber-50: #FFFBEB; --color-amber-100: #FEF3C7; --color-amber-400: #FBBF24; --color-amber-500: #F59E0B; --color-amber-600: #D97706; /* ── Rose (Danger) ───────────────────────────────────────────────── */ --color-rose-50: #FFF1F2; --color-rose-100: #FFE4E6; --color-rose-400: #FB7185; --color-rose-500: #F43F5E; --color-rose-600: #E11D48; /* ── Red (Danger alt) ────────────────────────────────────────────── */ --color-red-400: #F87171; --color-red-500: #EF4444; --color-red-600: #DC2626; /* ── White / Black ───────────────────────────────────────────────── */ --color-white: #FFFFFF; --color-black: #000000; } /* -------------------------------------------------------------------------- LAYER 0-B SEMANTIC TOKENS — DARK THEME (default) Semantic names decouple business intent from raw palette values. -------------------------------------------------------------------------- */ :root, [data-theme="dark"] { /* ── Surface / Background ────────────────────────────────────────── */ --surface-base: var(--color-slate-900); /* Page canvas */ --surface-raised: var(--color-slate-800); /* Cards, panels */ --surface-overlay: var(--color-slate-700); /* Hover, selected rows */ --surface-sunken: var(--color-slate-950); /* Input fields, insets */ --surface-brand: var(--color-slate-900); /* Sidebar */ --surface-modal: var(--color-slate-800); /* Modal dialogs */ --surface-tooltip: var(--color-slate-700); /* Tooltips */ /* ── Text / Foreground ───────────────────────────────────────────── */ --text-primary: var(--color-slate-50); /* Headings, body copy */ --text-secondary: var(--color-slate-400); /* Subtext, labels */ --text-muted: var(--color-slate-500); /* Placeholder, captions */ --text-disabled: var(--color-slate-600); /* Disabled controls */ --text-inverse: var(--color-slate-900); /* Text on light surfaces */ --text-on-brand: var(--color-white); /* Text on brand buttons */ /* ── Brand / Accent ─────────────────────────────────────────────── */ --brand-primary: var(--color-indigo-600); --brand-primary-hover: var(--color-indigo-700); --brand-primary-active: var(--color-indigo-800); --brand-primary-subtle: rgba(79, 70, 229, 0.12); --brand-primary-border: rgba(79, 70, 229, 0.35); --brand-secondary: var(--color-violet-600); --brand-secondary-hover: var(--color-violet-700); /* ── Semantic Status ─────────────────────────────────────────────── */ --status-success: var(--color-emerald-500); --status-success-hover: var(--color-emerald-600); --status-success-subtle: rgba(16, 185, 129, 0.12); --status-success-border: rgba(16, 185, 129, 0.30); --status-success-text: var(--color-emerald-400); --status-warning: var(--color-amber-500); --status-warning-hover: var(--color-amber-600); --status-warning-subtle: rgba(245, 158, 11, 0.12); --status-warning-border: rgba(245, 158, 11, 0.30); --status-warning-text: var(--color-amber-400); --status-danger: var(--color-red-500); --status-danger-hover: var(--color-red-600); --status-danger-subtle: rgba(239, 68, 68, 0.12); --status-danger-border: rgba(239, 68, 68, 0.30); --status-danger-text: var(--color-red-400); --status-info: var(--color-indigo-500); --status-info-subtle: rgba(99, 102, 241, 0.12); --status-info-border: rgba(99, 102, 241, 0.30); --status-info-text: var(--color-indigo-400); /* ── Border ──────────────────────────────────────────────────────── */ --border-default: var(--color-slate-700); /* Default dividers */ --border-subtle: rgba(255, 255, 255, 0.06); /* Very subtle separators */ --border-strong: var(--color-slate-600); /* Emphasized borders */ --border-focus: var(--color-indigo-500); /* Focus rings */ --border-brand: var(--color-indigo-600); /* Brand highlights */ /* ── Interactive Surface Alpha ───────────────────────────────────── */ --hover-overlay: rgba(255, 255, 255, 0.05); --active-overlay: rgba(255, 255, 255, 0.08); --selected-overlay: rgba(79, 70, 229, 0.10); /* ── Gradient System ─────────────────────────────────────────────── */ --gradient-brand: linear-gradient(135deg, var(--color-indigo-600) 0%, var(--color-violet-600) 100%); --gradient-brand-hover: linear-gradient(135deg, var(--color-indigo-700) 0%, var(--color-violet-700) 100%); --gradient-surface: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%); --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%); --gradient-success: linear-gradient(135deg, var(--color-emerald-500) 0%, var(--color-emerald-700) 100%); --gradient-danger: linear-gradient(135deg, var(--color-red-500) 0%, var(--color-red-600) 100%); } /* -------------------------------------------------------------------------- LAYER 0-C SEMANTIC TOKENS — LIGHT THEME OVERRIDE -------------------------------------------------------------------------- */ [data-theme="light"] { /* ── Surface / Background ────────────────────────────────────────── */ --surface-base: var(--color-slate-50); --surface-raised: var(--color-white); --surface-overlay: var(--color-slate-100); --surface-sunken: var(--color-slate-100); --surface-brand: var(--color-white); --surface-modal: var(--color-white); --surface-tooltip: var(--color-slate-900); /* ── Text / Foreground ───────────────────────────────────────────── */ --text-primary: var(--color-slate-900); --text-secondary: var(--color-slate-600); --text-muted: var(--color-slate-500); --text-disabled: var(--color-slate-400); --text-inverse: var(--color-white); --text-on-brand: var(--color-white); /* ── Brand / Accent ─────────────────────────────────────────────── */ --brand-primary: var(--color-indigo-600); --brand-primary-hover: var(--color-indigo-700); --brand-primary-active: var(--color-indigo-800); --brand-primary-subtle: rgba(79, 70, 229, 0.08); --brand-primary-border: rgba(79, 70, 229, 0.20); /* ── Semantic Status ─────────────────────────────────────────────── */ --status-success: var(--color-emerald-600); --status-success-subtle: var(--color-emerald-50); --status-success-border: var(--color-emerald-100); --status-success-text: var(--color-emerald-700); --status-warning: var(--color-amber-600); --status-warning-subtle: var(--color-amber-50); --status-warning-border: var(--color-amber-100); --status-warning-text: var(--color-amber-600); --status-danger: var(--color-red-600); --status-danger-subtle: var(--color-rose-50); --status-danger-border: var(--color-rose-100); --status-danger-text: var(--color-red-600); --status-info: var(--color-indigo-600); --status-info-subtle: var(--color-indigo-50); --status-info-border: var(--color-indigo-100); --status-info-text: var(--color-indigo-700); /* ── Border ──────────────────────────────────────────────────────── */ --border-default: var(--color-slate-200); --border-subtle: var(--color-slate-100); --border-strong: var(--color-slate-300); --border-focus: var(--color-indigo-500); --border-brand: var(--color-indigo-400); /* ── Interactive Surface Alpha ───────────────────────────────────── */ --hover-overlay: rgba(15, 23, 42, 0.04); --active-overlay: rgba(15, 23, 42, 0.07); --selected-overlay: rgba(79, 70, 229, 0.07); /* ── Gradient System ─────────────────────────────────────────────── */ --gradient-surface: linear-gradient(135deg, rgba(241, 245, 249, 0.7) 0%, rgba(248, 250, 252, 0.8) 100%); --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%); } /* -------------------------------------------------------------------------- LAYER 0-D SPACING SYSTEM — 8px Base Grid --space-N = N × 4px (half-grid for fine tuning) --space-NR = N × 8px (recommended grid multiples) -------------------------------------------------------------------------- */ :root { /* Fine-grain (4px half-grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Named semantic spacing aliases */ --space-xs: var(--space-1); /* 4px – icon gaps, tight */ --space-sm: var(--space-2); /* 8px – button padding (v), icon badges */ --space-md: var(--space-4); /* 16px – form fields, card padding (v) */ --space-lg: var(--space-6); /* 24px – card padding, section gaps */ --space-xl: var(--space-8); /* 32px – page padding, major gaps */ --space-2xl: var(--space-12); /* 48px – section spacing, hero padding */ --space-3xl: var(--space-16); /* 64px – large section separation */ /* Component-specific spacing */ --sp-btn-px: var(--space-5); /* Button horizontal padding (20px) */ --sp-btn-py: var(--space-2); /* Button vertical padding (8px) */ --sp-btn-sm-px: var(--space-3); /* Small button horizontal padding */ --sp-btn-sm-py: 6px; /* Small button vertical padding */ --sp-btn-lg-px: var(--space-7); /* Large button horizontal padding */ --sp-btn-lg-py: var(--space-3); /* Large button vertical padding */ --sp-input-px: 14px; /* Input horizontal padding */ --sp-input-py: 10px; /* Input vertical padding */ --sp-card-p: var(--space-6); /* Card internal padding */ --sp-card-sm-p: var(--space-4); /* Small card internal padding */ --sp-card-lg-p: var(--space-8); /* Large card internal padding */ --sp-modal-p: var(--space-6); /* Modal internal padding */ } /* -------------------------------------------------------------------------- LAYER 0-E TYPOGRAPHY SCALE Based on Major Third scale (ratio ~1.25) anchored at 16px body -------------------------------------------------------------------------- */ :root { /* Font family */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace; /* Font sizes */ --text-2xs: 0.6875rem; /* 11px – badges, legal fine print */ --text-xs: 0.75rem; /* 12px – captions, table headers */ --text-sm: 0.875rem; /* 14px – body small, form labels */ --text-md: 1rem; /* 16px – default body text */ --text-lg: 1.125rem; /* 18px – card titles, large body */ --text-xl: 1.25rem; /* 20px – modal headings */ --text-2xl: 1.5rem; /* 24px – section headings */ --text-3xl: 1.875rem; /* 30px – page headings */ --text-4xl: 2.25rem; /* 36px – hero headings */ --text-5xl: 3rem; /* 48px – display / dashboard kpi */ /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line heights */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* Semantic type aliases */ --type-display: var(--text-5xl); /* Dashboard KPI numbers */ --type-h1: var(--text-3xl); /* Page title */ --type-h2: var(--text-2xl); /* Section title */ --type-h3: var(--text-xl); /* Card title */ --type-h4: var(--text-lg); /* Subsection title */ --type-body: var(--text-md); /* Body copy */ --type-body-sm: var(--text-sm); /* Small body copy */ --type-label: var(--text-sm); /* Form labels */ --type-caption: var(--text-xs); /* Table headers, captions*/ --type-badge: var(--text-2xs); /* Badges, tags */ --type-code: var(--text-sm); /* Monospace code */ } /* -------------------------------------------------------------------------- LAYER 0-F BORDER RADIUS SYSTEM -------------------------------------------------------------------------- */ :root { --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; /* Semantic radius aliases */ --radius-badge: var(--radius-full); /* Pill badges / tags */ --radius-btn: var(--radius-md); /* Buttons */ --radius-input: var(--radius-md); /* Form inputs */ --radius-card: var(--radius-xl); /* Cards */ --radius-modal: var(--radius-xl); /* Modals */ --radius-avatar: var(--radius-full); /* User avatars */ --radius-icon: var(--radius-md); /* Icon containers */ --radius-tooltip: var(--radius-sm); /* Tooltips */ --radius-logo: var(--radius-lg); /* Logo card */ } /* -------------------------------------------------------------------------- LAYER 0-G SHADOW SYSTEM 5-level elevation stack + semantic aliases -------------------------------------------------------------------------- */ :root { /* Elevation levels */ --shadow-0: none; --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.08); --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.10); --shadow-3: 0 4px 8px -2px rgba(0, 0, 0, 0.18), 0 2px 4px -2px rgba(0, 0, 0, 0.10); --shadow-4: 0 12px 24px -4px rgba(0, 0, 0, 0.28), 0 6px 12px -4px rgba(0, 0, 0, 0.14); --shadow-5: 0 24px 48px -12px rgba(0, 0, 0, 0.40), 0 12px 24px -8px rgba(0, 0, 0, 0.20); /* Dark-surface shadows (stronger contrast on dark backgrounds) */ --shadow-dark-1: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --shadow-dark-2: 0 2px 6px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.25); --shadow-dark-3: 0 6px 14px -2px rgba(0, 0, 0, 0.40), 0 2px 6px -2px rgba(0, 0, 0, 0.25); --shadow-dark-4: 0 16px 32px -4px rgba(0, 0, 0, 0.55), 0 6px 14px -4px rgba(0, 0, 0, 0.30); --shadow-dark-5: 0 32px 64px -16px rgba(0, 0, 0, 0.65), 0 16px 32px -8px rgba(0, 0, 0, 0.40); /* Brand glow shadows */ --shadow-brand-sm: 0 0 12px rgba(79, 70, 229, 0.25); --shadow-brand: 0 0 24px rgba(79, 70, 229, 0.35); --shadow-brand-lg: 0 0 40px rgba(79, 70, 229, 0.45); --shadow-success: 0 0 16px rgba(16, 185, 129, 0.30); --shadow-danger: 0 0 16px rgba(239, 68, 68, 0.30); /* White card shadows */ --shadow-card-white: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-card-raised: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10); /* Semantic shadow aliases */ --shadow-sm: var(--shadow-dark-1); --shadow-md: var(--shadow-dark-3); --shadow-lg: var(--shadow-dark-4); --shadow-xl: var(--shadow-dark-5); --shadow-glow: var(--shadow-brand); --shadow-card: var(--shadow-dark-2); --shadow-modal: var(--shadow-dark-5); --shadow-tooltip: var(--shadow-dark-3); } /* -------------------------------------------------------------------------- LAYER 0-H BORDER WIDTH SYSTEM -------------------------------------------------------------------------- */ :root { --border-0: 0px; --border-1: 1px; --border-2: 2px; --border-4: 4px; --border-8: 8px; /* Semantic border widths */ --border-default-width: var(--border-1); --border-focus-width: var(--border-2); --border-accent-width: var(--border-2); --border-divider-width: var(--border-1); --border-strong-width: var(--border-2); } /* -------------------------------------------------------------------------- LAYER 0-I Z-INDEX SYSTEM -------------------------------------------------------------------------- */ :root { --z-base: 0; --z-above: 10; --z-sticky: 20; --z-overlay: 30; --z-header: 40; --z-sidebar: 50; --z-modal: 100; --z-toast: 110; --z-tooltip: 120; --z-splash: 99999; } /* -------------------------------------------------------------------------- LAYER 0-J MOTION & ANIMATION SYSTEM -------------------------------------------------------------------------- */ :root { /* Durations */ --duration-instant: 0ms; --duration-fast: 100ms; --duration-normal: 200ms; --duration-moderate: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; /* Easing functions */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* Snappy spring */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Semantic transition aliases */ --transition-fast: var(--duration-fast) var(--ease-in-out); --transition-normal: var(--duration-normal) var(--ease-in-out); --transition-slow: var(--duration-moderate) var(--ease-in-out); --transition-spring: var(--duration-moderate) var(--ease-spring); --transition-bounce: var(--duration-moderate) var(--ease-bounce); /* Compound transition helpers */ --transition-colors: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); --transition-transform: transform var(--transition-spring); --transition-shadow: box-shadow var(--transition-normal); --transition-all-fast: all var(--transition-fast); --transition-all-normal: all var(--transition-normal); } /* -------------------------------------------------------------------------- LAYER 0-K LAYOUT SYSTEM -------------------------------------------------------------------------- */ :root { /* Sidebar */ --sidebar-width: 260px; --sidebar-collapsed: 72px; /* Header */ --header-height: 70px; --header-height-mobile: 60px; /* Content */ --content-max-width: 1440px; --content-padding-x: var(--space-8); /* 32px */ --content-padding-y: var(--space-8); /* 32px */ --content-padding-mobile-x: var(--space-4); /* 16px */ /* Grid */ --grid-gap: var(--space-6); /* 24px */ --grid-gap-sm: var(--space-4); /* 16px */ --grid-gap-lg: var(--space-8); /* 32px */ } /* -------------------------------------------------------------------------- LAYER 0-L COMPONENT PRIMITIVE TOKENS Button, Input, Badge, Card, Table component-level tokens -------------------------------------------------------------------------- */ :root { /* ── Button ────────────────────────────────────────────────────── */ --btn-font-size: var(--text-sm); --btn-font-weight: var(--weight-semibold); --btn-letter-spacing: var(--tracking-normal); --btn-radius: var(--radius-btn); --btn-transition: var(--transition-colors), var(--transition-transform), var(--transition-shadow); /* Primary Button */ --btn-primary-bg: var(--gradient-brand); --btn-primary-color: var(--text-on-brand); --btn-primary-shadow: var(--shadow-brand-sm); --btn-primary-shadow-hover: var(--shadow-brand); /* Secondary (Ghost/Outline) Button */ --btn-outline-bg: transparent; --btn-outline-color: var(--text-primary); --btn-outline-border: var(--border-default); --btn-outline-bg-hover: var(--hover-overlay); /* Danger Button */ --btn-danger-bg: var(--gradient-danger); --btn-danger-color: var(--text-on-brand); --btn-danger-shadow: var(--shadow-danger); /* Success Button */ --btn-success-bg: var(--gradient-success); --btn-success-color: var(--text-on-brand); --btn-success-shadow: var(--shadow-success); /* Ghost Button */ --btn-ghost-bg: transparent; --btn-ghost-color: var(--text-secondary); --btn-ghost-bg-hover: var(--hover-overlay); --btn-ghost-color-hover: var(--text-primary); /* ── Input ─────────────────────────────────────────────────────── */ --input-bg: var(--surface-sunken); --input-color: var(--text-primary); --input-placeholder: var(--text-muted); --input-border: var(--border-default); --input-border-focus: var(--border-focus); --input-border-error: var(--status-danger); --input-border-success: var(--status-success); --input-radius: var(--radius-input); --input-font-size: var(--text-sm); --input-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.18); --input-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.16); /* ── Badge / Tag ───────────────────────────────────────────────── */ --badge-font-size: var(--text-xs); --badge-font-weight: var(--weight-semibold); --badge-padding: 3px 8px; --badge-radius: var(--radius-badge); /* ── Card ──────────────────────────────────────────────────────── */ --card-bg: var(--surface-raised); --card-border: var(--border-default); --card-border-hover: var(--border-strong); --card-radius: var(--radius-card); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-md); --card-padding: var(--sp-card-p); /* ── Table ─────────────────────────────────────────────────────── */ --table-header-bg: var(--surface-sunken); --table-header-color: var(--text-muted); --table-header-size: var(--text-xs); --table-header-weight: var(--weight-semibold); --table-header-spacing: var(--tracking-widest); --table-row-border: var(--border-default); --table-row-hover: var(--hover-overlay); --table-cell-size: var(--text-sm); --table-cell-color: var(--text-primary); --table-cell-padding-x: var(--space-4); --table-cell-padding-y: 14px; /* ── Modal ─────────────────────────────────────────────────────── */ --modal-bg: var(--surface-modal); --modal-border: var(--border-default); --modal-radius: var(--radius-modal); --modal-shadow: var(--shadow-modal); --modal-overlay-bg: rgba(15, 23, 42, 0.80); --modal-overlay-blur: blur(4px); /* ── Toast ─────────────────────────────────────────────────────── */ --toast-bg: var(--surface-raised); --toast-border: var(--border-default); --toast-shadow: var(--shadow-lg); --toast-radius: var(--radius-lg); --toast-font-size: var(--text-sm); /* ── Navigation ────────────────────────────────────────────────── */ --nav-item-color: var(--text-secondary); --nav-item-color-active: var(--text-on-brand); --nav-item-bg-hover: var(--hover-overlay); --nav-item-bg-active: var(--brand-primary); --nav-item-shadow-active: var(--shadow-brand-sm); --nav-item-radius: var(--radius-md); --nav-item-font-size: var(--text-sm); --nav-item-font-weight: var(--weight-medium); /* ── Status Tag ────────────────────────────────────────────────── */ --tag-success-bg: var(--status-success-subtle); --tag-success-color: var(--status-success-text); --tag-warning-bg: var(--status-warning-subtle); --tag-warning-color: var(--status-warning-text); --tag-danger-bg: var(--status-danger-subtle); --tag-danger-color: var(--status-danger-text); --tag-info-bg: var(--status-info-subtle); --tag-info-color: var(--status-info-text); /* ── Focus Ring ────────────────────────────────────────────────── */ --focus-ring-color: rgba(99, 102, 241, 0.55); --focus-ring-width: 3px; --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); /* Legacy compatibility aliases (used across existing component CSS) */ --bg-primary: var(--surface-base); --bg-card: var(--surface-raised); --bg-card-hover: var(--surface-overlay); --bg-sidebar: var(--surface-brand); --bg-input: var(--surface-sunken); --bg-main: var(--surface-sunken); --bg-hover: var(--surface-overlay); --accent-primary: var(--brand-primary); --accent-primary-hover: var(--brand-primary-hover); --accent-success: var(--status-success); --accent-warning: var(--status-warning); --accent-danger: var(--status-danger); --accent-purple: var(--color-violet-500); --border-color: var(--border-default); --border-subtle: var(--border-subtle); --border-focus: var(--border-focus); --gradient-primary: var(--gradient-brand); --gradient-card: var(--gradient-surface); --shadow-card: var(--shadow-dark-2); --shadow-card-hover: var(--shadow-dark-3); /* Font stack alias */ --font-stack: var(--font-sans); --radius-full: var(--radius-full); } /* ========================================================================== SECTION 0-M — REUSABLE ENTERPRISE UI COMPONENT LIBRARY Standardized classes: buttons, badges, inputs, dividers, avatars, skeleton loaders, empty states, progress bars, tooltips, chips ========================================================================== */ /* ── STANDARDIZED BUTTON SYSTEM ────────────────────────────────────────── */ /* Base button reset + common properties */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--sp-btn-py) var(--sp-btn-px); font-family: var(--font-sans); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); letter-spacing: var(--btn-letter-spacing); line-height: var(--leading-tight); border-radius: var(--btn-radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; transition: var(--btn-transition); position: relative; overflow: hidden; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; cursor: not-allowed; } .btn:active:not(:disabled) { transform: scale(0.97); } /* Button size variants */ .btn-sm { padding: var(--sp-btn-sm-py) var(--sp-btn-sm-px); font-size: var(--text-xs); border-radius: var(--radius-sm); } .btn-lg { padding: var(--sp-btn-lg-py) var(--sp-btn-lg-px); font-size: var(--text-md); border-radius: var(--radius-lg); } /* Primary — Brand gradient */ .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); border-color: transparent; box-shadow: var(--btn-primary-shadow); } .btn-primary:hover:not(:disabled) { box-shadow: var(--btn-primary-shadow-hover); opacity: 0.93; } /* Secondary — Outline */ .btn-secondary, .btn-outline { background: var(--btn-outline-bg); color: var(--btn-outline-color); border-color: var(--border-default); } .btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled) { background: var(--btn-outline-bg-hover); border-color: var(--border-strong); } /* Ghost — No background/border */ .btn-ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-color); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-color-hover); } /* Danger */ .btn-danger { background: var(--btn-danger-bg); color: var(--btn-danger-color); border-color: transparent; box-shadow: none; } .btn-danger:hover:not(:disabled) { box-shadow: var(--btn-danger-shadow); opacity: 0.92; } /* Success */ .btn-success { background: var(--btn-success-bg); color: var(--btn-success-color); border-color: transparent; } .btn-success:hover:not(:disabled) { box-shadow: var(--btn-success-shadow); opacity: 0.92; } /* Warning */ .btn-warning { background-color: var(--status-warning); color: var(--color-slate-900); border-color: transparent; } .btn-warning:hover:not(:disabled) { background-color: var(--status-warning-hover); } /* Icon-only button (square) */ .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-md); flex-shrink: 0; } .btn-icon.btn-sm { width: 28px; height: 28px; border-radius: var(--radius-sm); } .btn-icon.btn-lg { width: 44px; height: 44px; border-radius: var(--radius-lg); } /* Link-style button */ .btn-text { background: transparent; border: none; color: var(--brand-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: 0; cursor: pointer; } .btn-text:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; } /* ── STANDARDIZED BADGE / TAG SYSTEM ───────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--badge-padding); font-size: var(--badge-font-size); font-weight: var(--badge-font-weight); border-radius: var(--badge-radius); line-height: var(--leading-tight); white-space: nowrap; letter-spacing: var(--tracking-wide); } .badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background-color: currentColor; flex-shrink: 0; } /* Semantic badge variants */ .badge-success { background-color: var(--tag-success-bg); color: var(--tag-success-color); border: 1px solid var(--status-success-border); } .badge-warning { background-color: var(--tag-warning-bg); color: var(--tag-warning-color); border: 1px solid var(--status-warning-border); } .badge-danger { background-color: var(--tag-danger-bg); color: var(--tag-danger-color); border: 1px solid var(--status-danger-border); } .badge-info { background-color: var(--tag-info-bg); color: var(--tag-info-color); border: 1px solid var(--status-info-border); } .badge-neutral { background-color: var(--surface-overlay); color: var(--text-secondary); border: 1px solid var(--border-default); } .badge-brand { background-color: var(--brand-primary-subtle); color: var(--color-indigo-400); border: 1px solid var(--brand-primary-border); } /* Status tags (rectangular with straight corners) */ .status-tag { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); } .status-tag.success { background-color: var(--tag-success-bg); color: var(--tag-success-color); } .status-tag.overdue, .status-tag.danger { background-color: var(--tag-danger-bg); color: var(--tag-danger-color); } .status-tag.warning { background-color: var(--tag-warning-bg); color: var(--tag-warning-color); } .status-tag.info { background-color: var(--tag-info-bg); color: var(--tag-info-color); } /* ── STANDARDIZED FORM INPUT SYSTEM ────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .form-label { font-size: var(--type-label); font-weight: var(--weight-semibold); color: var(--text-secondary); line-height: var(--leading-snug); } .form-label-required::after { content: " *"; color: var(--status-danger); font-size: var(--text-xs); } .form-control, .form-group input, .form-group select, .form-group textarea { width: 100%; background-color: var(--input-bg); border: var(--border-default-width) solid var(--input-border); border-radius: var(--input-radius); padding: var(--sp-input-py) var(--sp-input-px); color: var(--input-color); font-family: var(--font-sans); font-size: var(--input-font-size); line-height: var(--leading-normal); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); appearance: none; -webkit-appearance: none; } .form-control::placeholder, .form-group input::placeholder, .form-group select::placeholder, .form-group textarea::placeholder { color: var(--input-placeholder); } .form-control:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--input-border-focus); box-shadow: var(--input-shadow-focus); } .form-control.error, .form-group input.error, .form-group select.error { border-color: var(--input-border-error); box-shadow: var(--input-shadow-error); } .form-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; } .form-error-text { font-size: var(--text-xs); color: var(--status-danger-text); margin-top: 2px; font-weight: var(--weight-medium); } /* ── STANDARDIZED DIVIDER ───────────────────────────────────────────────── */ .divider { width: 100%; height: var(--border-divider-width); background-color: var(--border-default); border: none; margin: var(--space-4) 0; } .divider-label { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin: var(--space-4) 0; } .divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background-color: var(--border-default); } /* ── STANDARDIZED AVATAR ────────────────────────────────────────────────── */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-avatar); background-color: var(--surface-overlay); color: var(--text-secondary); font-weight: var(--weight-semibold); font-size: var(--text-sm); overflow: hidden; flex-shrink: 0; border: 2px solid var(--border-default); } .avatar-xs { width: 24px; height: 24px; font-size: var(--text-2xs); } .avatar-sm { width: 32px; height: 32px; font-size: var(--text-xs); } .avatar-md { width: 40px; height: 40px; font-size: var(--text-sm); } .avatar-lg { width: 48px; height: 48px; font-size: var(--text-md); } .avatar-xl { width: 64px; height: 64px; font-size: var(--text-lg); } .avatar-2xl { width: 80px; height: 80px; font-size: var(--text-xl); } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ── SKELETON LOADER ────────────────────────────────────────────────────── */ @keyframes ds-skeleton-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { border-radius: var(--radius-md); background: linear-gradient( 90deg, var(--surface-overlay) 0px, var(--surface-raised) 80px, var(--surface-overlay) 160px ); background-size: 800px 100%; animation: ds-skeleton-shimmer 1.6s infinite linear; } .skeleton-text { height: 14px; border-radius: var(--radius-sm); } .skeleton-title { height: 24px; border-radius: var(--radius-md); width: 60%; } .skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-avatar); flex-shrink: 0; } .skeleton-btn { height: 36px; width: 100px; border-radius: var(--radius-btn); } .skeleton-card { height: 160px; border-radius: var(--radius-card); } /* ── EMPTY STATE COMPONENT ─────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); text-align: center; gap: var(--space-4); min-height: 240px; } .empty-state-icon { width: 56px; height: 56px; border-radius: var(--radius-xl); background-color: var(--surface-overlay); display: flex; align-items: center; justify-content: center; color: var(--text-muted); margin-bottom: var(--space-2); } .empty-state-icon svg { width: 28px; height: 28px; stroke-width: 1.5; } .empty-state-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-snug); } .empty-state-desc { font-size: var(--text-sm); color: var(--text-secondary); max-width: 360px; line-height: var(--leading-relaxed); } /* ── PROGRESS BAR ───────────────────────────────────────────────────────── */ .progress-track { width: 100%; height: 6px; background-color: var(--surface-overlay); border-radius: var(--radius-full); overflow: hidden; } .progress-bar { height: 100%; border-radius: var(--radius-full); background: var(--gradient-brand); transition: width var(--transition-slow); } .progress-bar.success { background: var(--gradient-success); } .progress-bar.danger { background: var(--gradient-danger); } .progress-bar.warning { background-color: var(--status-warning); } /* ── TOOLTIP ────────────────────────────────────────────────────────────── */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%) scale(0.92); background-color: var(--surface-tooltip); color: var(--text-primary); font-size: var(--text-xs); font-weight: var(--weight-medium); padding: var(--space-1) var(--space-3); border-radius: var(--radius-tooltip); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast), transform var(--transition-fast); z-index: var(--z-tooltip); box-shadow: var(--shadow-tooltip); } [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } /* ── ICON CONTAINER ─────────────────────────────────────────────────────── */ .icon-container { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-icon); flex-shrink: 0; } /* Sizes */ .icon-container-sm { width: 28px; height: 28px; } .icon-container-md { width: 36px; height: 36px; } .icon-container-lg { width: 44px; height: 44px; } .icon-container-xl { width: 56px; height: 56px; } /* Color variants */ .icon-container-primary { background-color: var(--brand-primary-subtle); color: var(--color-indigo-400); } .icon-container-success { background-color: var(--status-success-subtle); color: var(--status-success-text); } .icon-container-warning { background-color: var(--status-warning-subtle); color: var(--status-warning-text); } .icon-container-danger { background-color: var(--status-danger-subtle); color: var(--status-danger-text); } .icon-container-neutral { background-color: var(--surface-overlay); color: var(--text-secondary); } /* Standard icon sizes */ .icon-xs { width: 12px; height: 12px; } .icon-sm { width: 16px; height: 16px; } .icon-md { width: 20px; height: 20px; } .icon-lg { width: 24px; height: 24px; } .icon-xl { width: 32px; height: 32px; } /* ── CHIP / FILTER TAG ──────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); background-color: var(--surface-overlay); border: 1px solid var(--border-default); cursor: pointer; transition: var(--transition-colors); user-select: none; } .chip:hover { color: var(--text-primary); border-color: var(--border-strong); } .chip.active { background-color: var(--brand-primary-subtle); color: var(--color-indigo-400); border-color: var(--brand-primary-border); } .chip-close { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: inherit; opacity: 0.7; flex-shrink: 0; } .chip-close:hover { opacity: 1; } /* ── SECTION HEADER ─────────────────────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; } .section-title { font-size: var(--type-h2); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0; } .section-subtitle { font-size: var(--type-body-sm); color: var(--text-secondary); margin-top: var(--space-1); line-height: var(--leading-normal); } .section-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* ── CARD COMPONENT ─────────────────────────────────────────────────────── */ .card { background-color: var(--card-bg); border: var(--border-default-width) solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-spring); } .card-hover:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-4); } .card-title { font-size: var(--type-h4); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-tight); margin: 0; } .card-desc { font-size: var(--type-body-sm); color: var(--text-secondary); margin-top: var(--space-1); } /* Card header alias (backward compat) */ .card-header h2, .card-header h3 { font-size: var(--type-h4); font-weight: var(--weight-semibold); color: var(--text-primary); } /* ── INLINE ALERT / CALLOUT ─────────────────────────────────────────────── */ .callout { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); border-left: var(--border-4) solid; font-size: var(--text-sm); line-height: var(--leading-relaxed); } .callout-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; } .callout-info { background-color: var(--status-info-subtle); border-left-color: var(--status-info); color: var(--status-info-text); } .callout-success { background-color: var(--status-success-subtle); border-left-color: var(--status-success); color: var(--status-success-text); } .callout-warning { background-color: var(--status-warning-subtle); border-left-color: var(--status-warning); color: var(--status-warning-text); } .callout-danger { background-color: var(--status-danger-subtle); border-left-color: var(--status-danger); color: var(--status-danger-text); } /* ── UTILITY SPACING / TEXT CLASSES ─────────────────────────────────────── */ /* Text utilities */ .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-muted { color: var(--text-muted) !important; } .text-success { color: var(--status-success-text) !important; } .text-warning { color: var(--status-warning-text) !important; } .text-danger { color: var(--status-danger-text) !important; } .text-brand { color: var(--brand-primary) !important; } /* Font weight utilities */ .fw-normal { font-weight: var(--weight-normal) !important; } .fw-medium { font-weight: var(--weight-medium) !important; } .fw-semibold { font-weight: var(--weight-semibold) !important; } .fw-bold { font-weight: var(--weight-bold) !important; } .fw-extrabold { font-weight: var(--weight-extrabold)!important; } /* Font size utilities */ .text-2xs { font-size: var(--text-2xs) !important; } .text-xs { font-size: var(--text-xs) !important; } .text-sm { font-size: var(--text-sm) !important; } .text-md { font-size: var(--text-md) !important; } .text-lg { font-size: var(--text-lg) !important; } .text-xl { font-size: var(--text-xl) !important; } .text-2xl { font-size: var(--text-2xl) !important; } .text-3xl { font-size: var(--text-3xl) !important; } /* Spacing utilities (top/bottom shorthand) */ .mt-1 { margin-top: var(--space-1) !important; } .mt-2 { margin-top: var(--space-2) !important; } .mt-4 { margin-top: var(--space-4) !important; } .mt-6 { margin-top: var(--space-6) !important; } .mt-8 { margin-top: var(--space-8) !important; } .mb-1 { margin-bottom: var(--space-1) !important; } .mb-2 { margin-bottom: var(--space-2) !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .mb-6 { margin-bottom: var(--space-6) !important; } .mb-8 { margin-bottom: var(--space-8) !important; } /* Flex utilities */ .flex { display: flex !important; } .flex-col { flex-direction: column!important; } .items-center { align-items: center !important; } .justify-between { justify-content: space-between !important; } .justify-end { justify-content: flex-end !important; } .gap-1 { gap: var(--space-1) !important; } .gap-2 { gap: var(--space-2) !important; } .gap-3 { gap: var(--space-3) !important; } .gap-4 { gap: var(--space-4) !important; } .gap-6 { gap: var(--space-6) !important; } /* Gradient text */ .text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Surface utilities */ .surface-base { background-color: var(--surface-base) !important; } .surface-raised { background-color: var(--surface-raised) !important; } .surface-overlay { background-color: var(--surface-overlay) !important; } .surface-sunken { background-color: var(--surface-sunken) !important; } /* Radius utilities */ .rounded-sm { border-radius: var(--radius-sm) !important; } .rounded-md { border-radius: var(--radius-md) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-xl { border-radius: var(--radius-xl) !important; } .rounded-full { border-radius: var(--radius-full) !important; } /* Shadow utilities */ .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== END OF ENTERPRISE DESIGN SYSTEM v2.0 ========================================================================== */ /* -------------------------------------------------------------------------- ORIGINAL COMPONENT STYLES (preserved below — now powered by design tokens) -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 2. RESET & ACCESSIBILITY BASE STYLES -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; width: 100%; font-family: var(--font-stack); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Screen Reader Only Utility Class (WCAG 2.1 AA Compliant) */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .sr-only.focus-reveal:focus { position: fixed !important; top: 10px !important; left: 10px !important; z-index: 9999 !important; width: auto !important; height: auto !important; padding: 12px 20px !important; background-color: var(--accent-primary) !important; color: #FFFFFF !important; font-weight: 600 !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-lg) !important; clip: auto !important; } /* Keyboard Focus Ring Utility (WCAG 2.1 AA SC 2.4.7 Visible Focus) */ :focus-visible { outline: 2px solid var(--border-focus) !important; outline-offset: 2px !important; } /* -------------------------------------------------------------------------- 3. LAYOUT & APP CONTAINER STRUCTURE -------------------------------------------------------------------------- */ .app-container { display: flex; min-height: 100vh; width: 100%; position: relative; } /* Mobile Header Navigation Bar */ .mobile-header { display: none; height: 60px; width: 100%; background-color: var(--bg-sidebar); border-bottom: 1px solid var(--border-color); padding: 0 16px; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; z-index: 40; } .mobile-nav-toggle { background: transparent; border: none; color: var(--text-primary); cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .mobile-nav-toggle svg { width: 24px; height: 24px; } /* -------------------------------------------------------------------------- 4. SIDEBAR NAVIGATION -------------------------------------------------------------------------- */ /* ============================================================ REDESIGNED SIDEBAR NAVIGATION v2 ============================================================ */ /* Layout tokens for new sidebar */ :root { --sidebar-width-v2: 240px; --sidebar-collapsed-v2: 64px; --sidebar-bg: var(--surface-base); --sidebar-border: var(--border-color); --sidebar-header-h: 72px; --sidebar-profile-h: 64px; } /* ─── Sidebar Shell ─────────────────────────────────────── */ .sidebar { width: var(--sidebar-width-v2); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-sidebar); overflow: hidden; transition: width 280ms var(--ease-spring); will-change: width; } /* Collapsed state — triggered by JS adding .sidebar-collapsed to