/* Токены: цвета и шкалы. Имена и роли — каркас Great stat / Pronina school (Work/Дизайн-система.md), с ними компоненты работают без правок. Значения — свои, по айдентике Pronina: ../context/09-айдентика.md. Подключается первой таблицей стилей. Сырые цвета и размеры вне этого файла не пишем, это проверяет tests/test_design.py. Тема одна, светлая: у айдентики фон Light или белый. Вторая добавится блоком :root[data-theme="dark"] с теми же именами. */ @font-face{font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/onest-cyrillic-400.ttf) format('truetype'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/onest-cyrillic-500.ttf) format('truetype'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/onest-cyrillic-600.ttf) format('truetype'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/onest-cyrillic-700.ttf) format('truetype'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/onest-latin-400.ttf) format('truetype'); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212;} @font-face{font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/onest-latin-500.ttf) format('truetype'); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212;} @font-face{font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/onest-latin-600.ttf) format('truetype'); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212;} @font-face{font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/onest-latin-700.ttf) format('truetype'); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212;} @font-face{font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/playfair-400.ttf) format('truetype');} :root{ --font-sys: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; --font-body: 'Onest',var(--font-sys); --font-head: 'Onest',var(--font-sys); /* заголовки блоков, окна, цифры */ --font-display: 'Playfair Display',Georgia,serif; /* заголовок страницы, как в постах школы */ --font-mono: ui-monospace,Consolas,monospace; /* Палитра айдентики. Берём цвет, стоящий в логотипах и иллюстрациях */ --brand-light: #F6F1F1; /* Light */ --brand-tomato: #BC1C23; /* Summer Tomato */ --brand-carrot: #F54E38; /* Market Carrot */ --brand-garden: #006D17; /* Kitchen Garden */ --brand-sage: #90B170; /* Sage Leaf */ --brand-blue: #4B5DBA; /* Blue Hour */ --brand-plum: #7F4468; /* Plum Jam */ --brand-mist: #E5F3FC; /* без названия, из Figma */ /* Смысловые */ --bg: var(--brand-light); --fg: #1C1817; --card: #FFFFFF; --card-fg: var(--fg); --popover: #FFFFFF; --accent: var(--brand-garden); --accent-fg: #FFFFFF; --accent-text: var(--brand-garden); --secondary: var(--brand-sage); --secondary-fg: var(--fg); --muted: #EDE6E5; --muted-fg: #6A5F5D; --border: #E6DDDB; --input: #CFC4C1; --destructive: var(--brand-tomato); --destructive-fg: #FFFFFF; --hover: rgba(28,24,23,.05); --hover-strong: rgba(28,24,23,.12); /* Статусы. Морковный на светлом мелким текстом не читается, поэтому --warn — его тёмный вариант */ --ok: var(--brand-garden); --warn: #B23A1E; --info: var(--brand-blue); --radius: 16px; /* карточки */ --shadow: none; /* вырезки из бумаги: плоско, белая карточка на фоне Light */ color-scheme: light; } /* ── Шкалы. Шкала — меню: на странице обычно 3–4 размера ─────────────── */ :root{ --text-xs: 12px; /* метки, бейджи, время */ --text-sm: 13px; /* кнопки, чипы, таблицы, пункты меню */ --text-base: 14px; /* основной текст интерфейса */ --text-md: 16px; /* подзаголовки блоков */ --text-lg: 20px; /* заголовок страницы на телефоне мелкой шкалы, крупные подзаголовки */ --text-xl: 26px; /* заголовок страницы на телефоне */ --text-2xl: 28px; /* цифра KPI */ --text-3xl: 34px; /* заголовок страницы на ПК, крупная цифра */ --text-touch: 16px; /* поля ввода на телефоне: мельче — iPhone приближает страницу */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-none: 1; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; --tracking-caps: .08em; --tracking-tight: -.01em; --space-px: 1px; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; --radius-circle: 50%; /* Покрупнее, чем в аналитике: кураторы часто работают с телефона */ --chip-h: 32px; --control-sm: 32px; --control-md: 40px; --control-lg: 44px; --control-check: 18px; --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-base: 18px; --icon-lg: 20px; --icon-xl: 24px; --dialog-sm: 380px; --dialog-md: 640px; --shadow-lg: 0 16px 48px rgba(28,24,23,.18); --ring: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); --on-media: #fff; --media-bg: #000; --media-badge: rgba(0,0,0,.75); --media-badge-border: rgba(255,255,255,.18); --scrim: rgba(28,24,23,.45); --scrim-strong: rgba(0,0,0,.88); --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 260ms; --dur-spin: 800ms; --z-sticky: 20; --z-header: 30; --z-overlay: 50; --z-drawer: 60; --z-modal: 70; --z-lightbox: 1000; --z-toast: 1100; --z-tooltip: 9999; /* Раскладка */ --sidebar-w: 248px; --content-max: 1200px; /* Точки перелома — в @media числом: 600 (узкий телефон) · 900 (мобильная версия) · 1200 (широкий экран). Других не заводить. */ }