CSS Variables & Custom Properties

1/* Declaration with -- prefix */
2:root {
3  --primary-color: #3b82f6;
4  --secondary-color: #64748b;
5  --success-color: #10b981;
6  --warning-color: #f59e0b;
7  --error-color: #ef4444;
8  
9  --base-font-size: 16px;
10  --line-height: 1.6;
11  --border-radius: 8px;
12  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
13  
14  --spacing-xs: 0.5rem;
15  --spacing-sm: 1rem;
16  --spacing-md: 1.5rem;
17  --spacing-lg: 2rem;
18  --spacing-xl: 3rem;
19}
20
21/* Usage with var() function */
22.button {
23  background: var(--primary-color);
24  color: white;
25  padding: var(--spacing-sm) var(--spacing-md);
26  border-radius: var(--border-radius);
27  box-shadow: var(--box-shadow);
28  font-size: var(--base-font-size);
29  line-height: var(--line-height);
30}
31
32.card {
33  background: white;
34  padding: var(--spacing-lg);
35  border-radius: var(--border-radius);
36  box-shadow: var(--box-shadow);
37  margin-bottom: var(--spacing-md);
38}

1/* var() with fallback values */
2.element {
3  /* Single fallback */
4  color: var(--text-color, #1a1a1a);
5  
6  /* Multiple fallbacks */
7  font-family: var(--custom-font, var(--system-font, system-ui));
8  
9  /* Complex fallbacks */
10  background: var(--gradient-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
11  
12  /* Nested var() functions */
13  padding: var(--component-padding, var(--default-padding, 1rem));
14  
15  /* Fallback for calculations */
16  width: var(--custom-width, calc(100% - 2rem));
17}
18
19/* Conditional values using invalid fallbacks */
20.responsive-element {
21  /* Desktop first approach */
22  font-size: var(--mobile-font-size, 1.2rem);
23}
24
25@media (max-width: 768px) {
26  .responsive-element {
27    --mobile-font-size: 1rem;
28  }
29}

1/* Global variables */
2:root {
3  --primary: #3b82f6;
4  --text: #1e293b;
5  --background: #ffffff;
6}
7
8/* Component-level variables */
9.card {
10  --card-padding: 2rem;
11  --card-border: 1px solid #e5e7eb;
12  
13  padding: var(--card-padding);
14  border: var(--card-border);
15  background: var(--background);
16  color: var(--text);
17}
18
19/* Inherited and overridden variables */
20.card.featured {
21  --card-padding: 3rem;
22  --card-border: 2px solid var(--primary);
23  --background: #f8fafc;
24}
25
26.card.compact {
27  --card-padding: 1rem;
28}
29
30/* Scoped variables */
31.theme-dark {
32  --text: #f8fafc;
33  --background: #1e293b;
34  --primary: #60a5fa;
35}
36
37.theme-dark .card {
38  /* Inherits updated variables from parent */
39  background: var(--background);
40  color: var(--text);
41}

1/* Global scope - available everywhere */
2:root {
3  --global-color: #3b82f6;
4  --global-spacing: 1rem;
5}
6
7/* Element scope - only available to element and children */
8.component {
9  --local-color: #10b981;
10  --local-spacing: 0.5rem;
11  
12  color: var(--local-color);
13  padding: var(--local-spacing);
14}
15
16.component .child {
17  /* Can access parent's local variables */
18  border-color: var(--local-color);
19  /* And global variables */
20  margin: var(--global-spacing);
21}
22
23.other-component {
24  /* Cannot access .component's local variables */
25  /* color: var(--local-color); -- This won't work */
26  
27  /* But can access global variables */
28  color: var(--global-color);
29}
30
31/* Media query scope */
32@media (max-width: 768px) {
33  :root {
34    --global-spacing: 0.75rem; /* Override global variable */
35  }
36  
37  .mobile-specific {
38    --mobile-font: 0.9rem; /* Local to media query */
39    font-size: var(--mobile-font);
40  }
41}
42
43/* Container-specific scope */
44.container {
45  --container-width: 1200px;
46}
47
48.container.narrow {
49  --container-width: 800px;
50}
51
52.container .content {
53  max-width: var(--container-width);
54  margin: 0 auto;
55}

1/* Invalid custom property values */
2.element {
3  --invalid-color: red blue; /* Invalid - will be ignored */
4  --valid-color: #ff0000;
5  
6  /* Browser will use fallback for invalid values */
7  color: var(--invalid-color, var(--valid-color));
8}
9
10/* Type checking with custom properties */
11.typed-element {
12  /* These work fine */
13  --number: 42;
14  --length: 100px;
15  --color: #3b82f6;
16  --string: "hello world";
17  
18  /* Usage determines validity */
19  font-size: calc(var(--number) * 1px); /* Valid - creates 42px */
20  width: var(--length); /* Valid - 100px */
21  color: var(--color); /* Valid - #3b82f6 */
22  /* content: var(--string); -- Valid in content property */
23}
24
25/* Debugging custom properties */
26.debug {
27  /* Use initial to reset custom properties */
28  --debug-color: initial;
29  
30  /* Use inherit to force inheritance */
31  --inherited-value: inherit;
32  
33  /* Use unset for natural behavior */
34  --natural-value: unset;
35}

1/* Base theme variables */
2:root {
3  --theme-bg-primary: #ffffff;
4  --theme-bg-secondary: #f8fafc;
5  --theme-bg-tertiary: #f1f5f9;
6  
7  --theme-text-primary: #0f172a;
8  --theme-text-secondary: #475569;
9  --theme-text-tertiary: #64748b;
10  
11  --theme-border: #e2e8f0;
12  --theme-border-hover: #cbd5e1;
13  
14  --theme-accent: #3b82f6;
15  --theme-accent-hover: #2563eb;
16  --theme-accent-bg: #eff6ff;
17  
18  --theme-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
19  --theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
20}
21
22/* Dark theme overrides */
23[data-theme="dark"] {
24  --theme-bg-primary: #0f172a;
25  --theme-bg-secondary: #1e293b;
26  --theme-bg-tertiary: #334155;
27  
28  --theme-text-primary: #f8fafc;
29  --theme-text-secondary: #e2e8f0;
30  --theme-text-tertiary: #cbd5e1;
31  
32  --theme-border: #475569;
33  --theme-border-hover: #64748b;
34  
35  --theme-accent: #60a5fa;
36  --theme-accent-hover: #3b82f6;
37  --theme-accent-bg: #1e3a8a;
38  
39  --theme-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
40  --theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
41}
42
43/* System preference detection */
44@media (prefers-color-scheme: dark) {
45  :root {
46    --theme-bg-primary: #0f172a;
47    --theme-bg-secondary: #1e293b;
48    --theme-text-primary: #f8fafc;
49    --theme-text-secondary: #e2e8f0;
50    /* ... other dark theme variables */
51  }
52}
53
54/* Component styling using theme variables */
55body {
56  background: var(--theme-bg-primary);
57  color: var(--theme-text-primary);
58  transition: background 0.3s ease, color 0.3s ease;
59}
60
61.card {
62  background: var(--theme-bg-secondary);
63  border: 1px solid var(--theme-border);
64  box-shadow: var(--theme-shadow);
65  color: var(--theme-text-primary);
66}
67
68.card:hover {
69  border-color: var(--theme-border-hover);
70  box-shadow: var(--theme-shadow-lg);
71}
72
73.button {
74  background: var(--theme-accent);
75  color: var(--theme-bg-primary);
76  border: 1px solid var(--theme-accent);
77}
78
79.button:hover {
80  background: var(--theme-accent-hover);
81}
82
83.button.secondary {
84  background: var(--theme-accent-bg);
85  color: var(--theme-accent);
86}

1/* Base brand system */
2:root {
3  --brand-primary: #3b82f6;
4  --brand-secondary: #64748b;
5  --brand-success: #10b981;
6  --brand-warning: #f59e0b;
7  --brand-danger: #ef4444;
8}
9
10/* Blue theme (default) */
11.theme-blue {
12  --brand-primary: #3b82f6;
13  --brand-primary-light: #dbeafe;
14  --brand-primary-dark: #1e40af;
15  --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
16}
17
18/* Green theme */
19.theme-green {
20  --brand-primary: #10b981;
21  --brand-primary-light: #d1fae5;
22  --brand-primary-dark: #047857;
23  --brand-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
24}
25
26/* Purple theme */
27.theme-purple {
28  --brand-primary: #8b5cf6;
29  --brand-primary-light: #ede9fe;
30  --brand-primary-dark: #7c3aed;
31  --brand-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
32}
33
34/* Orange theme */
35.theme-orange {
36  --brand-primary: #f97316;
37  --brand-primary-light: #fed7aa;
38  --brand-primary-dark: #ea580c;
39  --brand-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
40}
41
42/* Components using brand variables */
43.hero {
44  background: var(--brand-gradient);
45}
46
47.badge {
48  background: var(--brand-primary-light);
49  color: var(--brand-primary-dark);
50  border: 1px solid var(--brand-primary);
51}
52
53.progress-bar {
54  background: var(--brand-primary);
55}

1/* Context-based theme switching */
2.error-context {
3  --context-color: var(--brand-danger);
4  --context-bg: #fef2f2;
5  --context-border: #fecaca;
6}
7
8.success-context {
9  --context-color: var(--brand-success);
10  --context-bg: #f0fdf4;
11  --context-border: #bbf7d0;
12}
13
14.warning-context {
15  --context-color: var(--brand-warning);
16  --context-bg: #fefbeb;
17  --context-border: #fde68a;
18}
19
20.info-context {
21  --context-color: var(--brand-primary);
22  --context-bg: #eff6ff;
23  --context-border: #dbeafe;
24}
25
26/* Contextual components */
27.alert {
28  background: var(--context-bg);
29  color: var(--context-color);
30  border: 1px solid var(--context-border);
31  padding: 1rem;
32  border-radius: 0.5rem;
33}
34
35.alert .icon {
36  color: var(--context-color);
37}
38
39.alert .button {
40  background: var(--context-color);
41  border-color: var(--context-color);
42}
43
44/* Size variations using custom properties */
45.component {
46  --size-multiplier: 1;
47  --base-padding: 1rem;
48  --base-font-size: 1rem;
49  --base-border-radius: 0.5rem;
50  
51  padding: calc(var(--base-padding) * var(--size-multiplier));
52  font-size: calc(var(--base-font-size) * var(--size-multiplier));
53  border-radius: calc(var(--base-border-radius) * var(--size-multiplier));
54}
55
56.component.small { --size-multiplier: 0.75; }
57.component.large { --size-multiplier: 1.25; }
58.component.xl { --size-multiplier: 1.5; }

1/* Component-based theming similar to styled-components */
2.styled-button {
3  /* Default theme */
4  --btn-bg: var(--brand-primary);
5  --btn-color: white;
6  --btn-border: var(--brand-primary);
7  --btn-hover-bg: var(--brand-primary-dark);
8  --btn-hover-border: var(--brand-primary-dark);
9  --btn-padding-x: 1.5rem;
10  --btn-padding-y: 0.75rem;
11  --btn-font-weight: 500;
12  --btn-border-radius: 0.5rem;
13  
14  background: var(--btn-bg);
15  color: var(--btn-color);
16  border: 1px solid var(--btn-border);
17  padding: var(--btn-padding-y) var(--btn-padding-x);
18  font-weight: var(--btn-font-weight);
19  border-radius: var(--btn-border-radius);
20  cursor: pointer;
21  transition: all 0.2s ease;
22}
23
24.styled-button:hover {
25  background: var(--btn-hover-bg);
26  border-color: var(--btn-hover-border);
27}
28
29/* Variant modifications */
30.styled-button.outline {
31  --btn-bg: transparent;
32  --btn-color: var(--brand-primary);
33  --btn-hover-bg: var(--brand-primary);
34  --btn-hover-color: white;
35}
36
37.styled-button.ghost {
38  --btn-bg: transparent;
39  --btn-border: transparent;
40  --btn-color: var(--brand-primary);
41  --btn-hover-bg: var(--brand-primary-light);
42}
43
44.styled-button.danger {
45  --btn-bg: var(--brand-danger);
46  --btn-border: var(--brand-danger);
47  --btn-hover-bg: #dc2626;
48  --btn-hover-border: #dc2626;
49}
50
51/* Size variations */
52.styled-button.sm {
53  --btn-padding-x: 1rem;
54  --btn-padding-y: 0.5rem;
55  --btn-font-size: 0.875rem;
56}
57
58.styled-button.lg {
59  --btn-padding-x: 2rem;
60  --btn-padding-y: 1rem;
61  --btn-font-size: 1.125rem;
62}

1/* Basic arithmetic with variables */
2:root {
3  --base-unit: 1rem;
4  --multiplier: 1.5;
5  --container-width: 1200px;
6  --sidebar-width: 300px;
7  --gap: 2rem;
8}
9
10.layout {
11  --main-width: calc(var(--container-width) - var(--sidebar-width) - var(--gap));
12  
13  display: grid;
14  grid-template-columns: var(--sidebar-width) var(--main-width);
15  gap: var(--gap);
16  max-width: var(--container-width);
17}
18
19.typography {
20  --h1-size: calc(var(--base-unit) * 2.5);
21  --h2-size: calc(var(--base-unit) * 2);
22  --h3-size: calc(var(--base-unit) * 1.75);
23  --h4-size: calc(var(--base-unit) * 1.5);
24  --body-size: var(--base-unit);
25  --small-size: calc(var(--base-unit) * 0.875);
26}
27
28h1 { font-size: var(--h1-size); }
29h2 { font-size: var(--h2-size); }
30h3 { font-size: var(--h3-size); }
31h4 { font-size: var(--h4-size); }
32p { font-size: var(--body-size); }
33small { font-size: var(--small-size); }

1/* Fluid typography using calc() and viewport units */
2:root {
3  --min-font-size: 16;
4  --max-font-size: 24;
5  --min-viewport: 320;
6  --max-viewport: 1200;
7  
8  /* Calculated fluid font size */
9  --font-size: calc(
10    var(--min-font-size) * 1px + 
11    (var(--max-font-size) - var(--min-font-size)) * 
12    (100vw - var(--min-viewport) * 1px) / 
13    (var(--max-viewport) - var(--min-viewport))
14  );
15}
16
17body {
18  font-size: var(--font-size);
19  line-height: calc(var(--font-size) * 1.6);
20}
21
22/* Responsive spacing system */
23:root {
24  --space-unit: 1rem;
25  --space-ratio: 1.618; /* Golden ratio */
26  
27  --space-xs: calc(var(--space-unit) / (var(--space-ratio) * var(--space-ratio)));
28  --space-sm: calc(var(--space-unit) / var(--space-ratio));
29  --space-md: var(--space-unit);
30  --space-lg: calc(var(--space-unit) * var(--space-ratio));
31  --space-xl: calc(var(--space-unit) * var(--space-ratio) * var(--space-ratio));
32  --space-xxl: calc(var(--space-unit) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio));
33}
34
35/* Dynamic grid calculations */
36.responsive-grid {
37  --min-item-width: 300px;
38  --gap: 1.5rem;
39  --grid-columns: max(1, floor((100% + var(--gap)) / (var(--min-item-width) + var(--gap))));
40  
41  display: grid;
42  grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width), 1fr));
43  gap: var(--gap);
44}
45
46/* Container-based responsive design */
47.container {
48  --container-padding: clamp(1rem, 5vw, 3rem);
49  --content-max-width: min(90vw, 1200px);
50  
51  width: 100%;
52  max-width: var(--content-max-width);
53  margin: 0 auto;
54  padding: 0 var(--container-padding);
55}

