:root { /* Brand / Primary */ --app-brand: 116 23% 35%; --app-brand-foreground: 0 0% 100%; /* Backgrounds */ --app-bg: 40 31% 94%; --app-card: 0 0% 100%; --app-muted: 40 29% 90%; --app-border: 38 18% 80%; /* Text */ --app-foreground: 128 17% 17%; --app-muted-foreground: 127 8% 40%; /* Accent */ --app-accent: 35 55% 50%; /* Status */ --app-success: 142 70% 40%; --app-warning: 38 92% 50%; --app-danger: 0 84% 60%; /* Radiuses */ --app-radius-lg: 1.25rem; --app-radius-md: 1rem; --app-radius-sm: .75rem; } /* тёмный режим можно включить, если на или повесим .dark */ .dark { --app-bg: 134 8% 10%; --app-card: 134 8% 13%; --app-muted: 134 8% 16%; --app-border: 134 8% 20%; --app-foreground: 40 31% 94%; --app-muted-foreground: 40 10% 70%; --app-brand: 116 23% 55%; } /* базовые штуки */ body { background-color: hsl(var(--app-bg)); color: hsl(var(--app-foreground)); } /* карточка */ .app-card { background: hsl(var(--app-card)); border: 1px solid hsl(var(--app-border)); border-radius: var(--app-radius-lg); } /* таблицы можно сделать чуть мягче */ .app-table th { background: hsl(var(--app-muted)); color: hsl(var(--app-foreground)); } /* кнопка в нашем цвете */ .app-btn-primary { background: hsl(var(--app-brand)); color: hsl(var(--app-brand-foreground)); border-radius: .75rem; padding: .5rem 1rem; font-size: .875rem; font-weight: 500; } .app-btn-primary:hover { filter: brightness(1.05); } /* подсветка ошибок/успеха (если используем div-алиерты) */ .app-alert-success { background: hsl(var(--app-success) / .1); border: 1px solid hsl(var(--app-success) / .25); color: hsl(var(--app-success)); border-radius: .75rem; padding: .5rem .75rem; } .app-alert-danger { background: hsl(var(--app-danger) / .1); border: 1px solid hsl(var(--app-danger) / .25); color: hsl(var(--app-danger)); border-radius: .75rem; padding: .5rem .75rem; }