/* ============================================================ «Родной» — дизайн-система · TOKENS Копия дизайн-токенов router.bynara.id (NaraRouter) ------------------------------------------------------------ ПРАВИЛО: все компоненты (components.css) ссылаются ТОЛЬКО на эти переменные. Чтобы сменить дизайн всего сайта — меняйте значения здесь. Индексы (DS-*) совпадают с design-index.json и страницей /design.html ============================================================ */ :root { /* ---------- DS-C · ЦВЕТА (RGB-триплеты, использовать rgb(var(--x))) ---------- */ /* Бренд и действия */ --color-brand-light: 45 123 255; /* DS-C-01 #2D7BFF */ --color-brand-deep: 10 29 77; /* DS-C-02 #0A1D4D */ --color-primary: 45 123 255; /* DS-C-03 #2D7BFF — главный акцент */ --color-primary-content:255 255 255; /* DS-C-04 текст на primary */ --color-primary-hover: 37 99 235; /* DS-C-05 #2563EB */ --color-primary-active: 29 78 216; /* DS-C-06 #1D4ED8 */ --color-primary-disabled:148 163 184; /* DS-C-07 #94A3B8 */ --color-secondary: 241 245 249; /* DS-C-08 #F1F5F9 */ --color-secondary-content:51 65 85; /* DS-C-09 #334155 */ --color-secondary-hover:226 232 240; /* DS-C-10 #E2E8F0 */ --color-secondary-active:203 213 225; /* DS-C-11 #CBD5E1 */ --color-accent: 6 182 212; /* DS-C-12 #06B6D4 — циан-акцент */ --color-accent-content: 255 255 255; /* DS-C-13 */ --color-info: 14 165 233; /* DS-C-14 #0EA5E9 */ --color-info-content: 255 255 255; /* DS-C-15 */ --color-success: 16 185 129; /* DS-C-16 #10B981 */ --color-success-content:255 255 255; /* DS-C-17 */ --color-warning: 245 158 11; /* DS-C-18 #F59E0B */ --color-warning-content:255 255 255; /* DS-C-19 */ --color-error: 239 68 68; /* DS-C-20 #EF4444 */ --color-error-content: 255 255 255; /* DS-C-21 */ /* ---------- DS-B · ФОНЫ ---------- */ --bg-app: 248 250 252; /* DS-B-01 #F8FAFC — фон приложения */ --bg-surface: 255 255 255; /* DS-B-02 #FFFFFF — карточки */ --bg-muted: 235 239 246; /* DS-B-03 #EBEFF6 — приглушённые блоки */ --bg-inverse: 15 23 42; /* DS-B-04 #0F172A — тёмные секции/футер */ --bg-glass: 255 255 255; /* DS-B-05 */ --bg-glass-alpha: 0.7; /* DS-B-06 */ --bg-glass-subtle-alpha:0.05; /* DS-B-07 */ /* ---------- DS-L · ЛИНИИ И ГРАНИЦЫ ---------- */ --border-subtle: 226 232 240; /* DS-L-01 #E2E8F0 */ --border-subtle-alpha: 0.8; /* DS-L-02 */ --glass-border: 15 23 42; /* DS-L-03 */ --glass-border-alpha: 0.08; /* DS-L-04 */ /* ---------- DS-T · ТЕКСТ ---------- */ --text-main: 15 23 42; /* DS-T-01 #0F172A */ --text-muted: 100 116 139; /* DS-T-02 #64748B */ --text-inverse: 248 250 252; /* DS-T-03 на тёмном фоне */ /* ---------- DS-F · ТИПОГРАФИКА ---------- */ --font-sans: "Satoshi","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* DS-F-01 */ --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* DS-F-02 */ --text-xs: 0.75rem; /* DS-F-03 12px */ --text-sm: 0.875rem; /* DS-F-04 14px */ --text-base: 1rem; /* DS-F-05 16px */ --text-lg: 1.125rem; /* DS-F-06 18px */ --text-xl: 1.25rem; /* DS-F-07 20px */ --text-2xl: 1.5rem; /* DS-F-08 24px */ --text-3xl: 1.875rem; /* DS-F-09 30px */ --text-4xl: 2.25rem; /* DS-F-10 36px */ --text-5xl: 3rem; /* DS-F-11 48px */ --leading-tight: 1.2; /* DS-F-12 */ --leading-normal: 1.55; /* DS-F-13 */ /* ---------- DS-S · ОТСТУПЫ (шкала 4px) ---------- */ --space-1: 0.25rem; /* DS-S-01 */ --space-2: 0.5rem; /* DS-S-02 */ --space-3: 0.75rem; /* DS-S-03 */ --space-4: 1rem; /* DS-S-04 */ --space-5: 1.25rem; /* DS-S-05 */ --space-6: 1.5rem; /* DS-S-06 */ --space-8: 2rem; /* DS-S-07 */ --space-10: 2.5rem; /* DS-S-08 */ --space-12: 3rem; /* DS-S-09 */ --space-16: 4rem; /* DS-S-10 */ --container: 72rem; /* DS-S-11 1152px — ширина контента */ /* ---------- DS-R · РАДИУСЫ ---------- */ --radius-sm: 0.375rem; /* DS-R-01 6px — инпуты, бейджи */ --radius-md: 0.625rem; /* DS-R-02 10px — кнопки */ --radius-lg: 0.75rem; /* DS-R-03 12px — карточки */ --radius-xl: 1.25rem; /* DS-R-04 20px — крупные секции */ --radius-full: 9999px; /* DS-R-05 — чипы, аватары */ /* ---------- DS-H · ТЕНИ ---------- */ --shadow-xs: 0 1px 2px 0 rgba(15,23,42,0.04); /* DS-H-01 */ --shadow-sm: 0 1px 3px 0 rgba(15,23,42,0.08), 0 1px 2px -1px rgba(15,23,42,0.06); /* DS-H-02 */ --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.06); /* DS-H-03 */ --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.10), 0 4px 6px -4px rgba(15,23,42,0.08); /* DS-H-04 */ --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.12), 0 8px 10px -6px rgba(15,23,42,0.08); /* DS-H-05 */ --shadow-glow: 0 0 0 1px rgba(45,123,255,0.20), 0 8px 24px -4px rgba(45,123,255,0.40); /* DS-H-06 — primary-свечение */ /* ---------- DS-M · АНИМАЦИЯ ---------- */ --duration-fast: 120ms; /* DS-M-01 */ --duration-base: 200ms; /* DS-M-02 */ --duration-slow: 320ms; /* DS-M-03 */ --duration-slower: 480ms; /* DS-M-04 */ --easing-smooth: cubic-bezier(0.32,0.72,0.0,1.0); /* DS-M-05 */ --easing-snappy: cubic-bezier(0.4,0.0,0.2,1.0); /* DS-M-06 */ --easing-bounce: cubic-bezier(0.68,-0.55,0.27,1.55);/* DS-M-07 */ --easing-glide: cubic-bezier(0.2,0.8,0.2,1.0); /* DS-M-08 */ /* ---------- DS-G · GLASS (стекло) ---------- */ --glass-blur: 12px; /* DS-G-01 */ --glass-subtle-blur: 10px; /* DS-G-02 */ --glass-saturate: 150%; /* DS-G-03 */ /* ---------- DS-Z · Z-INDEX ---------- */ --z-dropdown: 30; /* DS-Z-01 */ --z-overlay: 40; /* DS-Z-02 */ --z-modal: 50; /* DS-Z-03 */ --z-popover: 60; /* DS-Z-04 */ --z-toast: 70; /* DS-Z-05 */ --z-tooltip: 80; /* DS-Z-06 */ /* ---------- DS-O · ПРОЧЕЕ ---------- */ --ring-focus: 45 123 255; /* DS-O-01 — фокус-кольцо доступности */ }