/* ─── Марковская СОШ · Design Tokens ─────────────────────────────────── */ :root { /* ── Color palette ── */ --color-blue-50: #e8f0fb; --color-blue-100: #c5d9f5; --color-blue-200: #92b7ed; --color-blue-300: #5e95e4; --color-blue-400: #3479d8; --color-blue-500: #1565C0; --color-blue-600: #1257a8; --color-blue-700: #0e4488; --color-blue-800: #09326a; --color-blue-900: #051e42; --color-red-50: #fdecea; --color-red-100: #f9c4be; --color-red-200: #f39187; --color-red-300: #ec5e50; --color-red-400: #e03322; --color-red-500: #CC2B1A; --color-red-600: #b02315; --color-red-700: #8d1b10; --color-silver-50: #f5f6f8; --color-silver-100: #e8eaed; --color-silver-200: #d0d4da; --color-silver-300: #b0b6bf; --color-silver-400: #8c939e; --color-silver-500: #6b737e; --color-silver-600: #535a63; --color-silver-700: #3c4249; --color-silver-800: #272c32; --color-silver-900: #14181c; /* ── Semantic aliases ── */ --color-primary: #1565C0; --color-primary-hover: #1257a8; --color-primary-active: #0e4488; --color-primary-subtle: #e8f0fb; --color-accent: #CC2B1A; --color-accent-hover: #b02315; --color-accent-subtle: #fdecea; --color-border: #d0d4da; --color-border-strong: #8c939e; --color-surface: #ffffff; --color-bg: #f4f6fa; --color-text-primary: #1a2340; --color-text-secondary: #3c4249; --color-text-muted: #6b737e; --color-text-inverse: #ffffff; --color-text-link: #1565C0; --color-text-link-hover:#0e4488; /* ── Typography ── */ --font-sans: 'PT Sans', Arial, sans-serif; --font-narrow: 'PT Sans Narrow', 'Arial Narrow', sans-serif; --font-serif: 'PT Serif', 'Times New Roman', serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --font-regular: 400; --font-bold: 700; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed:1.7; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; /* ── Spacing ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --gap-xs: 0.5rem; --gap-sm: 0.75rem; --gap-md: 1rem; --gap-lg: 1.5rem; --gap-xl: 2rem; --pad-card: 1.5rem; --pad-section: 4rem; /* ── Border radius ── */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill:9999px; /* ── Border widths ── */ --border-accent: 4px; /* ── Shadows ── */ --shadow-sm: 0 1px 3px rgba(26,35,64,0.10), 0 1px 2px rgba(26,35,64,0.06); --shadow-md: 0 4px 12px rgba(26,35,64,0.10), 0 2px 4px rgba(26,35,64,0.06); --shadow-lg: 0 10px 28px rgba(26,35,64,0.12), 0 4px 8px rgba(26,35,64,0.06); --shadow-focus: 0 0 0 3px rgba(21,101,192,0.30); } /* ── Режим «Детский сад «Источник»»: бирюзовая акцентная схема ── Устанавливается через data-mode="sadik" на (см. js/nav.js). Переопределяет ту же шкалу переменных, что и школьный синий, поэтому пересчитывается всё — hero, кнопки, активные пункты меню, пилюля — без правок в отдельных компонентах. */ :root[data-mode="sadik"] { --color-blue-50: #e3f6f5; --color-blue-100: #b8e8e5; --color-blue-200: #85d3ce; --color-blue-300: #4dbdb5; --color-blue-400: #229e95; --color-blue-500: #0f7d75; --color-blue-600: #0c655f; --color-blue-700: #0a4d48; --color-blue-800: #073632; --color-blue-900: #04201d; --color-primary: #0f7d75; --color-primary-hover: #0c655f; --color-primary-active: #0a4d48; --color-primary-subtle: #e3f6f5; --color-text-link: #0f7d75; --color-text-link-hover: #0a4d48; --shadow-focus: 0 0 0 3px rgba(15,125,117,0.30); }