/* * Design Tokens — Single source of truth for the Customer Portal visual system. * * Light theme (default) inspired by mcp.alaio.dev * Dark theme via [data-theme="dark"] on * * This file MUST be loaded FIRST (before project.css and all other CSS). */ :root { /* ─── Colors: Primary (Indigo/Violet — matching mcp.alaio.dev) ─── */ --color-primary: #6d28d9; --color-primary-hover: #5b21b6; --color-primary-active: #4c1d95; --color-primary-light: #8b5cf6; --color-primary-muted: rgba(109, 40, 217, 0.1); /* ─── Colors: Secondary ─── */ --color-secondary: #8b5cf6; --color-secondary-hover: #7c3aed; /* ─── Colors: Status ─── */ --color-success: #10b981; --color-success-hover: #059669; --color-success-light: #d1fae5; --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-danger-light: #fee2e2; --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-light: #fef3c7; --color-info: #0ea5e9; --color-info-light: #e0f2fe; --color-cyan: #06b6d4; /* ─── Colors: Neutrals (Light theme — Slate palette) ─── */ --color-text-primary: #1e293b; --color-text-secondary: #334155; --color-text-tertiary: #475569; --color-text-muted: #64748b; --color-text-disabled: #94a3b8; --color-text-faint: #cbd5e1; --color-white: #ffffff; /* ─── Surfaces (Light theme) ─── */ --surface-body: #f8fafc; --surface-body-alt: #f1f5f9; --surface-base: #ffffff; --surface-raised: #ffffff; --surface-card: #ffffff; --surface-card-hover: #f8fafc; --surface-card-solid: #ffffff; --surface-input: #ffffff; --surface-overlay: #ffffff; --surface-sidebar: #1e293b; --surface-hover: rgba(0, 0, 0, 0.04); --surface-hover-strong: rgba(0, 0, 0, 0.06); --surface-subtle: rgba(0, 0, 0, 0.02); /* ─── Borders (Light theme) ─── */ --border-default: #e2e8f0; --border-subtle: #f1f5f9; --border-strong: #cbd5e1; --border-input: #d1d5db; --border-focus: var(--color-primary); /* ─── Gradients ─── */ --gradient-body: var(--surface-body); --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); --gradient-success: linear-gradient(135deg, var(--color-success) 0%, #34d399 100%); --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, #f87171 100%); --gradient-primary-muted: linear-gradient(135deg, var(--color-primary-muted) 0%, rgba(139, 92, 246, 0.08) 100%); --gradient-info-muted: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(56, 189, 248, 0.06) 100%); /* ─── Border Radius ─── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 50px; --radius-circle: 50%; /* ─── Shadows (Light theme — subtle, professional) ─── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 50px -12px rgba(0, 0, 0, 0.12); --shadow-hover: 0 10px 30px -8px rgba(0, 0, 0, 0.1); --shadow-primary: 0 4px 15px rgba(109, 40, 217, 0.25); --shadow-glow: 0 0 20px rgba(109, 40, 217, 0.1); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02); /* ─── Backdrop Blur ─── */ --blur-sm: blur(8px); --blur-md: blur(12px); --blur-lg: blur(16px); --blur-xl: blur(20px); /* ─── Spacing ─── */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1rem; --space-xl: 1.5rem; --space-2xl: 2rem; --space-3xl: 3rem; /* ─── Typography (system-ui stack — matching mcp.alaio.dev) ─── */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.85rem; --font-size-base: 0.95rem; --font-size-md: 1rem; --font-size-lg: 1.15rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ─── Layout ─── */ --layout-sidebar-width: 280px; --layout-sidebar-collapsed: 80px; --layout-navbar-height: 52px; --layout-max-width: 1600px; /* ─── Transitions ─── */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; --transition-spring: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-all: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease; /* ─── Z-index ─── */ --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 1000; --z-navbar: 1010; --z-overlay: 1020; --z-modal: 1050; --z-tooltip: 1070; } /* ─── Dark Theme ─── */ [data-theme="dark"] { --color-primary: #8b5cf6; --color-primary-hover: #7c3aed; --color-primary-active: #6d28d9; --color-primary-light: #a78bfa; --color-primary-muted: rgba(139, 92, 246, 0.15); --color-success-light: #34d399; --color-danger-light: #f87171; --color-warning-light: #fbbf24; --color-info-light: #38bdf8; --color-text-primary: #f1f5f9; --color-text-secondary: #e2e8f0; --color-text-tertiary: #cbd5e1; --color-text-muted: #94a3b8; --color-text-disabled: #64748b; --color-text-faint: #475569; --surface-body: #0f172a; --surface-body-alt: #1e1b4b; --surface-base: #1e293b; --surface-raised: #1e293b; --surface-card: rgba(30, 41, 59, 0.6); --surface-card-hover: rgba(30, 41, 59, 0.8); --surface-card-solid: rgba(30, 41, 59, 0.7); --surface-input: rgba(15, 23, 42, 0.6); --surface-overlay: rgba(15, 23, 42, 0.95); --surface-sidebar: rgba(15, 23, 42, 0.95); --surface-hover: rgba(255, 255, 255, 0.06); --surface-hover-strong: rgba(255, 255, 255, 0.08); --surface-subtle: rgba(255, 255, 255, 0.05); --border-default: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.1); --border-input: rgba(148, 163, 184, 0.2); --gradient-body: linear-gradient(135deg, var(--surface-body) 0%, var(--surface-body-alt) 100%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4); --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.35); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2); } /* ─── Reduced Motion ─── */ @media (prefers-reduced-motion: reduce) { :root { --blur-sm: none; --blur-md: none; --blur-lg: none; --blur-xl: none; --transition-fast: none; --transition-normal: none; --transition-slow: none; --transition-spring: none; --transition-all: none; } }