/* ========================================= SHKALI — DESIGN SYSTEM v2.0 Premium fintech tier — Sora + Rubik + JetBrains Mono ========================================= */ /* Font imports moved to — no @import here for performance */ /* ========================================= DESIGN TOKENS — LIGHT MODE ========================================= */ :root { /* ---- Background layers ---- */ --color-bg: #F2F4F8; --color-bg-alt: #E8EBF2; --color-surface: #FFFFFF; --color-surface-glass: rgba(255, 255, 255, 0.75); --color-surface-2: #F8F9FC; --color-surface-hover: #F3F5FA; /* ---- Text ---- */ --color-text: #0D1424; --color-text-soft: #1E2A3E; --color-muted: #5A6680; --color-muted-light: #8A95B0; /* ---- Borders ---- */ --color-border: #DDE1EE; --color-border-hover: #C8CEDF; --color-border-focus: #4F6AFF; /* ---- Primary brand — Electric Indigo ---- */ --color-primary: #3B4EFF; --color-primary-dark: #2535E8; --color-primary-deeper: #1A25CC; --color-primary-light: rgba(59, 78, 255, 0.06); --color-primary-glow: rgba(59, 78, 255, 0.14); --color-primary-rgb: 59, 78, 255; --color-accent: #8B5CF6; /* ---- Money / Positive — Jade Mint ---- */ --color-money: #00A86B; --color-money-dark: #007D4F; --color-money-bg: rgba(0, 168, 107, 0.08); --color-money-rgb: 0, 168, 107; /* ---- Warning / Amber ---- */ --color-warning: #D97706; --color-warning-bg: rgba(217, 119, 6, 0.08); --color-warning-rgb: 217, 119, 6; /* ---- Danger / Rose ---- */ --color-danger: #E8354A; --color-danger-bg: rgba(232, 53, 74, 0.07); --color-danger-rgb: 232, 53, 74; /* ---- Border radius ---- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-full: 9999px; /* ---- Shadows ---- */ --shadow-xs: 0 1px 2px rgba(13, 20, 36, 0.04); --shadow-sm: 0 2px 6px rgba(13, 20, 36, 0.06); --shadow-md: 0 4px 14px rgba(13, 20, 36, 0.08), 0 0 0 1px rgba(13, 20, 36, 0.03); --shadow-lg: 0 12px 40px rgba(13, 20, 36, 0.10), 0 0 0 1px rgba(13, 20, 36, 0.04); --shadow-glow: 0 4px 20px rgba(var(--color-primary-rgb), 0.16); --shadow-money-glow: 0 4px 20px rgba(var(--color-money-rgb), 0.14); /* ---- Layout ---- */ --sidebar-width: 260px; --sidebar-collapsed-width: 62px; --seo-panel-width: 320px; --header-height: 56px; /* ---- Typography ---- */ --font-display: 'Sora', 'Rubik', system-ui, sans-serif; --font-family: 'Rubik', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-linear: linear; --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; --transition: all var(--duration-normal) var(--ease-out); /* ---- Sidebar gradients ---- */ --sidebar-bg: #FFFFFF; --sidebar-border: var(--color-border); /* ---- Result card premium gradient ---- */ --result-accent-gradient: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-money-rgb), 0.06) 100%); --calendar-filter: opacity(0.5); } /* ========================================= DESIGN TOKENS — DARK MODE ========================================= */ :root[data-theme="dark"] { /* ---- Background layers ---- */ --color-bg: #070A14; --color-bg-alt: #0D1121; --color-surface: #111828; --color-surface-glass: rgba(17, 24, 40, 0.8); --color-surface-2: #161D2E; --color-surface-hover: #1A2235; /* ---- Text ---- */ --color-text: #EEF2FF; --color-text-soft: #C8D2EA; --color-muted: #7A86A4; --color-muted-light: #4E5A78; /* ---- Borders ---- */ --color-border: #1E2840; --color-border-hover: #28354E; --color-border-focus: #6278FF; /* ---- Primary brand — Lightened for dark mode ---- */ --color-primary: #6E7DFF; --color-primary-dark: #4A5DF8; --color-primary-deeper: #3B4EFF; --color-primary-light: rgba(110, 125, 255, 0.12); --color-primary-glow: rgba(110, 125, 255, 0.25); --color-primary-rgb: 110, 125, 255; --color-accent: #A78BFA; /* ---- Money — Bright Jade ---- */ --color-money: #00D68F; --color-money-dark: #00B077; --color-money-bg: rgba(0, 214, 143, 0.10); --color-money-rgb: 0, 214, 143; /* ---- Warning ---- */ --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.10); --color-warning-rgb: 251, 191, 36; /* ---- Danger ---- */ --color-danger: #FB4C60; --color-danger-bg: rgba(251, 76, 96, 0.10); --color-danger-rgb: 251, 76, 96; /* ---- Shadows (adjusted for dark) ---- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.02); --shadow-lg: 0 14px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03); --shadow-glow: 0 4px 24px rgba(var(--color-primary-rgb), 0.22); --shadow-money-glow: 0 4px 20px rgba(var(--color-money-rgb), 0.18); /* ---- Sidebar ---- */ --sidebar-bg: #0D1020; --sidebar-border: var(--color-border); /* ---- Result card gradient ---- */ --result-accent-gradient: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12) 0%, rgba(var(--color-money-rgb), 0.08) 100%); --calendar-filter: invert(1) opacity(0.6); }