1/* Advanced grid layout with calculations */
2.dashboard-layout {
3  --header-height: 4rem;
4  --sidebar-width: 16rem;
5  --footer-height: 3rem;
6  --gap: 1rem;
7  
8  --main-height: calc(100vh - var(--header-height) - var(--footer-height));
9  --content-width: calc(100vw - var(--sidebar-width) - var(--gap) * 2);
10  
11  display: grid;
12  grid-template-areas: 
13    "sidebar header"
14    "sidebar main"
15    "sidebar footer";
16  grid-template-columns: var(--sidebar-width) 1fr;
17  grid-template-rows: var(--header-height) 1fr var(--footer-height);
18  gap: var(--gap);
19  height: 100vh;
20}
21
22/* Card layout with dynamic sizing */
23.card-container {
24  --card-min-width: 280px;
25  --card-max-width: 400px;
26  --card-gap: 1.5rem;
27  --available-width: calc(100% - var(--card-gap) * 2);
28  
29  --cards-per-row: max(1, floor(var(--available-width) / var(--card-min-width)));
30  --card-width: min(
31    var(--card-max-width),
32    calc((var(--available-width) - (var(--cards-per-row) - 1) * var(--card-gap)) / var(--cards-per-row))
33  );
34  
35  display: flex;
36  flex-wrap: wrap;
37  gap: var(--card-gap);
38}
39
40.card-container .card {
41  flex: 0 0 var(--card-width);
42}
43
44/* Aspect ratio calculations */
45.media-container {
46  --aspect-ratio: 16/9;
47  --max-height: 60vh;
48  --calculated-height: calc(var(--width) / var(--aspect-ratio));
49  
50  width: 100%;
51  height: min(var(--calculated-height), var(--max-height));
52  position: relative;
53  overflow: hidden;
54}
55
56/* Dynamic spacing based on content */
57.content-spacing {
58  --content-length: attr(data-content-length number, 100);
59  --base-spacing: 1rem;
60  --spacing-multiplier: calc(1 + (var(--content-length) - 100) / 1000);
61  
62  margin-bottom: calc(var(--base-spacing) * var(--spacing-multiplier));
63}

