60 lines
2.2 KiB
CSS
60 lines
2.2 KiB
CSS
:root,
|
|
[data-theme='light'] {
|
|
--color-bg: #FAFCFC;
|
|
--color-surface: #ffffff;
|
|
--color-surface-2: #edfdfd;
|
|
--color-surface-3: #e6fffa;
|
|
--color-border: #E0EBEB;
|
|
--color-border-strong: #cbd5e0;
|
|
--color-border-focus: #4fd1c5;
|
|
--color-text: #0F1F2E;
|
|
--color-text-secondary: #0F1F2E;
|
|
--color-text-tertiary: #718096;
|
|
--color-primary: #5CCFC4;
|
|
--color-brand: #4fd1c5;
|
|
--color-brand-hover: #38b2ac;
|
|
--color-brand-soft: #e6fffa;
|
|
--color-brand-soft-2: #b2f5ea;
|
|
--color-success: #38a169;
|
|
--color-success-soft: #f0fff4;
|
|
--color-warning: #d69e2e;
|
|
--color-warning-soft: #fffff0;
|
|
--color-danger: #e53e3e;
|
|
--color-danger-soft: #fff5f5;
|
|
--color-info: #3182ce;
|
|
--color-info-soft: #ebf8ff;
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
--shadow-focus: 0 0 0 3px rgba(79, 209, 197, 0.2);
|
|
--gradient-brand: linear-gradient(135deg, #4fd1c5 0%, #38b2ac 100%);
|
|
--gradient-hero: radial-gradient(900px 420px at 4% 0%, rgba(79, 209, 197, 0.15), transparent 60%),
|
|
radial-gradient(760px 420px at 100% 8%, rgba(56, 178, 172, 0.1), transparent 50%),
|
|
linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--color-bg: #0f172a;
|
|
--color-surface: #1e293b;
|
|
--color-surface-2: #1e293b;
|
|
--color-surface-3: #334155;
|
|
--color-border: #334155;
|
|
--color-border-strong: #475569;
|
|
--color-border-focus: #4fd1c5;
|
|
--color-text: #f8fafc;
|
|
--color-text-secondary: #94a3b8;
|
|
--color-text-tertiary: #64748b;
|
|
--color-brand: #4fd1c5;
|
|
--color-brand-hover: #38b2ac;
|
|
--color-brand-soft: #134e4a;
|
|
--color-brand-soft-2: #115e59;
|
|
--color-info: #60a5fa;
|
|
--color-info-soft: #1e3a8a;
|
|
--gradient-brand: linear-gradient(135deg, #4fd1c5 0%, #38b2ac 100%);
|
|
--gradient-hero: radial-gradient(900px 420px at 4% 0%, rgba(79, 209, 197, 0.18), transparent 62%),
|
|
radial-gradient(760px 420px at 100% 8%, rgba(56, 178, 172, 0.16), transparent 58%),
|
|
linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
|
|
}
|