107 lines
3.4 KiB
CSS
107 lines
3.4 KiB
CSS
|
|
:root {
|
|
--primary-50: var(--color-cyan-50);
|
|
--primary-100: var(--color-cyan-100);
|
|
--primary-200: var(--color-cyan-200);
|
|
--primary-300: var(--color-cyan-300);
|
|
--primary-400: var(--color-cyan-400);
|
|
--primary-500: var(--color-cyan-500);
|
|
--primary-600: var(--color-cyan-600);
|
|
--primary-700: var(--color-cyan-700);
|
|
--primary-800: var(--color-cyan-800);
|
|
--primary-900: var(--color-cyan-900);
|
|
--primary-950: var(--color-cyan-950);
|
|
|
|
--bg: white;
|
|
--bg-muted: var(--color-slate-50);
|
|
--bg-elevated: var(--color-slate-100);
|
|
--bg-accented: var(--color-slate-200);
|
|
--bg-inverted: var(--color-slate-900);
|
|
|
|
--text: var(--color-slate-950);
|
|
--text-muted: var(--color-slate-600);
|
|
--text-inverted: var(--color-slate-50);
|
|
|
|
--primary: var(--primary-500);
|
|
--primary-hover: var(--primary-600);
|
|
--primary-active: var(--primary-700);
|
|
--primary-contrast: var(--color-white);
|
|
--primary-soft: var(--primary-100);
|
|
--primary-soft-hover: var(--primary-200);
|
|
--primary-soft-text: var(--primary-800);
|
|
|
|
--info: var(--color-blue-500);
|
|
--success: var(--color-green-500);
|
|
--warning: var(--color-yellow-500);
|
|
--danger: var(--color-red-500);
|
|
|
|
--border: var(--color-slate-200);
|
|
--border-strong: var(--color-slate-300);
|
|
--border-accent: var(--primary-300);
|
|
|
|
--input: var(--bg-muted);
|
|
--input-border: var(--border);
|
|
--input-border-focus: var(--border-accent);
|
|
|
|
--hero-from: var(--primary-50);
|
|
--hero-via: var(--color-white);
|
|
--hero-to: var(--color-slate-100);
|
|
--hero-overlay: linear-gradient(110deg, rgb(15 23 42 / 0.08), rgb(14 116 144 / 0.06));
|
|
--hero-title: var(--color-slate-950);
|
|
--hero-body: var(--color-slate-700);
|
|
--hero-panel-bg: rgb(255 255 255 / 0.78);
|
|
--hero-panel-border: var(--color-slate-200);
|
|
|
|
--feature-from: var(--color-white);
|
|
--feature-to: var(--primary-50);
|
|
--feature-border: var(--color-slate-200);
|
|
|
|
--badge-tech-bg: var(--primary-100);
|
|
--badge-tech-border: var(--primary-300);
|
|
--badge-tech-text: var(--primary-900);
|
|
|
|
--shadow-elevated: 0 24px 50px -36px rgb(14 116 144 / 0.45);
|
|
}
|
|
|
|
.dark {
|
|
--bg: var(--color-slate-950);
|
|
--bg-muted: var(--color-slate-900);
|
|
--bg-elevated: var(--color-slate-900);
|
|
--bg-accented: var(--color-slate-800);
|
|
--bg-inverted: var(--color-slate-50);
|
|
|
|
--text: var(--color-slate-100);
|
|
--text-muted: var(--color-slate-400);
|
|
--text-inverted: var(--color-slate-950);
|
|
|
|
--primary: var(--primary-400);
|
|
--primary-hover: var(--primary-300);
|
|
--primary-active: var(--primary-200);
|
|
--primary-contrast: var(--primary-950);
|
|
--primary-soft: rgb(6 182 212 / 0.22);
|
|
--primary-soft-hover: rgb(34 211 238 / 0.3);
|
|
--primary-soft-text: var(--primary-200);
|
|
|
|
--border: var(--color-slate-800);
|
|
--border-strong: var(--color-slate-700);
|
|
--border-accent: var(--primary-700);
|
|
|
|
--hero-from: var(--color-slate-950);
|
|
--hero-via: var(--color-slate-900);
|
|
--hero-to: var(--primary-950);
|
|
--hero-overlay: linear-gradient(110deg, rgb(2 6 23 / 0.5), rgb(8 47 73 / 0.4));
|
|
--hero-title: var(--color-slate-50);
|
|
--hero-body: var(--color-slate-300);
|
|
--hero-panel-bg: rgb(2 6 23 / 0.45);
|
|
--hero-panel-border: var(--color-slate-700);
|
|
|
|
--feature-from: var(--color-slate-900);
|
|
--feature-to: rgb(8 47 73 / 0.38);
|
|
--feature-border: var(--color-slate-700);
|
|
|
|
--badge-tech-bg: rgb(8 145 178 / 0.2);
|
|
--badge-tech-border: var(--primary-700);
|
|
--badge-tech-text: var(--primary-200);
|
|
|
|
--shadow-elevated: 0 30px 65px -34px rgb(2 6 23 / 0.92);
|
|
}
|