:root { --bs-gray-50: #F3F5F8; --bs-gray-50: oklch(97.0% 0.004 260); --bs-gray-50-rgb: 243, 245, 248; /* #F3F5F8 */ --bs-gray-100: #DBDEE3; --bs-gray-100: oklch(90.0% 0.007 260); --bs-gray-100-rgb: 219, 222, 227; /* #DBDEE3 */ --bs-gray-200: #CDD1D8; --bs-gray-200: oklch(86.0% 0.010 260); --bs-gray-200-rgb: 205, 209, 216; /* #CDD1D8 */ --bs-gray-300: #B5BBC4; --bs-gray-300: oklch(79.0% 0.014 260); --bs-gray-300-rgb: 181, 187, 196; /* #B5BBC4 */ --bs-gray-400: #A4ABB6; --bs-gray-400: oklch(74.0% 0.018 260); --bs-gray-400-rgb: 164, 171, 182; /* #A4ABB6 */ --bs-gray-500: #9199A6; --bs-gray-500: oklch(68.0% 0.021 260); --bs-gray-500-rgb: 145, 153, 166; /* #9199A6 */ --bs-gray-600: #818A97; --bs-gray-600: oklch(63.0% 0.023 260); --bs-gray-600-rgb: 129, 138, 151; /* #818A97 */ --bs-gray-700: #646C7A; --bs-gray-700: oklch(53.0% 0.024 260); --bs-gray-700-rgb: 100, 108, 122; /* #646C7A */ --bs-gray-800: #4B5360; --bs-gray-800: oklch(44.0% 0.024 260); --bs-gray-800-rgb: 75, 83, 96; /* #4B5360 */ --bs-gray-900: #39404C; --bs-gray-900: oklch(37.0% 0.022 260); --bs-gray-900-rgb: 57, 64, 76; /* #39404C */ --bs-gray-950: #1F242D; --bs-gray-950: oklch(26.0% 0.018 260); --bs-gray-950-rgb: 31, 36, 45; /* #1F242D */ --bs-blue-50: #F0F6FF; --bs-blue-50: oklch(97.0% 0.014 259.8); --bs-blue-50-rgb: 240, 246, 255; /* #F0F6FF */ --bs-blue-100: #DBE9FE; --bs-blue-100: oklch(93.0% 0.033 259.8); --bs-blue-100-rgb: 219, 233, 254; /* #DBE9FE */ --bs-blue-200: #B8D3FE; --bs-blue-200: oklch(86.0% 0.067 259.8); --bs-blue-200-rgb: 184, 211, 254; /* #B8D3FE */ --bs-blue-300: #8EB8FD; --bs-blue-300: oklch(78.0% 0.109 259.8); --bs-blue-300-rgb: 142, 184, 253; /* #8EB8FD */ --bs-blue-400: #5E9AFC; --bs-blue-400: oklch(69.0% 0.158 259.8); --bs-blue-400-rgb: 94, 154, 252; /* #5E9AFC */ --bs-blue-500: #3B82F6; --bs-blue-500: oklch(62.3% 0.188 259.8); --bs-blue-500-rgb: 59, 130, 246; /* #3B82F6 */ --bs-blue-600: #236BDD; --bs-blue-600: oklch(55.0% 0.188 259.8); --bs-blue-600-rgb: 35, 107, 221; /* #236BDD */ --bs-blue-700: #1957BA; --bs-blue-700: oklch(48.0% 0.168 259.8); --bs-blue-700-rgb: 25, 87, 186; /* #1957BA */ --bs-blue-800: #0B4295; --bs-blue-800: oklch(40.0% 0.148 259.8); --bs-blue-800-rgb: 11, 66, 149; /* #0B4295 */ --bs-blue-900: #093170; --bs-blue-900: oklch(33.0% 0.118 259.8); --bs-blue-900-rgb: 9, 49, 112; /* #093170 */ --bs-blue-950: #06214E; --bs-blue-950: oklch(26.0% 0.088 259.8); --bs-blue-950-rgb: 6, 33, 78; /* #06214E */ --bs-indigo-50: #EEF2FF; --bs-indigo-50-rgb: 238, 242, 255; --bs-indigo-100: #E0E7FF; --bs-indigo-100-rgb: 224, 231, 255; --bs-indigo-200: #C7D2FE; --bs-indigo-200-rgb: 199, 210, 254; --bs-indigo-300: #A5B4FC; --bs-indigo-300-rgb: 165, 180, 252; --bs-indigo-400: #818CF8; --bs-indigo-400-rgb: 129, 140, 248; --bs-indigo-500: #6366F1; --bs-indigo-500-rgb: 99, 102, 241; --bs-indigo-600: #4F46E5; --bs-indigo-600-rgb: 79, 70, 229; --bs-indigo-700: #4338CA; --bs-indigo-700-rgb: 67, 56, 202; --bs-indigo-800: #3730A3; --bs-indigo-800-rgb: 55, 48, 163; --bs-indigo-900: #312E81; --bs-indigo-900-rgb: 49, 46, 129; --bs-indigo-950: #1E1B4B; --bs-indigo-950-rgb: 30, 27, 75; --bs-purple-50: #FAF5FF; --bs-purple-50-rgb: 250, 245, 255; --bs-purple-100: #F3E8FF; --bs-purple-100-rgb: 243, 232, 255; --bs-purple-200: #E9D5FF; --bs-purple-200-rgb: 233, 213, 255; --bs-purple-300: #D8B4FE; --bs-purple-300-rgb: 216, 180, 254; --bs-purple-400: #C084FC; --bs-purple-400-rgb: 192, 132, 252; --bs-purple-500: #A855F7; --bs-purple-500-rgb: 168, 85, 247; --bs-purple-600: #9333EA; --bs-purple-600-rgb: 147, 51, 234; --bs-purple-700: #7E22CE; --bs-purple-700-rgb: 126, 34, 206; --bs-purple-800: #6B21A8; --bs-purple-800-rgb: 107, 33, 168; --bs-purple-900: #581C87; --bs-purple-900-rgb: 88, 28, 135; --bs-purple-950: #3B0764; --bs-purple-950-rgb: 59, 7, 100; --bs-pink-50: #FDF2F8; --bs-pink-50-rgb: 253, 242, 248; --bs-pink-100: #FCE7F3; --bs-pink-100-rgb: 252, 231, 243; --bs-pink-200: #FBCFE8; --bs-pink-200-rgb: 251, 207, 232; --bs-pink-300: #F9A8D4; --bs-pink-300-rgb: 249, 168, 212; --bs-pink-400: #F472B6; --bs-pink-400-rgb: 244, 114, 182; --bs-pink-500: #EC4899; --bs-pink-500-rgb: 236, 72, 153; --bs-pink-600: #DB2777; --bs-pink-600-rgb: 219, 39, 119; --bs-pink-700: #BE185D; --bs-pink-700-rgb: 190, 24, 93; --bs-pink-800: #9D174D; --bs-pink-800-rgb: 157, 23, 77; --bs-pink-900: #831843; --bs-pink-900-rgb: 131, 24, 67; --bs-pink-950: #500724; --bs-pink-950-rgb: 80, 7, 36; --bs-red-50: #FFF2F0; --bs-red-50: oklch(97.0% 0.014 25.3); --bs-red-50-rgb: 255, 242, 240; /* #FFF2F0 */ --bs-red-100: #FDE0DD; --bs-red-100: oklch(93.0% 0.033 25.3); --bs-red-100-rgb: 253, 224, 221; /* #FDE0DD */ --bs-red-200: #FBC0BA; --bs-red-200: oklch(86.0% 0.068 25.3); --bs-red-200-rgb: 251, 192, 186; /* #FBC0BA */ --bs-red-300: #F69B93; --bs-red-300: oklch(78.0% 0.110 25.3); --bs-red-300-rgb: 246, 155, 147; /* #F69B93 */ --bs-red-400: #EE6D66; --bs-red-400: oklch(69.0% 0.161 25.3); --bs-red-400-rgb: 238, 109, 102; /* #EE6D66 */ --bs-red-500: #E24B48; --bs-red-500: oklch(62.3% 0.188 25.3); --bs-red-500-rgb: 226, 75, 72; /* #E24B48 */ --bs-red-600: #C83133; --bs-red-600: oklch(55.0% 0.188 25.3); --bs-red-600-rgb: 200, 49, 51; /* #C83133 */ --bs-red-700: #A82427; --bs-red-700: oklch(48.0% 0.168 25.3); --bs-red-700-rgb: 168, 36, 39; /* #A82427 */ --bs-red-800: #861319; --bs-red-800: oklch(40.0% 0.148 25.3); --bs-red-800-rgb: 134, 19, 25; /* #861319 */ --bs-red-900: #650F12; --bs-red-900: oklch(33.0% 0.118 25.3); --bs-red-900-rgb: 101, 15, 18; /* #650F12 */ --bs-red-950: #460B0C; --bs-red-950: oklch(26.0% 0.088 25.3); --bs-red-950-rgb: 70, 11, 12; /* #460B0C */ --bs-orange-50: #FFF7ED; --bs-orange-50-rgb: 255, 247, 237; --bs-orange-100: #FFEDD5; --bs-orange-100-rgb: 255, 237, 213; --bs-orange-200: #FED7AA; --bs-orange-200-rgb: 254, 215, 170; --bs-orange-300: #FDBA74; --bs-orange-300-rgb: 253, 186, 116; --bs-orange-400: #FB923C; --bs-orange-400-rgb: 251, 146, 60; --bs-orange-500: #F97316; --bs-orange-500-rgb: 249, 115, 22; --bs-orange-600: #EA580C; --bs-orange-600-rgb: 234, 88, 12; --bs-orange-700: #C2410C; --bs-orange-700-rgb: 194, 65, 12; --bs-orange-800: #9A3412; --bs-orange-800-rgb: 154, 52, 18; --bs-orange-900: #7C2D12; --bs-orange-900-rgb: 124, 45, 18; --bs-orange-950: #431407; --bs-orange-950-rgb: 67, 20, 7; /* warning: янтарь (amber), тёплый H-дрейф 85→46, светлая L */ --bs-amber-50: #FFFBF4; --bs-amber-50: oklch(99.0% 0.010 85); --bs-amber-50-rgb: 255, 251, 244; /* #FFFBF4 */ --bs-amber-100: #FFF4E0; --bs-amber-100: oklch(97.0% 0.028 83); --bs-amber-100-rgb: 255, 244, 224; /* #FFF4E0 */ --bs-amber-200: #FEE8C3; --bs-amber-200: oklch(94.0% 0.054 81); --bs-amber-200-rgb: 254, 232, 195; /* #FEE8C3 */ --bs-amber-300: #FED89B; --bs-amber-300: oklch(90.0% 0.088 79); --bs-amber-300-rgb: 254, 216, 155; /* #FED89B */ --bs-amber-400: #FDC268; --bs-amber-400: oklch(85.0% 0.127 76); --bs-amber-400-rgb: 253, 194, 104; /* #FDC268 */ --bs-amber-500: #FDAA28; --bs-amber-500: oklch(80.0% 0.161 72); --bs-amber-500-rgb: 253, 170, 40; /* #FDAA28 */ --bs-amber-600: #D88618; --bs-amber-600: oklch(69.0% 0.148 66); --bs-amber-600-rgb: 216, 134, 24; /* #D88618 */ --bs-amber-700: #AD6210; --bs-amber-700: oklch(57.0% 0.128 60); --bs-amber-700-rgb: 173, 98, 16; /* #AD6210 */ --bs-amber-800: #914B0A; --bs-amber-800: oklch(49.0% 0.117 55); --bs-amber-800-rgb: 145, 75, 10; /* #914B0A */ --bs-amber-900: #7D3A07; --bs-amber-900: oklch(43.0% 0.109 50); --bs-amber-900-rgb: 125, 58, 7; /* #7D3A07 */ --bs-amber-950: #4D1D02; --bs-amber-950: oklch(30.0% 0.081 46); --bs-amber-950-rgb: 77, 29, 2; /* #4D1D02 */ --bs-green-50: #EFF8F0; --bs-green-50: oklch(97.0% 0.014 149.6); --bs-green-50-rgb: 239, 248, 240; /* #EFF8F0 */ --bs-green-100: #D9EFDC; --bs-green-100: oklch(93.0% 0.033 149.6); --bs-green-100-rgb: 217, 239, 220; /* #D9EFDC */ --bs-green-200: #B2DEBA; --bs-green-200: oklch(86.0% 0.068 149.6); --bs-green-200-rgb: 178, 222, 186; /* #B2DEBA */ --bs-green-300: #83CB91; --bs-green-300: oklch(78.0% 0.110 149.6); --bs-green-300-rgb: 131, 203, 145; /* #83CB91 */ --bs-green-400: #3FB662; --bs-green-400: oklch(69.0% 0.161 149.6); --bs-green-400-rgb: 63, 182, 98; /* #3FB662 */ --bs-green-500: #13A24B; --bs-green-500: oklch(62.3% 0.168 149.6); --bs-green-500-rgb: 19, 162, 75; /* #13A24B */ --bs-green-600: #0F883E; --bs-green-600: oklch(55.0% 0.148 149.6); --bs-green-600-rgb: 15, 136, 62; /* #0F883E */ --bs-green-700: #0A7132; --bs-green-700: oklch(48.0% 0.130 149.6); --bs-green-700-rgb: 10, 113, 50; /* #0A7132 */ --bs-green-800: #065725; --bs-green-800: oklch(40.0% 0.108 149.6); --bs-green-800-rgb: 6, 87, 37; /* #065725 */ --bs-green-900: #03411A; --bs-green-900: oklch(33.0% 0.089 149.6); --bs-green-900-rgb: 3, 65, 26; /* #03411A */ --bs-green-950: #012D10; --bs-green-950: oklch(26.0% 0.071 149.6); --bs-green-950-rgb: 1, 45, 16; /* #012D10 */ --bs-teal-50: #f0fdfa; --bs-teal-50-rgb: 240, 253, 250; --bs-teal-100: #ccfbf1; --bs-teal-100-rgb: 204, 251, 241; --bs-teal-200: #99f6e4; --bs-teal-200-rgb: 153, 246, 228; --bs-teal-300: #5eead4; --bs-teal-300-rgb: 94, 234, 212; --bs-teal-400: #2dd4bf; --bs-teal-400-rgb: 45, 212, 191; --bs-teal-500: #14b8a6; --bs-teal-500-rgb: 20, 184, 166; --bs-teal-600: #0d9488; --bs-teal-600-rgb: 13, 148, 136; --bs-teal-700: #0f766e; --bs-teal-700-rgb: 15, 118, 110; --bs-teal-800: #115e59; --bs-teal-800-rgb: 17, 94, 89; --bs-teal-900: #134e4a; --bs-teal-900-rgb: 19, 78, 74; --bs-teal-950: #042f2e; --bs-teal-950-rgb: 4, 47, 46; /* info: голубой (sky), H228 — роднится с синим, но отделён */ --bs-sky-50: #ECF7FD; --bs-sky-50: oklch(97.0% 0.014 228); --bs-sky-50-rgb: 236, 247, 253; /* #ECF7FD */ --bs-sky-100: #D2EDFA; --bs-sky-100: oklch(93.0% 0.033 228); --bs-sky-100-rgb: 210, 237, 250; /* #D2EDFA */ --bs-sky-200: #A2DBF4; --bs-sky-200: oklch(86.0% 0.068 228); --bs-sky-200-rgb: 162, 219, 244; /* #A2DBF4 */ --bs-sky-300: #62C5EF; --bs-sky-300: oklch(78.0% 0.110 228); --bs-sky-300-rgb: 98, 197, 239; /* #62C5EF */ --bs-sky-400: #17AADA; --bs-sky-400: oklch(69.0% 0.131 228); --bs-sky-400-rgb: 23, 170, 218; /* #17AADA */ --bs-sky-500: #1394BF; --bs-sky-500: oklch(62.3% 0.118 228); --bs-sky-500-rgb: 19, 148, 191; /* #1394BF */ --bs-sky-600: #0E7DA1; --bs-sky-600: oklch(55.0% 0.104 228); --bs-sky-600-rgb: 14, 125, 161; /* #0E7DA1 */ --bs-sky-700: #096786; --bs-sky-700: oklch(48.0% 0.091 228); --bs-sky-700-rgb: 9, 103, 134; /* #096786 */ --bs-sky-800: #054F68; --bs-sky-800: oklch(40.0% 0.076 228); --bs-sky-800-rgb: 5, 79, 104; /* #054F68 */ --bs-sky-900: #033B4F; --bs-sky-900: oklch(33.0% 0.063 228); --bs-sky-900-rgb: 3, 59, 79; /* #033B4F */ --bs-sky-950: #012837; --bs-sky-950: oklch(26.0% 0.049 228); --bs-sky-950-rgb: 1, 40, 55; /* #012837 */ --bs-emerald-50: #ecfdf5; --bs-emerald-50-rgb: 236, 253, 245; --bs-emerald-100: #d1fae5; --bs-emerald-100-rgb: 209, 250, 229; --bs-emerald-200: #a7f3d0; --bs-emerald-200-rgb: 167, 243, 208; --bs-emerald-300: #6ee7b7; --bs-emerald-300-rgb: 110, 231, 183; --bs-emerald-400: #34d399; --bs-emerald-400-rgb: 52, 211, 153; --bs-emerald-500: #10b981; --bs-emerald-500-rgb: 16, 185, 129; --bs-emerald-600: #059669; --bs-emerald-600-rgb: 5, 150, 105; --bs-emerald-700: #047857; --bs-emerald-700-rgb: 4, 120, 87; --bs-emerald-800: #065f46; --bs-emerald-800-rgb: 6, 95, 70; --bs-emerald-900: #064e3b; --bs-emerald-900-rgb: 6, 78, 59; --bs-emerald-950: #022c22; --bs-emerald-950-rgb: 2, 44, 34; --bs-blue: var(--bs-blue-500); --bs-blue-rgb: var(--bs-blue-500-rgb); --bs-green: var(--bs-green-500); --bs-green-rgb: var(--bs-green-500-rgb); --bs-sky: var(--bs-sky-500); --bs-sky-rgb: var(--bs-sky-500-rgb); --bs-amber: var(--bs-amber-500); --bs-amber-rgb: var(--bs-amber-500-rgb); --bs-red: var(--bs-red-500); --bs-red-rgb: var(--bs-red-500-rgb); --bs-indigo: var(--bs-indigo-500); --bs-indigo-rgb: var(--bs-indigo-500-rgb); --bs-purple: var(--bs-purple-500); --bs-purple-rgb: var(--bs-purple-500-rgb); --bs-pink: var(--bs-pink-500); --bs-pink-rgb: var(--bs-pink-500-rgb); --bs-orange: var(--bs-orange-500); --bs-orange-rgb: var(--bs-orange-500-rgb); --bs-teal: var(--bs-teal-500); --bs-teal-rgb: var(--bs-teal-500-rgb); --bs-black: #000; --bs-black-rgb: 0, 0, 0; --bs-white: #fff; --bs-white-rgb: 255, 255, 255; --bs-gray: var(--bs-gray-500); --bs-gray-dark: var(--bs-gray-950); --bs-primary-50: var(--bs-blue-50); --bs-primary-50-rgb: var(--bs-blue-50-rgb); --bs-primary-100: var(--bs-blue-100); --bs-primary-100-rgb: var(--bs-blue-100-rgb); --bs-primary-200: var(--bs-blue-200); --bs-primary-200-rgb: var(--bs-blue-200-rgb); --bs-primary-300: var(--bs-blue-300); --bs-primary-300-rgb: var(--bs-blue-300-rgb); --bs-primary-400: var(--bs-blue-400); --bs-primary-400-rgb: var(--bs-blue-400-rgb); --bs-primary: var(--bs-blue-500); --bs-primary-rgb: var(--bs-blue-500-rgb); --bs-primary-600: var(--bs-blue-600); --bs-primary-600-rgb: var(--bs-blue-600-rgb); --bs-primary-700: var(--bs-blue-700); --bs-primary-700-rgb: var(--bs-blue-700-rgb); --bs-primary-800: var(--bs-blue-800); --bs-primary-800-rgb: var(--bs-blue-800-rgb); --bs-primary-900: var(--bs-blue-900); --bs-primary-900-rgb: var(--bs-blue-900-rgb); --bs-primary-950: var(--bs-blue-950); --bs-primary-950-rgb: var(--bs-blue-950-rgb); --bs-secondary-50: var(--bs-gray-50); --bs-secondary-50-rgb: var(--bs-gray-50-rgb); --bs-secondary-100: var(--bs-gray-100); --bs-secondary-100-rgb: var(--bs-gray-100-rgb); --bs-secondary-200: var(--bs-gray-200); --bs-secondary-200-rgb: var(--bs-gray-200-rgb); --bs-secondary-300: var(--bs-gray-300); --bs-secondary-300-rgb: var(--bs-gray-300-rgb); --bs-secondary-400: var(--bs-gray-400); --bs-secondary-400-rgb: var(--bs-gray-400-rgb); --bs-secondary: var(--bs-gray-500); --bs-secondary-rgb: var(--bs-gray-500-rgb); --bs-secondary-600: var(--bs-gray-600); --bs-secondary-600-rgb: var(--bs-gray-600-rgb); --bs-secondary-700: var(--bs-gray-700); --bs-secondary-700-rgb: var(--bs-gray-700-rgb); --bs-secondary-800: var(--bs-gray-800); --bs-secondary-800-rgb: var(--bs-gray-800-rgb); --bs-secondary-900: var(--bs-gray-900); --bs-secondary-900-rgb: var(--bs-gray-900-rgb); --bs-secondary-950: var(--bs-gray-950); --bs-secondary-950-rgb: var(--bs-gray-950-rgb); --bs-success-50: var(--bs-green-50); --bs-success-50-rgb: var(--bs-green-50-rgb); --bs-success-100: var(--bs-green-100); --bs-success-100-rgb: var(--bs-green-100-rgb); --bs-success-200: var(--bs-green-200); --bs-success-200-rgb: var(--bs-green-200-rgb); --bs-success-300: var(--bs-green-300); --bs-success-300-rgb: var(--bs-green-300-rgb); --bs-success-400: var(--bs-green-400); --bs-success-400-rgb: var(--bs-green-400-rgb); --bs-success: var(--bs-green-500); --bs-success-rgb: var(--bs-green-500-rgb); --bs-success-600: var(--bs-green-600); --bs-success-600-rgb: var(--bs-green-600-rgb); --bs-success-700: var(--bs-green-700); --bs-success-700-rgb: var(--bs-green-700-rgb); --bs-success-800: var(--bs-green-800); --bs-success-800-rgb: var(--bs-green-800-rgb); --bs-success-900: var(--bs-green-900); --bs-success-900-rgb: var(--bs-green-900-rgb); --bs-success-950: var(--bs-green-950); --bs-success-950-rgb: var(--bs-green-950-rgb); --bs-info-50: var(--bs-sky-50); --bs-info-50-rgb: var(--bs-sky-50-rgb); --bs-info-100: var(--bs-sky-100); --bs-info-100-rgb: var(--bs-sky-100-rgb); --bs-info-200: var(--bs-sky-200); --bs-info-200-rgb: var(--bs-sky-200-rgb); --bs-info-300: var(--bs-sky-300); --bs-info-300-rgb: var(--bs-sky-300-rgb); --bs-info-400: var(--bs-sky-400); --bs-info-400-rgb: var(--bs-sky-400-rgb); --bs-info: var(--bs-sky-500); --bs-info-rgb: var(--bs-sky-500-rgb); --bs-info-600: var(--bs-sky-600); --bs-info-600-rgb: var(--bs-sky-600-rgb); --bs-info-700: var(--bs-sky-700); --bs-info-700-rgb: var(--bs-sky-700-rgb); --bs-info-800: var(--bs-sky-800); --bs-info-800-rgb: var(--bs-sky-800-rgb); --bs-info-900: var(--bs-sky-900); --bs-info-900-rgb: var(--bs-sky-900-rgb); --bs-info-950: var(--bs-sky-950); --bs-info-950-rgb: var(--bs-sky-950-rgb); --bs-warning-50: var(--bs-amber-50); --bs-warning-50-rgb: var(--bs-amber-50-rgb); --bs-warning-100: var(--bs-amber-100); --bs-warning-100-rgb: var(--bs-amber-100-rgb); --bs-warning-200: var(--bs-amber-200); --bs-warning-200-rgb: var(--bs-amber-200-rgb); --bs-warning-300: var(--bs-amber-300); --bs-warning-300-rgb: var(--bs-amber-300-rgb); --bs-warning-400: var(--bs-amber-400); --bs-warning-400-rgb: var(--bs-amber-400-rgb); --bs-warning: var(--bs-amber-500); --bs-warning-rgb: var(--bs-amber-500-rgb); --bs-warning-600: var(--bs-amber-600); --bs-warning-600-rgb: var(--bs-amber-600-rgb); --bs-warning-700: var(--bs-amber-700); --bs-warning-700-rgb: var(--bs-amber-700-rgb); --bs-warning-800: var(--bs-amber-800); --bs-warning-800-rgb: var(--bs-amber-800-rgb); --bs-warning-900: var(--bs-amber-900); --bs-warning-900-rgb: var(--bs-amber-900-rgb); --bs-warning-950: var(--bs-amber-950); --bs-warning-950-rgb: var(--bs-amber-950-rgb); --bs-danger-50: var(--bs-red-50); --bs-danger-50-rgb: var(--bs-red-50-rgb); --bs-danger-100: var(--bs-red-100); --bs-danger-100-rgb: var(--bs-red-100-rgb); --bs-danger-200: var(--bs-red-200); --bs-danger-200-rgb: var(--bs-red-200-rgb); --bs-danger-300: var(--bs-red-300); --bs-danger-300-rgb: var(--bs-red-300-rgb); --bs-danger-400: var(--bs-red-400); --bs-danger-400-rgb: var(--bs-red-400-rgb); --bs-danger: var(--bs-red-500); --bs-danger-rgb: var(--bs-red-500-rgb); --bs-danger-600: var(--bs-red-600); --bs-danger-600-rgb: var(--bs-red-600-rgb); --bs-danger-700: var(--bs-red-700); --bs-danger-700-rgb: var(--bs-red-700-rgb); --bs-danger-800: var(--bs-red-800); --bs-danger-800-rgb: var(--bs-red-800-rgb); --bs-danger-900: var(--bs-red-900); --bs-danger-900-rgb: var(--bs-red-900-rgb); --bs-danger-950: var(--bs-red-950); --bs-danger-950-rgb: var(--bs-red-950-rgb); --bs-light: var(--bs-gray-50); --bs-light-rgb: var(--bs-gray-50-rgb); --bs-dark: var(--bs-gray-950); --bs-dark-rgb: var(--bs-gray-950-rgb); --bs-primary-text-emphasis: var(--bs-primary-700); --bs-primary-text-emphasis-rgb: var(--bs-primary-700-rgb); --bs-primary-bg-subtle: var(--bs-primary-50); --bs-primary-border-subtle: var(--bs-primary-200); --bs-secondary-text-emphasis: var(--bs-secondary-700); --bs-secondary-text-emphasis-rgb: var(--bs-secondary-700-rgb); --bs-secondary-bg-subtle: var(--bs-secondary-50); --bs-secondary-border-subtle: var(--bs-secondary-200); --bs-success-text-emphasis: var(--bs-success-700); --bs-success-text-emphasis-rgb: var(--bs-success-700-rgb); --bs-success-bg-subtle: var(--bs-success-50); --bs-success-border-subtle: var(--bs-success-200); --bs-info-text-emphasis: var(--bs-info-800); --bs-info-text-emphasis-rgb: var(--bs-info-800-rgb); --bs-info-bg-subtle: var(--bs-info-100); --bs-info-border-subtle: var(--bs-info-200); --bs-warning-text-emphasis: var(--bs-warning-700); --bs-warning-text-emphasis-rgb: var(--bs-warning-700-rgb); --bs-warning-bg-subtle: var(--bs-warning-50); --bs-warning-border-subtle: var(--bs-warning-200); --bs-danger-text-emphasis: var(--bs-danger-700); --bs-danger-text-emphasis-rgb: var(--bs-danger-700-rgb); --bs-danger-bg-subtle: var(--bs-danger-50); --bs-danger-border-subtle: var(--bs-danger-200); --bs-light-text-emphasis: var(--bs-gray-600); --bs-light-text-emphasis-rgb: var(--bs-gray-600-rgb); --bs-light-bg-subtle: var(--bs-white); --bs-light-border-subtle: var(--bs-gray-100); --bs-dark-text-emphasis: var(--bs-white); --bs-dark-text-emphasis-rgb: var(--bs-white-rgb); --bs-dark-bg-subtle: var(--bs-gray-700); --bs-dark-border-subtle: var(--bs-gray-900); /* В стеке только реально подключённый Mulish + системные fallback'и. Nunito Sans / Montserrat убраны — их @font-face не подключается (мёртвые звенья). */ --bs-font-sans-serif: 'Mulish', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Основной текст чтения — вариант B (18px / 1.7). BS читает эти переменные для body. */ --bs-body-font-size: var(--text-body); --bs-body-line-height: var(--lh-body); /* База текста НЕ на дне шкалы — иначе акценту некуда усиливаться. Прежде body и emphasis сидели на одном --bs-dark (= gray-950, дно): роль «акцент» не работала ни у одного просителя, а --bs-heading-color ниже был закомментирован как бессмысленный (совпадал с body). Dark всегда держал базу на ступень от края (gray-100 при акценте gray-50) — light теперь зеркалит его: 900 / 950. -rgb прежде указывал на secondary-rgb, тогда как сам токен на dark — пара сошлась. */ --bs-body-color: var(--bs-gray-900); --bs-body-color-rgb: var(--bs-gray-900-rgb); --bs-body-bg: var(--bs-white); --bs-body-bg-rgb: var(--bs-white-rgb); --bs-emphasis-color: var(--bs-gray-950); --bs-emphasis-color-rgb: var(--bs-gray-950-rgb); --bs-secondary-color: var(--bs-secondary); --bs-secondary-color-rgb: var(--bs-secondary-rgb); --bs-secondary-bg: var(--bs-light); --bs-secondary-bg-rgb: var(--bs-light-rgb); --bs-tertiary-color: rgba(var(--bs-dark-rgb), 0.5); --bs-tertiary-color-rgb: var(--bs-dark-rgb); --bs-tertiary-bg: var(--bs-light); --bs-tertiary-bg-rgb: var(--bs-light-rgb); --bs-heading-color: var(--bs-gray-950); /* = emphasis, как в dark (там оба gray-50) */ /* Ссылка = 600 (контраст 4.98 на белом, WCAG AA), hover = 700 (темнеет). 500 давал 3.68 — провал AA для обычного текста (ревизия «Панелью линз»). */ --bs-link-color: var(--bs-primary-600); --bs-link-color-rgb: var(--bs-primary-600-rgb); --bs-link-hover-color: var(--bs-primary-700); --bs-link-hover-color-rgb: var(--bs-primary-700-rgb); --bs-highlight-color: var(--bs-warning-900); --bs-highlight-bg: var(--bs-warning-100); --bs-border-color: rgba(var(--bs-gray-100-rgb), .75); /*--bs-border-color-translucent: rgba(0, 0, 0, 0.175);*/ /* ------------------------------------------- Шкала радиусов (величина угла) Прогрессивный шаг (+4,+4,+6,+8), как в type scale. Имя = роль по возрастанию (значение можно менять, имя не врёт). rem — как BS и type scale (уважает размер шрифта браузера). pill/circle — вне числовой шкалы: это другая природа (полное скругление / круг). Примитивы --radius-* → мост на BS-имена ниже (двухуровнево, как цвет). Роли ниже — по факту рендера (ревизия 2026-07-16), не по замыслу. Лестница вся сидит на ступень крупнее «нормальной»: squircle (--corner-shape ниже) съедает визуальное скругление — при superellipse(1.5) то же число читается менее круглым, поэтому каждая роль забирает число крупнее. Правило чтения шкалы: размер объекта растёт → радиус растёт (кнопка < врезка < карточка). ------------------------------------------- */ --radius-xs: 0.375rem; /* 6px — бейджи, , мелкие метки */ --radius-sm: 0.625rem; /* 10px — мелкие варианты: .btn-sm, поля-sm, навигация/пагинация */ --radius-md: 0.875rem; /* 14px — БАЗА: кнопки и поля ввода (пара обязана совпадать), alert, комментарии */ --radius-lg: 1.25rem; /* 20px — врезки callout, цитаты, .btn-lg */ --radius-xl: 1.75rem; /* 28px — поверхности: карточки, модалки, дропдауны, панели */ --radius-2xl: 2.5rem; /* 40px — НЕ ЗАНЯТ: верхняя граница шкалы, задел (решение владельца 2026-07-16). Кандидата (content-container) примеряли в рендере — против 28 разницы не видно: угол один, у края экрана, squircle его ещё и съедает. Не «забытый хвост», а осознанный запас. */ --radius-pill: 999px; /* таблетки (бейджи-pill, круглые кнопки, tagline) */ --radius-circle: 50%; /* аватары, круглые иконки, круглые кнопки */ /* Мост к Bootstrap: BS-имена — живые алиасы на шкалу. Компоненты (--bs-card-*, --bs-modal-*, callout и т.д.) и bootstrap.min.css продолжают читать эти имена — правим шкалу в одном месте. */ --bs-border-radius: var(--radius-md); --bs-border-radius-smr: var(--radius-xs); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-xxl: var(--radius-2xl); /* Форма угла (squircle) — НЕ величина. Ось независима от шкалы выше: corner-shape: superellipse(var(--corner-shape)) по теме. Не трогаем. */ --corner-shape: 1.5; /* ------------------------------------------- Лестница теней (высота / elevation) Тень кодирует, насколько объект приподнят: покоится → карточка → меню → диалог. Каждый уровень многослойный (контактный + рассеянный), выше объект — больше сдвиг и размытие. Цвет — --box-shadow-color (холодный серый, НЕ чёрный); его можно локально переопределить у акцентного элемента, форма лестницы при этом общая. Характер «мягкий»: широкое рассеяние, низкая альфа. В dark тень уходит в чёрный (см. ниже) и почти не читается — там высоту даёт светлота поверхности. ------------------------------------------- */ --shadow-rest: none; --shadow-raised: 0 1px 2px rgba(var(--box-shadow-color), 0.04), 0 4px 8px rgba(var(--box-shadow-color), 0.05), 0 12px 20px rgba(var(--box-shadow-color), 0.06); --shadow-overlay: 0 2px 4px rgba(var(--box-shadow-color), 0.05), 0 8px 16px rgba(var(--box-shadow-color), 0.07), 0 20px 32px rgba(var(--box-shadow-color), 0.07); --shadow-modal: 0 4px 8px rgba(var(--box-shadow-color), 0.06), 0 16px 32px rgba(var(--box-shadow-color), 0.09), 0 32px 56px rgba(var(--box-shadow-color), 0.11); /* «Стеклянный» верхний блик — вынесен из старого lg. Накладывать точечно (dropdown/капсулы), НЕ тащить в каждую высокую тень. */ --shadow-inner-highlight: inset 0 1px 0 rgba(var(--bs-white-rgb), 0.12); /* Мост к Bootstrap: BS-имена теней = уровни лестницы (sm→raised, base→overlay, lg→modal). Компоненты продолжают читать эти имена. */ --bs-box-shadow-sm: var(--shadow-raised); --bs-box-shadow: var(--shadow-overlay); --bs-box-shadow-lg: var(--shadow-modal); /* Глубокий холодный серый (gray-900). Был gray-500 — тени бледнили. */ --box-shadow-color: var(--bs-gray-900-rgb); /*--bs-box-shadow: 0px 24px 22px rgba(var(--bs-secondary-rgb), 0.0372022), 0px 8.5846px 8.03036px rgba(var(--bs-secondary-rgb), 0.0532451), 0px 4.77692px 3.89859px rgba(var(--bs-secondary-rgb), 0.0667549), 0px 2.63479px 1.91116px rgba(var(--bs-secondary-rgb), 0.0827978), 0px 1.15891px 0.755676px rgba(var(--bs-secondary-rgb), 0.12);*/ --bs-form-valid-color: var(--bs-success); --bs-form-valid-border-color: var(--bs-success); --bs-form-invalid-color: var(--bs-danger); --bs-form-invalid-border-color: var(--bs-danger); /*--scrollbar-track: transparent;*/ --scrollbar-track: rgba(var(--bs-gray-300-rgb), 0.15); --scrollbar-thumb: var(--bs-gray-400); --scrollbar-thumb-hover: var(--bs-gray-400); --navbar-h: 56px; --cont-fix-h-100vh: calc(100vh - var(--navbar-h)); --cont-fix-h-100pct: calc(100% - var(--navbar-h)); /* ------------------------------------------- Типографическая шкала (type scale) Прогрессивная: ratio растёт от текста (~1.12) к дисплею (~1.5) — внизу тонкие различия (чтение/UI), вверху резкий контраст (акценты). Корень браузера = 16px НЕ трогаем (rem-математика, доступность). Примитивы --fs-* → семантические роли --text-* ниже. ------------------------------------------- */ --fs-2xs: 0.75rem; /* 12px — метаданные, подписи, бейджи */ --fs-xs: 0.875rem; /* 14px — навигация, вторичный UI */ --fs-sm: 1rem; /* 16px — вторичный текст, база UI */ --fs-base: 1.125rem; /* 18px — основной текст чтения (prose) */ --fs-md: 1.25rem; /* 20px — lead, крупный UI, h4 */ --fs-lg: 1.5rem; /* 24px — h3 */ --fs-xl: 1.75rem; /* 28px — h2 */ --fs-2xl: 2.25rem; /* 36px — h1 */ --fs-3xl: 3rem; /* 48px — hero (моб.) */ --fs-4xl: 4.5rem; /* 72px — hero (десктоп) */ /* line-height: крупнее кегль → плотнее интерлиньяж */ --lh-tight: 1.2; /* дисплей / h1 */ --lh-heading: 1.3; /* h2 */ --lh-snug: 1.35; /* h3 */ --lh-ui: 1.4; /* h4, интерфейс, метаданные */ --lh-lead: 1.6; /* первый абзац */ --lh-body: 1.7; /* основной текст чтения */ /* Семантические роли (алиасы на примитивы) */ --text-meta: var(--fs-2xs); --text-ui-sm: var(--fs-xs); --text-ui: var(--fs-sm); --text-body: var(--fs-base); --text-lead: var(--fs-md); --text-h4: var(--fs-md); --text-h3: var(--fs-lg); --text-h2: var(--fs-xl); --text-h1: var(--fs-2xl); --text-display-sm: var(--fs-3xl); --text-display-lg: var(--fs-4xl); /* Ширина строки чтения (measure) — ~65–70 символов при 18px. Применяется к long-form статье, чтобы строка не растягивалась. */ --measure-prose: 42rem; /* ------------------------------------------- Шкала отступов (ритм / spacing) Сетка 8px с полушагом 4px. Отступ кодирует близость: связанное — мелкая ступень, разное — крупная. rem — как type scale и BS-spacer. Ступени 4/8/16/24/48 совпадают с Bootstrap-утилитами (m-, p-, gap-), так словарь и утилиты в разметке дают один ритм; 12/32/64/96 — то, чего в BS нет (дыры + крупные секции). Для CSS темы и тела контента; разметку на утилитах не заменяет. */ --space-2xs: 0.25rem; /* 4px — внутри группы (имя↔автор), inline */ --space-xs: 0.5rem; /* 8px — чипы, теги, тесные пары */ --space-sm: 0.75rem; /* 12px — компактный стек */ --space-md: 1rem; /* 16px — базовый стек, padding карточки */ --space-lg: 1.5rem; /* 24px — между группами внутри блока */ --space-xl: 2rem; /* 32px — между блоками */ --space-2xl: 3rem; /* 48px — крупные отбивки */ --space-3xl: 4rem; /* 64px — между секциями */ --space-4xl: 6rem; /* 96px — секции лендинга/hero */ /* Старые --font-size-* удалены (были не подключены ни в одном правиле) */ /*--backdrop-bg: rgba(32, 64, 112, 0.5);*/ --backdrop-bg: rgba(var(--bs-gray-900-rgb), 0.5); /* Шкала размытия (примитивы). Порядок: smlr 5 → sm 10 → md 16 → base 20. ⚠️ Имена шкалы просят ревизии (базовое имя без суффикса = САМАЯ крупная ступень, а не средняя) — отложено владельцем 2026-07-16 до переосмысления, сейчас важнее убрать хардкоды. */ --backdrop-filter-blur-smlr: saturate(180%) blur(5px); --backdrop-filter-blur-sm: saturate(180%) blur(10px); /* Ступень шапки. Заведена 2026-07-16 под ФАКТ рендера: шапка в обеих темах размывала на 16px мимо шкалы (числами в двух местах). Значение не подгоняли под шкалу — наоборот, шкала признала существующую ступень (тот же ход, что в radius-scale: значения здоровые, врали имена). Разнобой saturate снят: light-шапка держала 160%, dark и вся шкала — 180%. Замер (композит под шапкой на 4 подложках): разница 160↔180 = 0–2.3 ед. RGB при пороге заметности ~3, контраст 1.00–1.01 → глазом не видна, вид шапки унификация не меняет. 160% было случайным отклонением, не замыслом. */ --backdrop-filter-blur-md: saturate(180%) blur(16px); --backdrop-filter-blur: saturate(180%) blur(20px); /* — «Стекло» (glassmorphism): роли поверхности — Приём: backdrop-filter размывает и насыщает подложку + полупрозрачный фон + светлые inset-грани дают ощущение толщины. Роли — второй уровень над шкалой размытия выше; dark-карта — в блоке [data-bs-theme="dark"]. ⚠️ Читаемость на стекле обеспечивает КОНТРАСТ ТЕКСТА (роль темы), а НЕ плотность фона: подложка под стеклом произвольна, считать надо на худшей. Замер 2026-07-16 (дропдаун над градиентом hero, худший случай): текст на примитиве gray-700 = 2.74 (провал), на роли body-color = 6.93 при той же прозрачности 0.6. Плотность фона этого не чинит: 0.85 даёт лишь 4.15 и убивает сам эффект. Подробности — __wiki/decisions/glass-effect.md Контур стекла — это border (штатный механизм), НЕ слой в box-shadow: в тени он дублировал border и давал двойную линию. */ --glass-bg: rgba(var(--bs-white-rgb), 0.6); --glass-blur: var(--backdrop-filter-blur-sm); --glass-edge: rgba(var(--bs-white-rgb), 0.6); --glass-highlight: inset 0px 0px 20px 1px rgba(var(--bs-white-rgb), 0.8), inset 0px 2px 0px 1px rgba(var(--bs-white-rgb), 0.6), inset 0px -2px 0px 1px rgba(var(--bs-white-rgb), 0.5); /* Стекло ПОЛОСЫ (шапка) — вторая роль стекла, отличается ПОДЛОЖКОЙ. --glass-bg выше — стекло ПОВЕРХНОСТИ (дропдаун, поповер): парит над страницей, потому стоит на secondary-bg (в dark высоту даёт светлота, см. color-system-dark). Шапка лежит ЗАПОДЛИЦО с фоном страницы → её база body-bg, и формула одна на обе темы (меняется лишь база темы). Заменила самозванца --bs-navbar-bg: префикс --bs- обещал штатную переменную Bootstrap, но такой у BS нет (он знает 20 других --bs-navbar-*, bg среди них отсутствует). Тот же узор, что в radius-scale: врали ИМЕНА. Плотность .6 — замер 2026-07-16 на живой главной: было .8/.95 (заметность стекла 1.12 = глухая плашка, градиент hero под шапкой пропадал целиком). Опустить плотность позволил перевод текста пунктов с примитива secondary-700 на роль body-color: контраст над худшей подложкой при этом не упал, а ВЫРОС (4.78 → 6.15…8.08), заметность стекла 1.12 → 2.85. Плотность — ложный рычаг читаемости, рычаг — контраст текста. */ --glass-bar-bg: rgba(var(--bs-body-bg-rgb), 0.6); --transition-options-15: 0.15s ease-in-out; --transition-options-25: 0.25s ease-in-out; --transition-options-35: 0.35s ease-in-out; --transition-value-all: all 0.25s ease-in-out; /* Был отдельной (неиспользуемой) системой — сведён в лестницу. Оставлен алиасом, чтобы старые ссылки, если всплывут, легли в overlay. */ --ui-box-shadow: var(--shadow-overlay); --ui-box-shadow-color: var(--box-shadow-color); --icon-chevron-right-fill: var(--bs-blue-200); --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 512'%3E%3Cpath fill='%2396b4ff' d='M282.3,226.8c13,13,13,38.9,0,51.8L61.6,502.3c-13,13-38.9,13-51.9,0c-13-13-13-38.9,0-51.8L204.4,256L9.7,61.6 c-13-13-13-38.9,0-51.8s38.9-13,51.9,0L282.3,226.8L282.3,226.8z'/%3E%3C/svg%3E"); --icon-chevron-right-dark-fill: var(--bs-gray-900); --icon-chevron-right-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 512'%3E%3Cpath fill='%23333846' d='M282.3,226.8c13,13,13,38.9,0,51.8L61.6,502.3c-13,13-38.9,13-51.9,0c-13-13-13-38.9,0-51.8L204.4,256L9.7,61.6 c-13-13-13-38.9,0-51.8s38.9-13,51.9,0L282.3,226.8L282.3,226.8z'/%3E%3C/svg%3E"); --icon-xmark-fill: var(--bs-gray-500); --icon-xmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 317.5 317.5'%3E%3Cpath fill='%237986a6' d='M290.4,312.9c6.2,6.2,16.3,6.2,22.5,0c6.2-6.2,6.2-16.3,0-22.5L181.2,158.7L312.9,27.1c6.2-6.2,6.2-16.3,0-22.5 c-6.2-6.2-16.3-6.2-22.5,0L158.7,136.3L27.1,4.6c-6.2-6.2-16.3-6.2-22.5,0s-6.2,16.3,0,22.5l131.7,131.7L4.6,290.4 c-6.2,6.2-6.2,16.3,0,22.5c6.2,6.2,16.3,6.2,22.5,0l131.7-131.7L290.4,312.9z'/%3E%3C/svg%3E"); --icon-xmark-light-fill: var(--bs-white); --icon-xmark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 317.5 317.5'%3E%3Cpath fill='%23fff' d='M290.4,312.9c6.2,6.2,16.3,6.2,22.5,0c6.2-6.2,6.2-16.3,0-22.5L181.2,158.7L312.9,27.1c6.2-6.2,6.2-16.3,0-22.5 c-6.2-6.2-16.3-6.2-22.5,0L158.7,136.3L27.1,4.6c-6.2-6.2-16.3-6.2-22.5,0s-6.2,16.3,0,22.5l131.7,131.7L4.6,290.4 c-6.2,6.2-6.2,16.3,0,22.5c6.2,6.2,16.3,6.2,22.5,0l131.7-131.7L290.4,312.9z'/%3E%3C/svg%3E"); --icon-xmark-dark-fill: var(--bs-gray-900); --icon-xmark-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 317.5 317.5'%3E%3Cpath fill='%23333846' d='M290.4,312.9c6.2,6.2,16.3,6.2,22.5,0c6.2-6.2,6.2-16.3,0-22.5L181.2,158.7L312.9,27.1c6.2-6.2,6.2-16.3,0-22.5 c-6.2-6.2-16.3-6.2-22.5,0L158.7,136.3L27.1,4.6c-6.2-6.2-16.3-6.2-22.5,0s-6.2,16.3,0,22.5l131.7,131.7L4.6,290.4 c-6.2,6.2-6.2,16.3,0,22.5c6.2,6.2,16.3,6.2,22.5,0l131.7-131.7L290.4,312.9z'/%3E%3C/svg%3E"); --icon-navbar-toggler-fill: var(--bs-gray-300); --icon-navbar-toggler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 132'%3E%3Cpath fill='%2393C5FD' d='M66,0c36.5,0,66,29.5,66,66s-29.5,66-66,66S0,102.5,0,66S29.5,0,66,0z M256,0c36.5,0,66,29.5,66,66 s-29.5,66-66,66s-66-29.5-66-66S219.5,0,256,0z M446,0c36.5,0,66,29.5,66,66s-29.5,66-66,66s-66-29.5-66-66S409.5,0,446,0z'/%3E%3C/svg%3E"); --icon-navbar-toggler-sidebar-fill: var(--bs-gray-300); --icon-navbar-toggler-sidebar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 440'%3E%3Cpath fill='%23a5aec3' d='M0,36C0,16.1,16.3,0,36.6,0h438.9C495.7,0,512,16.1,512,36s-16.3,36-36.6,36H36.6C16.3,72,0,55.9,0,36z M0,404 c0-19.9,16.3-36,36.6-36h438.9c20.2,0,36.6,16.1,36.6,36s-16.3,36-36.6,36H36.6C16.3,440,0,423.9,0,404z M0,220 c0-19.9,16.3-36,36.6-36h438.9c20.2,0,36.6,16.1,36.6,36s-16.3,36-36.6,36H36.6C16.3,256,0,239.9,0,220z'/%3E%3C/svg%3E"); --bs-form-select-bg-img: var(--icon-chevron-right-dark); /*--bs-form-select-bg-icon: url("");*/ --bs-btn-close-bg: var(--icon-xmark-dark); --sidebar-max-width: 300px; --contentbar-max-width: calc(100% - var(--sidebar-max-width)); } /* ========================================================================= ТЁМНАЯ ТЕМА — вторая карта ролей→ступеней (этап 1 согласован 2026-07-09). Примитивы (--bs-*-50…950) те же — меняется только семантический слой. Полная карта, контрасты и обоснование: __wiki/decisions/color-system-dark.md Все пары выверены WCAG AA для текста. Активируется атрибутом [data-bs-theme="dark"] на (переключатель — этап 3). NB: иконки-data-URI, скроллбар, --backdrop-bg, кастомные блоки style.css (hero/navbar/cats/safety-badge) — прочёс на этапе 5; доводка теней — этап 7. ========================================================================= */ [data-bs-theme="dark"] { /* — База (нейтральный каркас) — */ --bs-body-color: var(--bs-gray-100); --bs-body-color-rgb: var(--bs-gray-100-rgb); --bs-body-bg: var(--bs-gray-950); --bs-body-bg-rgb: var(--bs-gray-950-rgb); --bs-emphasis-color: var(--bs-gray-50); --bs-emphasis-color-rgb: var(--bs-gray-50-rgb); --bs-heading-color: var(--bs-gray-50); --bs-secondary-color: var(--bs-gray-400); --bs-secondary-color-rgb: var(--bs-gray-400-rgb); --bs-secondary-bg: var(--bs-gray-900); --bs-secondary-bg-rgb: var(--bs-gray-900-rgb); --bs-tertiary-color: var(--bs-gray-500); --bs-tertiary-color-rgb: var(--bs-gray-500-rgb); --bs-tertiary-bg: var(--bs-gray-900); --bs-tertiary-bg-rgb: var(--bs-gray-900-rgb); --bs-border-color: var(--bs-gray-800); /* — Ссылки (на тёмном контраст растёт → светлее) — */ --bs-link-color: var(--bs-primary-400); --bs-link-color-rgb: var(--bs-primary-400-rgb); --bs-link-hover-color: var(--bs-primary-300); --bs-link-hover-color-rgb: var(--bs-primary-300-rgb); /* — Выделение (зеркалит light 100/900) — */ --bs-highlight-color: var(--bs-warning-200); --bs-highlight-bg: var(--bs-warning-900); /* — Цветные роли (единое правило): emphasis 300, bg-subtle 900, border-subtle 700 — */ --bs-primary-text-emphasis: var(--bs-primary-300); --bs-primary-text-emphasis-rgb: var(--bs-primary-300-rgb); --bs-primary-bg-subtle: var(--bs-primary-900); --bs-primary-border-subtle: var(--bs-primary-700); --bs-secondary-text-emphasis: var(--bs-secondary-300); --bs-secondary-text-emphasis-rgb: var(--bs-secondary-300-rgb); --bs-secondary-bg-subtle: var(--bs-secondary-900); --bs-secondary-border-subtle: var(--bs-secondary-700); --bs-success-text-emphasis: var(--bs-success-300); --bs-success-text-emphasis-rgb: var(--bs-success-300-rgb); --bs-success-bg-subtle: var(--bs-success-900); --bs-success-border-subtle: var(--bs-success-700); --bs-info-text-emphasis: var(--bs-info-300); --bs-info-text-emphasis-rgb: var(--bs-info-300-rgb); --bs-info-bg-subtle: var(--bs-info-900); --bs-info-border-subtle: var(--bs-info-700); --bs-warning-text-emphasis: var(--bs-warning-300); --bs-warning-text-emphasis-rgb: var(--bs-warning-300-rgb); --bs-warning-bg-subtle: var(--bs-warning-900); --bs-warning-border-subtle: var(--bs-warning-700); --bs-danger-text-emphasis: var(--bs-danger-300); --bs-danger-text-emphasis-rgb: var(--bs-danger-300-rgb); --bs-danger-bg-subtle: var(--bs-danger-900); --bs-danger-border-subtle: var(--bs-danger-700); /* — Тени: на тёмном не читаются как на белом → базовый цвет в чёрный; elevation даётся светлотой поверхности. Доводка (свечение/бордер) — этап 7. — */ --box-shadow-color: var(--bs-black-rgb); --ui-box-shadow-color: var(--bs-black-rgb); /* — «Стекло» в dark: тёмная подложка + СЛАБЫЕ светлые грани — Тёмное стекло существует, но по своему рецепту, не по светлому: белые блики светлой темы (α .5–.8) на тёмном давали грубые ободки — их сняли 2026-07-09, из-за чего приём в dark выродился в плашку (фон .9 + блюр). Возвращаем эффект честно: прозрачность даём (.9 → .85), грани — той же формы, что в light, но альфой в 6–10 раз ниже (рёбра лишь намечают толщину, а не рисуют ободок). Фон — на РОЛИ secondary-bg (поверхность), не на примитиве: примитивы не переворачиваются между темами. ⚠️ Почему .85, а не прозрачнее (замер 2026-07-16 на живом обзоре): в dark физика ОБРАТНАЯ светлой теме — светлая подложка осветляет стекло и топит светлый текст. Под меню на обзорах реально попадают скриншоты программ (окна Windows светлые) — специфика софт-портала, проверено, не гипотеза. При .75 текст над белым кадром давал 3.71 (провал). Держим три критерия разом: текст над белым ≥4.5 / elevation меню к фону / заметность стекла → .85 даёт 4.94 + 1.57 + 1.72. Вариант «база gray-950 @.75» давал текст 5.08, но elevation 1.11 — меню сливалось с фоном, а в dark высоту даёт светлота поверхности (см. color-system-dark). */ --glass-bg: rgba(var(--bs-secondary-bg-rgb), 0.85); --glass-edge: rgba(var(--bs-white-rgb), 0.14); /* Стекло полосы в dark плотнее light (.7 против .6) — та же обратная физика, что у --glass-bg выше: светлая подложка топит СВЕТЛЫЙ текст. Предел найден замером на живом обзоре (под шапку реально заезжает светлый кадр, 97% светлых пикселей): текст на роли body-color над ним даёт .7 → 4.55 ✓, .6 → 3.37 ✗. Прежние .58/.78 при тексте на примитиве secondary-300 давали 4.12 — недобор к норме 4.5. */ --glass-bar-bg: rgba(var(--bs-body-bg-rgb), 0.7); --glass-highlight: inset 0px 0px 20px 1px rgba(var(--bs-white-rgb), 0.05), inset 0px 2px 0px 1px rgba(var(--bs-white-rgb), 0.10), inset 0px -2px 0px 1px rgba(var(--bs-white-rgb), 0.04); } /* Body-фон в dark — глубокая ровная база + деликатный точечный паттерн («инженерная» эстетика софт-портала). Диагональный трёхцветный градиент отверг: три равнотёмных цвета давали грязь без источника света. Плоская база #14161D (глубже gray-950, чтобы поверхности gray-900 всплывали) + белые точки шаг 18px / 1px / α .06. Значения согласованы с владельцем в конструкторе (2026-07-09). */ [data-bs-theme="dark"] body { background-color: #14161D; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 18px 18px; } @media (min-width: 576px) { /* ---------------------------------------- scrollbar ---------------------------------------- */ * { /*scrollbar-width: thin;*/ /*scrollbar-color: var(--scrollbar-thumb) transparent;*/ } *:hover { /*scrollbar-color: var(--scrollbar-thumb-hover) transparent;*/ } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-track); /* Полоса шириной 6px: радиус больше половины ширины = полное скругление. Было 1rem — по смыслу это pill, а не «ступень 16». */ border-radius: var(--radius-pill); /*transition: all 0.25s ease-in-out;*/ } *:hover::-webkit-scrollbar-track { background-color: var(--scrollbar-track); } *::-webkit-scrollbar-corner { background-color: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); } *:hover::-webkit-scrollbar-thumb { /*background-color: var(--scrollbar-thumb-hover);*/ } } /* ------------------------------------------- body ------------------------------------------- */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { /* Переносы по слогам — НАСЛЕДУЕМО от body, а не с `*` (было там до 2026-07-16). Поведение по умолчанию то же, но становится управляемым: `*` переназначал hyphens каждому элементу лично и ЛОМАЛ наследование — выключить переносы для куска страницы было нельзя (контейнеру ставишь manual, а дочерний

всё равно получал auto от `*`). Работает только при lang у (у нас lang="ru" в main.tpl) — без него браузер молча не переносит. Замер 2026-07-16 (почему auto оставлен): на UI (кнопки/бейджи/навигация/ табы) не срабатывает ни разу; на заголовках десктопа — ни разу; в абзацах на мобильной ширине — 25 из 29, и без него длинные русские слова («кросс-платформенность») вылезают за край колонки. */ hyphens: auto; background-color: var(--bs-primary-50); background-image: linear-gradient(to bottom right, var(--bs-secondary-50) 0%, var(--bs-white) 50%, var(--bs-primary-50) 100%); /*background-image: linear-gradient(0deg, #a1e5c0 0%, #a1e5c0 100%);*/ /*background-repeat: no-repeat;*/ /*background-position: center top;*/ /*background-size: cover;*/ /*background-attachment: fixed;*/ } /* ------------------------------------------- mh-100vh ------------------------------------------- */ .mh-100vh, html, body { min-height: 100vh; }