1/* Dynamic animations with custom properties */
2:root {
3  --animation-speed: 1;
4  --animation-delay-base: 0.1s;
5  --ease-curve: cubic-bezier(0.4, 0, 0.2, 1);
6}
7
8.animated-element {
9  --element-index: 1;
10  --calculated-delay: calc(var(--animation-delay-base) * var(--element-index));
11  --calculated-duration: calc(0.3s / var(--animation-speed));
12  
13  animation-delay: var(--calculated-delay);
14  animation-duration: var(--calculated-duration);
15  animation-timing-function: var(--ease-curve);
16}
17
18/* Staggered animation system */
19.stagger-container {
20  --stagger-delay: 0.1s;
21}
22
23.stagger-item:nth-child(1) { --item-index: 1; }
24.stagger-item:nth-child(2) { --item-index: 2; }
25.stagger-item:nth-child(3) { --item-index: 3; }
26.stagger-item:nth-child(4) { --item-index: 4; }
27.stagger-item:nth-child(5) { --item-index: 5; }
28
29.stagger-item {
30  --calculated-delay: calc(var(--stagger-delay) * var(--item-index));
31  animation-delay: var(--calculated-delay);
32}
33
34/* Interactive scaling calculations */
35.interactive-scale {
36  --base-scale: 1;
37  --hover-multiplier: 1.05;
38  --active-multiplier: 0.95;
39  --transition-duration: 0.2s;
40  
41  transform: scale(var(--base-scale));
42  transition: transform var(--transition-duration) ease;
43}
44
45.interactive-scale:hover {
46  --current-scale: calc(var(--base-scale) * var(--hover-multiplier));
47  transform: scale(var(--current-scale));
48}
49
50.interactive-scale:active {
51  --current-scale: calc(var(--base-scale) * var(--active-multiplier));
52  transform: scale(var(--current-scale));
53}
54
55/* Progress calculations */
56.progress-bar {
57  --progress: 0; /* 0-100 */
58  --bar-width: calc(var(--progress) * 1%);
59  --hue: calc(var(--progress) * 1.2); /* 0 = red, 120 = green */
60  
61  width: 100%;
62  height: 8px;
63  background: #e5e7eb;
64  border-radius: 4px;
65  overflow: hidden;
66}
67
68.progress-bar::before {
69  content: '';
70  display: block;
71  width: var(--bar-width);
72  height: 100%;
73  background: hsl(var(--hue), 70%, 50%);
74  transition: width 0.3s ease, background-color 0.3s ease;
75}

1/* Comprehensive design token system */
2:root {
3  /* Color tokens */
4  --color-primary-50: #eff6ff;
5  --color-primary-100: #dbeafe;
6  --color-primary-200: #bfdbfe;
7  --color-primary-300: #93c5fd;
8  --color-primary-400: #60a5fa;
9  --color-primary-500: #3b82f6;
10  --color-primary-600: #2563eb;
11  --color-primary-700: #1d4ed8;
12  --color-primary-800: #1e40af;
13  --color-primary-900: #1e3a8a;
14  
15  /* Semantic color mappings */
16  --color-primary: var(--color-primary-500);
17  --color-primary-hover: var(--color-primary-600);
18  --color-primary-active: var(--color-primary-700);
19  --color-primary-light: var(--color-primary-50);
20  --color-primary-dark: var(--color-primary-900);
21  
22  /* Typography tokens */
23  --font-family-sans: 'Inter', system-ui, sans-serif;
24  --font-family-serif: 'Playfair Display', serif;
25  --font-family-mono: 'JetBrains Mono', monospace;
26  
27  --font-weight-light: 300;
28  --font-weight-normal: 400;
29  --font-weight-medium: 500;
30  --font-weight-semibold: 600;
31  --font-weight-bold: 700;
32  
33  --font-size-xs: 0.75rem;
34  --font-size-sm: 0.875rem;
35  --font-size-base: 1rem;
36  --font-size-lg: 1.125rem;
37  --font-size-xl: 1.25rem;
38  --font-size-2xl: 1.5rem;
39  --font-size-3xl: 1.875rem;
40  --font-size-4xl: 2.25rem;
41  
42  --line-height-tight: 1.25;
43  --line-height-snug: 1.375;
44  --line-height-normal: 1.5;
45  --line-height-relaxed: 1.625;
46  --line-height-loose: 2;
47  
48  /* Spacing tokens */
49  --space-px: 1px;
50  --space-0: 0;
51  --space-0-5: 0.125rem;
52  --space-1: 0.25rem;
53  --space-1-5: 0.375rem;
54  --space-2: 0.5rem;
55  --space-2-5: 0.625rem;
56  --space-3: 0.75rem;
57  --space-3-5: 0.875rem;
58  --space-4: 1rem;
59  --space-5: 1.25rem;
60  --space-6: 1.5rem;
61  --space-8: 2rem;
62  --space-10: 2.5rem;
63  --space-12: 3rem;
64  --space-16: 4rem;
65  --space-20: 5rem;
66  --space-24: 6rem;
67  --space-32: 8rem;
68  
69  /* Border radius tokens */
70  --radius-none: 0;
71  --radius-sm: 0.125rem;
72  --radius-base: 0.25rem;
73  --radius-md: 0.375rem;
74  --radius-lg: 0.5rem;
75  --radius-xl: 0.75rem;
76  --radius-2xl: 1rem;
77  --radius-3xl: 1.5rem;
78  --radius-full: 9999px;
79  
80  /* Shadow tokens */
81  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
82  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
83  --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
84  --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
85  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
86  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
87  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
88}
89
90/* Component-specific token usage */
91.button {
92  font-family: var(--font-family-sans);
93  font-weight: var(--font-weight-medium);
94  font-size: var(--font-size-sm);
95  line-height: var(--line-height-tight);
96  padding: var(--space-2) var(--space-4);
97  border-radius: var(--radius-md);
98  box-shadow: var(--shadow-sm);
99  background: var(--color-primary);
100  color: white;
101  border: 1px solid var(--color-primary);
102  transition: all 0.15s ease;
103}
104
105.button:hover {
106  background: var(--color-primary-hover);
107  border-color: var(--color-primary-hover);
108  box-shadow: var(--shadow-md);
109}

