/* PVZ Design System — Tokens * CSS-переменные для цветов, шрифтов, отступов, радиусов, теней. * Тёмная тема через [data-theme="dark"] на . */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ── Surfaces ── */ --ds-page-bg: #fafaf9; --ds-card-bg: #ffffff; --ds-card-bg-hover: #faf9f7; --ds-card-bg-active: #f3f1ec; /* ── Borders ── */ --ds-border-light: #eeeae0; --ds-border-medium: #d6d3d1; --ds-border-strong: #a8a29e; /* ── Text ── */ --ds-text-primary: #1c1917; --ds-text-secondary: #57534e; --ds-text-muted: #78716c; --ds-text-faint: #a8a29e; --ds-text-inverse: #ffffff; /* ── Accent (Linear quiet pro = чёрный) ── */ --ds-accent: #1c1917; --ds-accent-hover: #000000; --ds-accent-surface: #f3f1ec; --ds-focus-ring: rgba(28, 25, 23, 0.18); /* ── Semantic ── */ --ds-success: #15803d; --ds-success-surface: #f0fdf4; --ds-danger: #dc2626; --ds-danger-surface: #fef2f2; --ds-warning: #d97706; --ds-warning-surface: #fffbeb; --ds-info: #1e40af; --ds-info-surface: #eff6ff; /* ── Fonts ── */ --ds-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ds-mono: 'IBM Plex Mono', 'Consolas', monospace; /* ── Type scale ── */ --ds-text-xs: 11px; --ds-text-sm: 12px; --ds-text-base: 13px; --ds-text-md: 14px; --ds-text-lg: 16px; --ds-text-xl: 20px; --ds-text-2xl: 24px; --ds-text-3xl: 32px; /* ── Spacing ── */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; /* ── Radius ── */ --ds-radius-sm: 6px; --ds-radius-md: 8px; --ds-radius-lg: 12px; --ds-radius-xl: 16px; --ds-radius-full: 9999px; /* ── Shadows (мягкие, без glow) ── */ --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --ds-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03); --ds-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.03); /* ── Z-index scale ── */ --ds-z-sidebar: 100; --ds-z-topbar: 200; --ds-z-dropdown: 1000; --ds-z-modal: 9000; --ds-z-toast: 9500; } [data-theme="dark"] { --ds-page-bg: #0c0a09; --ds-card-bg: #1c1917; --ds-card-bg-hover: #292524; --ds-card-bg-active: #44403c; --ds-border-light: #292524; --ds-border-medium: #44403c; --ds-border-strong: #78716c; --ds-text-primary: #f5f5f4; --ds-text-secondary: #d6d3d1; --ds-text-muted: #a8a29e; --ds-text-faint: #78716c; --ds-text-inverse: #1c1917; --ds-accent: #fafaf9; --ds-accent-hover: #ffffff; --ds-accent-surface: #292524; --ds-focus-ring: rgba(250, 250, 249, 0.2); --ds-success: #22c55e; --ds-success-surface: #052e16; --ds-danger: #ef4444; --ds-danger-surface: #450a0a; --ds-warning: #f59e0b; --ds-warning-surface: #451a03; --ds-info: #60a5fa; --ds-info-surface: #172554; --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --ds-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --ds-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.55); /* ── Legacy layout.css vars — dark overrides ── */ /* layout.css defines these only in :root (light). Redefining them here in * [data-theme="dark"] so that any template still referencing --bg-soft, * --border-soft, etc. gets the correct dark value instead of the light hex. */ --bg-page: #0c0a09; --bg-panel: #1c1917; --bg-soft: #292524; --bg-softer: #1c1917; --surface: #1c1917; --surface2: #292524; --text-main: #f5f5f4; --text-secondary: #d6d3d1; --text-muted: #a8a29e; --border-soft: #292524; --border-strong: #44403c; --shadow-card: 0 1px 2px rgba(0,0,0,0.6), 0 18px 40px rgba(0,0,0,0.45); --shadow-soft: 0 1px 2px rgba(0,0,0,0.45), 0 10px 24px rgba(0,0,0,0.35); --accent: #60a5fa; --accent-2: #3b82f6; --accent-soft: #172554; --accent-border: rgba(96,165,250,0.25); --danger: #ef4444; --danger-2: #dc2626; --warning: #f59e0b; --success: #22c55e; --success-bg: #052e16; --success-border: #166534; --warning-bg: #451a03; --warning-border: #92400e; --error-bg: #450a0a; --error-border: #991b1b; }