/* ============================================================ CLICKSOFT — MODERN UI · DESIGN TOKENS (Window-inspired) Inspired by "Window" admin template by WRAPCODERS Signature: dark sidebar always, vivid blue accent, clean minimal cards ============================================================ */ :root { /* ---------- Brand colors (Window blue) ---------- */ --c-brand-50: #eff6ff; --c-brand-100: #dbeafe; --c-brand-200: #bfdbfe; --c-brand-300: #93c5fd; --c-brand-400: #60a5fa; --c-brand-500: #3b82f6; /* primary — Window blue */ --c-brand-600: #2563eb; --c-brand-700: #1d4ed8; --c-brand-800: #1e40af; --c-brand-900: #1e3a8a; /* ---------- Semantic ---------- */ --c-success: #10b981; --c-success-soft: #d1fae5; --c-warning: #f59e0b; --c-warning-soft: #fef3c7; --c-danger: #ef4444; --c-danger-soft: #fee2e2; --c-info: #06b6d4; --c-info-soft: #cffafe; /* ---------- Neutrals (LIGHT theme) ---------- */ --c-bg: #ffffff; /* main background — pure white like Window */ --c-surface: #ffffff; /* cards */ --c-surface-2: #f9fafb; /* hovered surface, header bg */ --c-border: #eef0f3; /* very subtle borders */ --c-border-strong: #e5e7eb; --c-text: #1f2937; /* primary text */ --c-text-soft: #6b7280; /* secondary text */ --c-text-muted:#9ca3af; /* muted */ --c-text-inverse: #ffffff; /* ---------- SIDEBAR — always dark (Window signature) ---------- */ --c-sidebar-bg: #0a0e14; --c-sidebar-bg-hover: #131822; --c-sidebar-text: #9ca3af; --c-sidebar-text-strong: #e5e7eb; --c-sidebar-text-muted: #6b7280; --c-sidebar-border: #1a1f2e; --c-sidebar-section-title: #6b7280; --c-sidebar-active-bg: var(--c-brand-500); --c-sidebar-active-text: #ffffff; /* ---------- Typography ---------- */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.875rem; /* 14 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.375rem; /* 22 */ --fs-2xl: 1.625rem; /* 26 */ --fs-3xl: 2rem; /* 32 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.2; --lh-base: 1.5; --lh-loose: 1.7; /* ---------- Spacing scale ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 2rem; --sp-8: 2.5rem; --sp-10: 3rem; --sp-12: 4rem; /* ---------- Radii (Window uses moderate rounding) ---------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px; /* ---------- Shadows (very subtle in Window) ---------- */ --sh-xs: 0 1px 2px rgba(15, 23, 42, 0.03); --sh-sm: 0 1px 3px rgba(15, 23, 42, 0.04); --sh-md: 0 4px 12px rgba(15, 23, 42, 0.06); --sh-lg: 0 10px 24px rgba(15, 23, 42, 0.08); --sh-xl: 0 20px 40px rgba(15, 23, 42, 0.12); --sh-focus: 0 0 0 3px rgba(59, 130, 246, 0.18); /* ---------- Layout ---------- */ --layout-sidebar-w: 250px; --layout-sidebar-w-collapsed: 70px; --layout-header-h: 64px; --layout-content-max: 1440px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 500ms; /* ---------- Z-index scale ---------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; color-scheme: light; } /* ============================================================ DARK THEME — applied on In dark mode, BOTH main and sidebar are dark ============================================================ */ :root[data-theme="dark"], :root.dark { --c-bg: #0a0e14; --c-surface: #111827; --c-surface-2: #1a2030; --c-border: #1f2937; --c-border-strong: #2d3748; --c-text: #f3f4f6; --c-text-soft: #9ca3af; --c-text-muted:#6b7280; --c-text-inverse: #0a0e14; --c-brand-500: #3b82f6; --c-brand-600: #60a5fa; --c-success-soft: rgba(16, 185, 129, 0.15); --c-warning-soft: rgba(245, 158, 11, 0.15); --c-danger-soft: rgba(239, 68, 68, 0.15); --c-info-soft: rgba(6, 182, 212, 0.15); --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --sh-md: 0 6px 18px rgba(0, 0, 0, 0.45); --sh-lg: 0 14px 32px rgba(0, 0, 0, 0.55); --sh-xl: 0 28px 56px rgba(0, 0, 0, 0.6); --sh-focus: 0 0 0 3px rgba(59, 130, 246, 0.35); color-scheme: dark; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }