CSS Custom Properties (змінні) — дозволяють зберігати значення і перевикористовувати їх.
1/* Оголошення на кореневому рівні (глобальні) */
2:root {
3 /* Кольори */
4 --color-primary: #3b82f6;
5 --color-secondary: #8b5cf6;
6 --color-success: #10b981;
7 --color-danger: #ef4444;
8 --color-text: #111827;
9 --color-text-muted: #6b7280;
10 --color-bg: #ffffff;
11 --color-bg-surface: #f9fafb;
12 --color-border: #e5e7eb;
13
14 /* Типографіка */
15 --font-sans: 'Inter', system-ui, sans-serif;
16 --font-mono: 'Fira Code', monospace;
17 --text-sm: 0.875rem; /* 14px */
18 --text-base: 1rem; /* 16px */
19 --text-lg: 1.125rem; /* 18px */
20 --text-xl: 1.25rem;
21 --text-2xl: 1.5rem;
22 --text-4xl: 2.25rem;
23
24 /* Відступи */
25 --space-1: 4px; --space-2: 8px; --space-3: 12px;
26 --space-4: 16px; --space-6: 24px; --space-8: 32px;
27
28 /* Ефекти */
29 --radius-sm: 4px;
30 --radius-md: 8px;
31 --radius-lg: 12px;
32 --radius-full: 9999px;
33 --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
34 --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
35 --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
36
37 /* Transitions */
38 --transition: all 0.2s ease;
39}
40
41/* Використання */