1/* State-driven component styling */
2.component {
3  /* State variables */
4  --is-loading: 0;
5  --is-disabled: 0;
6  --is-focused: 0;
7  --is-hovered: 0;
8  --is-active: 0;
9  
10  /* Computed styles based on state */
11  --opacity: calc(1 - var(--is-disabled) * 0.5);
12  --cursor: var(--is-disabled) 'not-allowed', var(--is-loading) 'wait', 'pointer';
13  --scale: calc(1 + var(--is-hovered) * 0.05 - var(--is-active) * 0.05);
14  
15  opacity: var(--opacity);
16  transform: scale(var(--scale));
17  cursor: var(--cursor);
18  transition: all 0.2s ease;
19}
20
21.component:hover {
22  --is-hovered: 1;
23}
24
25.component:active {
26  --is-active: 1;
27}
28
29.component:focus {
30  --is-focused: 1;
31  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
32}
33
34.component[disabled] {
35  --is-disabled: 1;
36}
37
38.component[aria-busy="true"] {
39  --is-loading: 1;
40}
41
42/* Loading state with custom properties */
43.component[aria-busy="true"]::after {
44  content: '';
45  position: absolute;
46  inset: 0;
47  background: linear-gradient(
48    90deg,
49    transparent,
50    rgba(255, 255, 255, var(--is-loading)),
51    transparent
52  );
53  animation: shimmer calc(1.5s / var(--is-loading, 1)) infinite;
54}

