82 lines
2.0 KiB
CSS
82 lines
2.0 KiB
CSS
|
@import 'tailwindcss';
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Дизайн-токены (docs/client-web.md §3). Тёмная тема по умолчанию,
|
||
|
|
* светлая — тот же набор токенов. Акцент сервера переопределяет --color-accent
|
||
|
|
* в скоупе сервера.
|
||
|
|
*/
|
||
|
|
@theme {
|
||
|
|
--color-bg: oklch(0.19 0.02 265);
|
||
|
|
--color-surface-1: oklch(0.23 0.02 265);
|
||
|
|
--color-surface-2: oklch(0.27 0.02 265);
|
||
|
|
--color-surface-3: oklch(0.32 0.02 265);
|
||
|
|
--color-fg: oklch(0.96 0.005 265);
|
||
|
|
--color-fg-muted: oklch(0.72 0.01 265);
|
||
|
|
--color-accent: oklch(0.66 0.16 265);
|
||
|
|
--color-accent-fg: oklch(0.99 0.005 265);
|
||
|
|
--color-danger: oklch(0.62 0.19 25);
|
||
|
|
--color-success: oklch(0.72 0.15 150);
|
||
|
|
--color-warning: oklch(0.79 0.14 85);
|
||
|
|
--color-border: oklch(0.35 0.02 265);
|
||
|
|
|
||
|
|
--radius-sm: 6px;
|
||
|
|
--radius-md: 10px;
|
||
|
|
--radius-lg: 14px;
|
||
|
|
|
||
|
|
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
|
||
|
|
--shadow-2: 0 4px 12px rgb(0 0 0 / 0.35);
|
||
|
|
--shadow-3: 0 12px 32px rgb(0 0 0 / 0.4);
|
||
|
|
|
||
|
|
--duration-fast: 120ms;
|
||
|
|
--duration-base: 200ms;
|
||
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-theme='light'] {
|
||
|
|
--color-bg: oklch(0.98 0.003 265);
|
||
|
|
--color-surface-1: oklch(1 0 0);
|
||
|
|
--color-surface-2: oklch(0.96 0.004 265);
|
||
|
|
--color-surface-3: oklch(0.92 0.006 265);
|
||
|
|
--color-fg: oklch(0.2 0.02 265);
|
||
|
|
--color-fg-muted: oklch(0.48 0.015 265);
|
||
|
|
--color-border: oklch(0.87 0.008 265);
|
||
|
|
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.08);
|
||
|
|
--shadow-2: 0 4px 12px rgb(0 0 0 / 0.1);
|
||
|
|
--shadow-3: 0 12px 32px rgb(0 0 0 / 0.12);
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body,
|
||
|
|
#root {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
background-color: var(--color-bg);
|
||
|
|
color: var(--color-fg);
|
||
|
|
font-family:
|
||
|
|
system-ui,
|
||
|
|
-apple-system,
|
||
|
|
'Segoe UI',
|
||
|
|
Inter,
|
||
|
|
sans-serif;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.45;
|
||
|
|
}
|
||
|
|
|
||
|
|
:focus-visible {
|
||
|
|
outline: 2px solid var(--color-accent);
|
||
|
|
outline-offset: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: reduce) {
|
||
|
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after {
|
||
|
|
animation-duration: 0.01ms !important;
|
||
|
|
animation-iteration-count: 1 !important;
|
||
|
|
transition-duration: 0.01ms !important;
|
||
|
|
}
|
||
|
|
}
|