/* =============================================================================
   memodel — design tokens (PRКИТ 2026)
   -----------------------------------------------------------------------------
   Единственный источник значений для UI. Компоненты не хардкодят цвета,
   отступы, радиусы, тени, длительности — только var(--token).

   Слои файла:
     1. @font-face — self-hosted woff2 (Unbounded / Onest, кириллица + латиница)
     2. Светлая тема (генератор, результат, админка, юр. страницы)
     3. Типографика (роли и шкала)
     4. Пространство, форма, тени, движение
     5. Компонентные токены (кнопки, поля, карточки, зона загрузки, бейджи)
     6. Тёмная тема — только /screen: [data-theme="night"]
     7. База: box-sizing, body, заголовки, focus-visible, reduced-motion, утилиты

   Контраст: все текстовые пары ≥ 4.5:1 (крупный текст ≥ 3:1), проверено
   скриптом docs/shots/tools/contrast.mjs, таблица — docs/DESIGN.md §2.
   Тёмная тема — отдельные значения, не инверсия светлой.
   ========================================================================== */

/* =============================================================================
   1. Шрифты (OFL, self-hosted)
   -----------------------------------------------------------------------------
   Unbounded — display: 700/800. Onest — текст: 400/500/600.
   Субсеты: cyrillic + latin (latin-ext не нужен: кириллица + базовая латиница
   и типографская пунктуация уже покрыты; экономия ~110 КБ).
   font-display: swap; preload — только unbounded-cyrillic-800 (см. index.html,
   делает фронтенд). Лицензии: public/assets/fonts/OFL-*.txt
   ========================================================================== */