1/* Container query-inspired responsive variables */
2.responsive-component {
3  /* Breakpoint flags */
4  --is-mobile: 0;
5  --is-tablet: 0;
6  --is-desktop: 0;
7  
8  /* Size-dependent values */
9  --padding: calc(
10    var(--is-mobile) * var(--space-4) +
11    var(--is-tablet) * var(--space-6) +
12    var(--is-desktop) * var(--space-8)
13  );
14  
15  --font-size: calc(
16    var(--is-mobile) * var(--font-size-sm) +
17    var(--is-tablet) * var(--font-size-base) +
18    var(--is-desktop) * var(--font-size-lg)
19  );
20  
21  --columns: calc(
22    var(--is-mobile) * 1 +
23    var(--is-tablet) * 2 +
24    var(--is-desktop) * 3
25  );
26  
27  padding: var(--padding);
28  font-size: var(--font-size);
29  display: grid;
30  grid-template-columns: repeat(var(--columns), 1fr);
31  gap: var(--space-4);
32}
33
34@media (max-width: 768px) {
35  .responsive-component {
36    --is-mobile: 1;
37  }
38}
39
40@media (min-width: 769px) and (max-width: 1024px) {
41  .responsive-component {
42    --is-tablet: 1;
43  }
44}
45
46@media (min-width: 1025px) {
47  .responsive-component {
48    --is-desktop: 1;
49  }
50}
51
52/* Dynamic grid with custom properties */
53.dynamic-grid {
54  --min-item-size: 200px;
55  --max-item-size: 300px;
56  --gap: var(--space-4);
57  --container-padding: var(--space-6);
58  --available-space: calc(100vw - 2 * var(--container-padding));
59  
60  --items-per-row: max(1, floor(var(--available-space) / var(--min-item-size)));
61  --item-size: min(
62    var(--max-item-size),
63    calc((var(--available-space) - (var(--items-per-row) - 1) * var(--gap)) / var(--items-per-row))
64  );
65  
66  display: grid;
67  grid-template-columns: repeat(auto-fill, minmax(var(--item-size), 1fr));
68  gap: var(--gap);
69  padding: 0 var(--container-padding);
70}