/* ===================================================================== Fasecmo — Design Token Theme ===================================================================== Centralized CSS variables powering the Tailwind design system. Light and Dark modes are toggled by the `.dark` class on . ===================================================================== */ :root { color-scheme: light; /* --- Brand / Primary --- */ --primary-50: #eef2ff; --primary-100: #e0e7ff; --primary-200: #c7d2fe; --primary-300: #a5b4fc; --primary-400: #818cf8; --primary-500: #6366f1; --primary-600: #4f46e5; --primary-700: #4338ca; --primary-800: #3730a3; --primary-900: #312e81; --primary: #4f46e5; /* --- Surfaces --- */ --surface: #ffffff; --surface-raised: #ffffff; --surface-overlay: rgba(255, 255, 255, 0.85); --surface-sunken: #f8fafc; /* --- Text / Ink --- */ --ink: #0f172a; --ink-muted: #475569; --ink-faint: #94a3b8; --ink-inverse: #ffffff; /* --- Borders / Lines --- */ --line: #e2e8f0; --line-strong: #cbd5e1; --line-subtle: #f1f5f9; /* --- Shadows --- */ --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-card-hover: 0 12px 32px -8px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-popover: 0 12px 40px -8px rgba(15, 23, 42, 0.2), 0 4px 12px rgba(15, 23, 42, 0.1); --shadow-modal: 0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 8px 24px rgba(15, 23, 42, 0.12); --shadow-glow: 0 0 0 1px rgba(79, 70, 229, 0.12), 0 0 24px rgba(79, 70, 229, 0.12); /* --- Background base --- */ --background: #f8fafc; --foreground: #0f172a; } .dark { color-scheme: dark; /* --- Brand / Primary (slightly brighter for dark) --- */ --primary-50: #eef2ff; --primary-100: #e0e7ff; --primary-200: #c7d2fe; --primary-300: #a5b4fc; --primary-400: #818cf8; --primary-500: #6366f1; --primary-600: #818cf8; --primary-700: #a5b4fc; --primary-800: #c7d2fe; --primary-900: #e0e7ff; --primary: #6366f1; /* --- Surfaces --- */ --surface: #0f172a; --surface-raised: #1e293b; --surface-overlay: rgba(15, 23, 42, 0.85); --surface-sunken: #0b1220; /* --- Text / Ink --- */ --ink: #f1f5f9; --ink-muted: #94a3b8; --ink-faint: #64748b; --ink-inverse: #0f172a; /* --- Borders / Lines --- */ --line: #1e293b; --line-strong: #334155; --line-subtle: #16203a; /* --- Shadows --- */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 16px 40px -12px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-popover: 0 20px 48px -12px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-modal: 0 28px 72px -20px rgba(0, 0, 0, 0.7), 0 8px 28px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.25), 0 0 28px rgba(99, 102, 241, 0.18); /* --- Background base --- */ --background: #0b1220; --foreground: #f1f5f9; } /* ===================================================================== Semantic helper classes (used by Tailwind theme + custom utilities) ===================================================================== */ * { border-color: var(--line); } html { -webkit-text-size-adjust: 100%; } body { background-color: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background-color: rgba(99, 102, 241, 0.25); } /* Accessible focus ring */ :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 4px; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); background-clip: content-box; }