You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.5 KiB
74 lines
2.5 KiB
/* ============================================================
|
|
ridein — дизайн-токены (монохромная система)
|
|
Только функции, поддерживаемые WebKitGTK (webview Tauri):
|
|
HSL-цвета, CSS-переменные, grid/flex, clamp/rem. Без oklch,
|
|
color-mix(), :has() и прочего слишком свежего.
|
|
============================================================ */
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("./fonts/InterVariable.woff2") format("woff2");
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
/* --- Цвет: монохромная шкала (нулевая насыщенность) --- */
|
|
--c-bg: hsl(0 0% 4%); /* фон страницы */
|
|
--c-surface: hsl(0 0% 8%); /* карточка/панель */
|
|
--c-surface-2: hsl(0 0% 12%); /* приподнятый элемент */
|
|
--c-border: hsl(0 0% 18%); /* тонкая линия */
|
|
--c-border-strong: hsl(0 0% 30%);
|
|
--c-text: hsl(0 0% 93%); /* основной текст */
|
|
--c-text-muted: hsl(0 0% 58%); /* вторичный */
|
|
--c-text-faint: hsl(0 0% 40%); /* едва заметный */
|
|
--c-accent: hsl(0 0% 93%); /* акцент (инверсия) */
|
|
--c-accent-contrast: hsl(0 0% 4%);
|
|
|
|
/* --- Отступы (база 4px) --- */
|
|
--space-1: 0.25rem; /* 4px */
|
|
--space-2: 0.5rem; /* 8px */
|
|
--space-3: 0.75rem; /* 12px */
|
|
--space-4: 1rem; /* 16px */
|
|
--space-5: 1.5rem; /* 24px */
|
|
--space-6: 2rem; /* 32px */
|
|
--space-8: 3rem; /* 48px */
|
|
--space-10: 4rem; /* 64px */
|
|
|
|
/* --- Типографика --- */
|
|
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", monospace;
|
|
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.25rem; /* 20px */
|
|
--text-xl: 1.5rem; /* 24px */
|
|
--text-2xl: 2rem; /* 32px */
|
|
--text-3xl: 2.5rem; /* 40px */
|
|
|
|
--leading-tight: 1.1;
|
|
--leading-normal: 1.5;
|
|
|
|
--fw-regular: 400;
|
|
--fw-medium: 500;
|
|
--fw-semibold: 600;
|
|
--fw-bold: 700;
|
|
|
|
--tracking-tight: -0.02em;
|
|
--tracking-wide: 0.08em;
|
|
|
|
/* --- Радиусы --- */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-full: 9999px;
|
|
|
|
/* --- Разное --- */
|
|
--container-max: 72rem;
|
|
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--duration-fast: 120ms;
|
|
--duration-base: 200ms;
|
|
}
|