/* Unbounded 700 */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/unbounded-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/unbounded-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Unbounded 800 */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/unbounded-cyrillic-800.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/unbounded-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Onest 400 */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/onest-cyrillic-400.woff2") format("woff2");
  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("../assets/fonts/onest-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Onest 500 */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/onest-cyrillic-500.woff2") format("woff2");
  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("../assets/fonts/onest-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Onest 600 */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/onest-cyrillic-600.woff2") format("woff2");
  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("../assets/fonts/onest-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   2. Светлая тема (по умолчанию)
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Фон и поверхности --- */
  --color-bg: #fff8c1;              /* крем — фон страниц PRКИТ */
  --color-bg-alt: #f4efd6;          /* вторичный фон секций */
  --color-surface: #ffffff;         /* карточки, поля, модалки */
  --color-surface-2: #f4efd6;       /* вторичные блоки, таблицы, hover-строки */
  --color-surface-3: #eae2c4;       /* третичные плашки, скелетоны */

  /* --- Текст --- */
  --color-ink: #06062e;             /* основной текст, границы-обводки */
  --color-ink-soft: #3a3350;        /* вторичный текст, длинные абзацы */
  --color-muted: #6e6580;           /* подписи, hint, плейсхолдеры, meta */
  --color-on-primary: #ffffff;      /* текст на фиолетовом */
  --color-on-accent: #06062e;       /* текст на мадженте */
  --color-on-media: #ffffff;        /* текст поверх фото */
  --color-media-scrim: rgb(6 6 46 / 0.42); /* скрим под текстом на фото */

  /* --- Бренд --- */
  --color-primary: #7200a3;         /* фиолет PRКИТ: главные кнопки, ссылки */
  --color-primary-hover: #5b0084;
  --color-primary-active: #49006b;
  --color-primary-soft: #f0e2f8;    /* фиолетовый тинт для плашек */
  --color-accent: #ce4fe7;          /* маджента PRКИТ: акценты, выделения */
  --color-accent-hover: #b92fd4;
  --color-accent-active: #a01fbc;
  --color-accent-soft: #f8e4fd;
  --color-highlight: #fff705;       /* маркер, бейдж «новое», подсветка */
  --color-highlight-ink: #06062e;
  --color-brand-gradient: linear-gradient(100deg, #7200a3 0%, #ce4fe7 100%);

  /* --- Границы и обводки --- */
  --color-border: rgb(6 6 46 / 0.16);         /* тонкие границы */
  --color-border-soft: rgb(6 6 46 / 0.32);    /* усиленная полупрозрачная */
  --color-border-strong: #06062e;             /* «стикерная» обводка 2px */
  --color-border-solid: #06062e;              /* обводка-акцент плаката */
  --color-divider: rgb(6 6 46 / 0.12);

  /* --- Состояния --- */
  --color-danger: #c4202f;          /* ошибки, отклонение, бан (затемнён для 4.5:1) */
  --color-danger-hover: #a31a26;
  --color-danger-soft: #fbe3e4;     /* подложка alert/badge */
  --color-danger-text: #8d1220;     /* текст на --color-danger-soft */
  --color-on-danger: #ffffff;       /* текст на --color-danger */
  --color-success: #147a3f;         /* успех, «на экране» */
  --color-success-hover: #0e6231;
  --color-success-soft: #dff3e6;
  --color-success-text: #0e5b2f;
  --color-on-success: #ffffff;
  --color-warning: #7a4b00;         /* предупреждения, «на модерации» */
  --color-warning-soft: #fff0c2;
  --color-info: #0b5e7d;            /* нейтральная информация */
  --color-info-soft: #dceff5;

  /* --- Фокус, выделение, оверлеи --- */
  --color-focus: #ce4fe7;
  --color-focus-contrast: #06062e;  /* фокус на маджента/жёлтом фоне */
  --color-selection-bg: #fff705;
  --color-selection-ink: #06062e;
  --color-overlay: rgb(6 6 46 / 0.62);
  --color-backdrop: rgb(6 6 46 / 0.72);

  /* Совместимость с docs/DESIGN.md §2: «ночные» токены = тёмная тема */
  --color-night: #06062e;
  --color-night-ink: #fff8c1;

  /* --- Тени (не больше двух уровней + плакатное смещение) --- */
  --shadow-card: 0 12px 32px rgb(6 6 46 / 0.12);
  --shadow-pop: 0 20px 60px rgb(6 6 46 / 0.22);
  --shadow-sticker: 6px 6px 0 var(--color-border-solid); /* плакатная обводка-смещение, не elevation */
  --shadow-none: none;

  /* --- Скругления --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Обводки --- */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;

  /* --- Типографика: семейства --- */
  --font-display: "Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  /* --- Типографика: шкала --- */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-md: 1rem;       /* 16 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: 2rem;      /* 32 */
  --text-3xl: 2.75rem;   /* 44 */
  --text-4xl: 4rem;      /* 64 */
  /* Роль, а не шаг шкалы: H1 hero, 44–72 в зависимости от ширины */
  --text-display: clamp(2.75rem, 6.4vw, 4.5rem);

  /* --- Типографика: межстрочный, трекинг, начертания --- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;
  --tracking-label: 0.16em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* --- Пространство (шаг 4/8) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-page-x: clamp(16px, 4.5vw, 48px); /* боковые поля страницы */
  --space-section-y: clamp(48px, 8vw, 96px);
  --space-stack: var(--space-4); /* базовый вертикальный ритм */

  /* --- Размеры и раскладка --- */
  --content-max: 1200px;
  --content-max-wide: 1440px;
  --content-max-narrow: 720px;
  --header-h: 64px;
  --tap-min: 44px;              /* минимальная тач-цель */
  --control-h: 48px;
  --control-h-sm: 40px;
  --control-h-lg: 56px;
  --meme-max: 560px;            /* карточка мема на результате */

  /* --- Движение --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-base: all var(--dur-base) var(--ease);
  --transition-transform: transform var(--dur-base) var(--ease);

  /* --- Слои --- */
  --z-base: 0;
  --z-header: 20;
  --z-sticky: 30;   /* липкая панель должна быть выше шапки (как в base.css) */
  --z-dropdown: 40;
  --z-overlay: 100;
  --z-modal: 110;
  --z-toast: 200;

  /* --- Фокус-кольцо --- */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--color-focus);

  /* ===========================================================================
     Алиасы имён, которые уже используют public/css/base.css и экраны.
     Значения — финальные (перекрывают сид из base.css).
     ========================================================================= */
  --color-primary-ink: var(--color-on-primary);
  --color-accent-ink: var(--color-on-accent);
  --color-danger-tint: var(--color-danger-soft);
  --color-danger-ink: var(--color-danger-text);
  --color-success-tint: var(--color-success-soft);
  --color-success-ink: var(--color-success-text);
  --color-night-surface: #12123f;
  --color-night-surface-2: #1c1c55;
  --color-night-muted: #b6a9cc;
  --color-night-border: rgb(255 248 193 / 0.16);
  --text-base: var(--text-md);
  --page-pad: var(--space-page-x);
  --content-narrow: 760px;
  --border-width: var(--border-width-2);

  /* ===========================================================================
     5. Компонентные токены (значения по умолчанию; тему переопределяет ниже)
     ========================================================================= */

  /* Кнопка */
  --btn-radius: var(--radius-pill);
  --btn-font: var(--weight-semibold);
  --btn-font-size: var(--text-md);
  --btn-border-width: var(--border-width-2);
  --btn-border: var(--color-border-solid);
  --btn-bg: var(--color-primary);
  --btn-ink: var(--color-on-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-bg-active: var(--color-primary-active);
  --btn-shadow: 0 2px 0 var(--color-border-solid);
  --btn-shadow-hover: 0 3px 0 var(--color-border-solid);
  --btn-shadow-press: 0 1px 0 var(--color-border-solid);

  /* Поле ввода / селект */
  --field-radius: var(--radius-md);
  --field-border: var(--border-width-2) solid var(--color-border-soft);
  --field-border-focus: var(--border-width-2) solid var(--color-primary);
  --field-bg: var(--color-surface);
  --field-ink: var(--color-ink);
  --field-placeholder: var(--color-muted);
  --field-h: var(--control-h);

  /* Карточка */
  --card-radius: var(--radius-lg);
  --card-pad: var(--space-6);
  --card-bg: var(--color-surface);
  --card-border: var(--border-width-2) solid var(--color-border-soft);
  --card-shadow: var(--shadow-card);

  /* Зона загрузки */
  --dropzone-radius: var(--radius-xl);
  --dropzone-border: var(--border-width-2) dashed var(--color-border-strong);
  --dropzone-border-active: var(--border-width-2) dashed var(--color-primary);
  --dropzone-bg: var(--color-surface);
  --dropzone-bg-active: var(--color-primary-soft);
  --dropzone-min-h: 220px;

  /* Бейдж / статус */
  --badge-radius: var(--radius-pill);
  --badge-pad-y: 2px;
  --badge-pad-x: var(--space-3);
  --badge-font-size: var(--text-sm);
  --badge-font: var(--weight-semibold);

  /* Сообщения, тосты, модалки */
  --toast-radius: var(--radius-md);
  --toast-shadow: var(--shadow-pop);
  --modal-radius: var(--radius-xl);
  --modal-shadow: var(--shadow-pop);
  --tooltip-radius: var(--radius-sm);
}

/* =============================================================================
   6. Тёмная тема — только экран /screen ([data-theme="night"] на <html> или <body>)
   ========================================================================== */
[data-theme="night"] {
  color-scheme: dark;

  --color-bg: #06062e;              /* тёмно-синий PRКИТ */
  --color-bg-alt: #0b0b3a;
  --color-surface: #12123f;         /* панели на экране */
  --color-surface-2: #1c1c55;
  --color-surface-3: #24245f;

  --color-ink: #fff8c1;             /* кремовый текст на тёмном */
  --color-ink-soft: #ddd3f0;
  --color-muted: #b6a9cc;
  --color-on-primary: #06062e;
  --color-on-accent: #06062e;
  --color-on-media: #ffffff;
  --color-media-scrim: rgb(0 0 0 / 0.5);

  --color-primary: #c77dff;         /* светлый фиолет: ссылки/действия на тёмном */
  --color-primary-hover: #d9a0ff;
  --color-primary-active: #e7bdff;
  --color-primary-soft: rgb(199 125 255 / 0.2);
  --color-accent: #ce4fe7;          /* маджента остаётся акцентом */
  --color-accent-hover: #e066f5;
  --color-accent-active: #f07dff;
  --color-accent-soft: rgb(206 79 231 / 0.22);
  --color-highlight: #fff705;
  --color-highlight-ink: #06062e;

  --color-border: rgb(255 248 193 / 0.18);
  --color-border-strong: rgb(255 248 193 / 0.34);
  --color-border-solid: #fff8c1;
  --color-divider: rgb(255 248 193 / 0.14);

  --color-danger: #ff8a94;
  --color-danger-hover: #ffa5ad;
  --color-danger-soft: rgb(214 47 62 / 0.24);
  --color-danger-text: #ffd9dc;
  --color-on-danger: #06062e;
  --color-success: #7be0a5;
  --color-success-hover: #9ceaba;
  --color-success-soft: rgb(31 157 85 / 0.26);
  --color-success-text: #d6f7e3;
  --color-on-success: #06062e;
  --color-warning: #ffd457;
  --color-warning-soft: rgb(255 212 87 / 0.2);
  --color-info: #8fd6ea;
  --color-info-soft: rgb(143 214 234 / 0.18);

  --color-focus: #fff705;           /* жёлтый виден и на тёмном, и на мадженте */
  --color-focus-contrast: #06062e;
  --color-overlay: rgb(0 0 0 / 0.6);
  --color-backdrop: rgb(0 0 0 / 0.78);
  --color-night: #06062e;
  --color-night-ink: #fff8c1;

  --shadow-card: 0 12px 32px rgb(0 0 0 / 0.45);
  --shadow-pop: 0 20px 60px rgb(0 0 0 / 0.6);
  --shadow-sticker: 6px 6px 0 rgb(255 248 193 / 0.9);

  /* Компонентные токены тёмной темы */
  --btn-border: var(--color-border-solid);
  --btn-bg: var(--color-primary);
  --btn-ink: var(--color-on-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-bg-active: var(--color-primary-active);
  --btn-shadow: 0 2px 0 rgb(255 248 193 / 0.9);
  --btn-shadow-hover: 0 3px 0 rgb(255 248 193 / 0.9);
  --btn-shadow-press: 0 1px 0 rgb(255 248 193 / 0.9);

  --field-border: var(--border-width-2) solid var(--color-border-soft);
  --field-border-focus: var(--border-width-2) solid var(--color-focus);
  --field-bg: var(--color-surface);
  --field-ink: var(--color-ink);
  --field-placeholder: var(--color-muted);

  --card-bg: var(--color-surface);
  --card-border: var(--border-width-2) solid var(--color-border);
  --card-shadow: var(--shadow-card);

  --dropzone-border: var(--border-width-2) dashed var(--color-border-strong);
  --dropzone-bg: var(--color-surface);
  --dropzone-bg-active: var(--color-primary-soft);
}

/* =============================================================================
   7. База
   -----------------------------------------------------------------------------
   Минимальный слой, чтобы страницы с одним tokens.css уже были в фирменном
   стиле. Компоненты могут переопределять; значения — только через токены.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-text);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Базовые размеры совпадают с public/css/base.css: hero-размер даёт класс .hero__title
   и токен --text-display, а не голый h1 (иначе разрастаются заголовки в админке). */
h1 {
  font-size: clamp(2rem, 6.2vw, var(--text-3xl));
}
h2 {
  font-size: clamp(1.5rem, 4.4vw, var(--text-2xl));
}
h3 {
  font-size: var(--text-lg);
}
h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--color-primary-hover);
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-ink);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

[hidden] {
  display: none !important;
}

/* Утилита: скрыто визуально, доступно скринридеру */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}