root
131 lines
3.5 KiB
CSS
131 lines
3.5 KiB
CSS
:root {
|
|
--color-blue-50: #eff6ff;
|
|
--color-blue-100: #dbeafe;
|
|
--color-blue-200: #bfdbfe;
|
|
--color-blue-500: #2874e8;
|
|
--color-blue-600: #1b5dd8;
|
|
--color-blue-700: #174bb5;
|
|
--color-blue-800: #183d88;
|
|
--color-orange-100: #ffedd5;
|
|
--color-orange-400: #fb923c;
|
|
--color-orange-600: #ea580c;
|
|
--color-orange-700: #c2410c;
|
|
--color-navy-950: #081426;
|
|
--color-navy-900: #0d1b2e;
|
|
--color-navy-850: #11233b;
|
|
--color-navy-800: #162b46;
|
|
--color-gray-25: #fbfdff;
|
|
--color-gray-50: #f7f9fc;
|
|
--color-gray-100: #eef2f7;
|
|
--color-gray-200: #dbe3ed;
|
|
--color-gray-300: #c6d0dc;
|
|
--color-gray-500: #64748b;
|
|
--color-gray-600: #475569;
|
|
--color-gray-700: #334155;
|
|
--color-gray-800: #1e293b;
|
|
--color-gray-900: #0f172a;
|
|
--color-green-100: #dcfce7;
|
|
--color-green-700: #15803d;
|
|
--color-amber-100: #fef3c7;
|
|
--color-amber-800: #92400e;
|
|
--color-red-100: #fee2e2;
|
|
--color-red-700: #b91c1c;
|
|
--space-0: 0px;
|
|
--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-9: 36px;
|
|
--space-10: 40px;
|
|
--space-11: 44px;
|
|
--space-12: 48px;
|
|
--space-13: 52px;
|
|
--space-14: 56px;
|
|
--space-15: 60px;
|
|
--space-16: 64px;
|
|
--space-17: 68px;
|
|
--space-18: 72px;
|
|
--space-19: 76px;
|
|
--space-20: 80px;
|
|
--space-21: 84px;
|
|
--space-22: 88px;
|
|
--space-23: 92px;
|
|
--space-24: 96px;
|
|
--radius-sm: 10px;
|
|
--radius-md: 16px;
|
|
--radius-lg: 24px;
|
|
--radius-xl: 32px;
|
|
--radius-pill: 999px;
|
|
--size-touch-min: 44px;
|
|
--size-container-max: 1280px;
|
|
--duration-fast: 120ms;
|
|
--duration-standard: 160ms;
|
|
--duration-overlay: 220ms;
|
|
--easing-standard: ease;
|
|
--easing-productive: cubic-bezier(0.2, 0, 0, 1);
|
|
--font-latin: Inter Variable, Inter, Arial, sans-serif;
|
|
--font-arabic: Noto Sans Arabic, Arial, sans-serif;
|
|
--breakpoint-medium: 768px;
|
|
--breakpoint-wide: 1120px;
|
|
}
|
|
|
|
html[data-theme='light'] {
|
|
--color-canvas: var(--color-gray-25);
|
|
--color-surface: #ffffff;
|
|
--color-surface-raised: #ffffff;
|
|
--color-surface-muted: #f2f6fb;
|
|
--color-surface-strong: #e8f0fa;
|
|
--color-text: #102035;
|
|
--color-text-muted: #52647a;
|
|
--color-border: #d8e2ee;
|
|
--color-border-strong: #bdcad9;
|
|
--color-action-primary: var(--color-blue-700);
|
|
--color-action-primary-hover: var(--color-blue-800);
|
|
--color-action-conversion: var(--color-orange-700);
|
|
--color-action-conversion-hover: #9a3412;
|
|
--color-focus: #f97316;
|
|
--color-on-inverse: #f8fafc;
|
|
--color-soft-blue: #eef5ff;
|
|
--color-soft-orange: #fff7ed;
|
|
--shadow-color: rgba(8, 20, 38, 0.12);
|
|
color-scheme: light;
|
|
}
|
|
html[data-theme='dark'] {
|
|
--color-canvas: var(--color-navy-950);
|
|
--color-surface: var(--color-navy-900);
|
|
--color-surface-raised: var(--color-navy-850);
|
|
--color-surface-muted: #0b1a2d;
|
|
--color-surface-strong: #172d48;
|
|
--color-text: #eef5ff;
|
|
--color-text-muted: #adbed2;
|
|
--color-border: #263c56;
|
|
--color-border-strong: #3a536e;
|
|
--color-action-primary: #76a9ff;
|
|
--color-action-primary-hover: #9bc2ff;
|
|
--color-action-conversion: var(--color-orange-400);
|
|
--color-action-conversion-hover: #fdba74;
|
|
--color-focus: var(--color-orange-400);
|
|
--color-on-inverse: var(--color-navy-950);
|
|
--color-soft-blue: #10284a;
|
|
--color-soft-orange: #3a2015;
|
|
--shadow-color: rgba(0, 0, 0, 0.36);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|