/* =====================================================================
   sims-market · Дизайн-токены «Мятный зефир» (B2), светлая тема — палитра «Овсянка» (с 14.11.2026)
   Источник: docs/redesign/ds/tokens.css (без сезонных токенов). Все компоненты используют только токены.
   Темы: светлая (по умолчанию) и тёмная — [data-theme="dark"] на <html>;
   без атрибута тема берётся из prefers-color-scheme.
   ===================================================================== */

:root {
  /* ---------- Шрифт ---------- */
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---------- Типографическая шкала (размер / межстрочный) ---------- */
  --fs-display: 40px;  --lh-display: 1.1;   /* заголовок раздела на ПК */
  --fs-h1: 32px;       --lh-h1: 1.15;
  --fs-h2: 24px;       --lh-h2: 1.25;
  --fs-h3: 20px;       --lh-h3: 1.3;
  --fs-title: 16px;    --lh-title: 1.3;     /* заголовок карточки */
  --fs-body: 16px;     --lh-body: 1.55;
  --fs-sm: 14px;       --lh-sm: 1.45;
  --fs-xs: 13px;       --lh-xs: 1.4;        /* мета: автор, дата */
  --fs-2xs: 12px;      --lh-2xs: 1.3;       /* плашки, бейджи */
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900;

  /* ---------- Отступы (шаг 4) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---------- Скругления ---------- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 28px; --r-pill: 999px;
  --r-card: var(--r-xl); --r-media: 18px; --r-ctl: var(--r-pill); --r-field: var(--r-md);

  /* ---------- Размеры ---------- */
  --tap: 44px;              /* минимальная высота нажимаемого на телефоне */
  --ctl-h: 44px; --ctl-h-lg: 56px; --ctl-h-sm: 36px;
  --header-h: 72px; --header-h-m: 56px; --tabbar-h: 64px;
  --sidebar-w: 272px; --rail-w: 84px; --container: 1600px; --gutter: 16px;
  --card-ratio: 4 / 5;      /* форма превью в карточке: вертикаль 4:5 с обрезкой (решение владельца 08.11.2026) */
  --ava-xs: 24px; --ava-sm: 32px; --ava-md: 40px; --ava-lg: 56px; --ava-xl: 128px;
  --frame-gap: 3px;          /* резерв под рамку аватара (косметика) */

  /* ---------- Движение ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, .8, .3, 1.2);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* ---------- Слои ---------- */
  --z-sticky: 20; --z-header: 30; --z-tabbar: 40; --z-dropdown: 50; --z-drawer: 60; --z-modal: 70; --z-toast: 80;

  /* ---------- Цвет: светлая тема ---------- */
  color-scheme: light;
  --bg: #F2E9E0;   /* овсянка (до 14.11.2026 — сливки #FFF8F3, жаловались, что слишком светло) */
  --bg-sunken: #EBE0D5;
  --surface: #FBF6F1;   /* молочный, не чисто белый */
  --surface-2: #ECE2D8;   /* поля, неактивные плашки */
  --surface-3: #E3D6CA;
  --border: #E0D1C5;
  --border-strong: #C9B5A6;
  --overlay: rgba(38, 32, 34, .45);

  --text: #2A2325;
  --text-2: #5A4F51;   /* вторичный, 7.3:1 на surface */
  --text-3: #6A5E61;   /* третичный, плейсхолдеры, 5.8:1 на surface, 4.9:1 на surface-2 */
  --text-inverse: #FFFFFF;

  --primary: #0A7166;   /* бирюза: главные действия, 5.9:1 с белым */
  --primary-hover: #075C53;
  --primary-press: #054A43;
  --primary-soft: #D4E9E3;
  --primary-soft-hover: #C2E0D8;
  --on-primary: #FFFFFF;
  --primary-ink: #095C53;   /* бирюзовый текст на primary-soft */

  --like: #B81C3E; --like-soft: #F5DDE0; --like-ink: #B81C3E;
  --success: #1E7550; --success-soft: #D6EDE1;
  --warning: #8A5A00; --warning-soft: #F5E6C8;
  --danger: #B42335;  --danger-soft: #F5DDE0;
  --info: #1F5FA3;    --info-soft: #D9E8F5;

  /* Пастельные пары «фон + чернила» для категорий верхнего уровня (приглушены под фон «Овсянка») */
  --tone-pink: #F4DDE2;     --tone-pink-ink: #A3284F;      /* Одежда */
  --tone-lavender: #E6E0F5; --tone-lavender-ink: #5439B5;  /* Лицо и прически, Скинтон */
  --tone-peach: #F5DDCB;    --tone-peach-ink: #9A4118;     /* Интерьер */
  --tone-mint: #D4E9E3;     --tone-mint-ink: #095C53;      /* Строительство, Дома */
  --tone-sky: #D9E8F5;      --tone-sky-ink: #1D5896;       /* Симы, Питомцы */
  --tone-butter: #F3E6C1;   --tone-butter-ink: #704F00;    /* Моды-программы */

  /* Цвета ролей у ников (контраст ≥ 4.5 на surface; Sim Creator — 3.6, Top Uploader — 1.8 (яркое золото по желанию владельца): жёлтый и оранжевый с 4.5 на белом становятся коричневыми).
     Оттенки старого дизайна (.userstyle* в style.min): в светлой теме затемнены,
     в тёмной — почти как были (админ чуть светлее #EC5757, чтобы держать 4.5 на surface-2) */
  --role-admin: #C62F3B; --role-top: #F2B900; --role-mod: #23781A; --role-sim: #DB6400; --role-user: var(--text-2);

  /* Тени тёплые коричневые; --tint (бирюза) — только для свечения главной кнопки */
  --tint: 10, 116, 104;
  --shadow-1: 0 1px 3px rgba(70, 45, 30, .09), 0 1px 2px rgba(38, 32, 34, .05);
  --shadow-2: 0 18px 36px -14px rgba(70, 45, 30, .28), 0 4px 10px rgba(38, 32, 34, .06);
  --shadow-3: 0 24px 60px -16px rgba(38, 32, 34, .35);
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--primary);

  --logo-grad: linear-gradient(140deg, #3FC7B5, #0A7468);
  --avatar-grad: linear-gradient(135deg, #5ED3C3, #FFB38A);
  --skeleton: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);

  /* Кристалл в логотипе */
  --gem-a: #2FB9A6; --gem-b: #0A7468; --gem-c: #C4F3EA;
}

/* ---------- Тёмная тема ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101716; --bg-sunken: #0B1110;
  --surface: #18211F; --surface-2: #212D2A; --surface-3: #2A3834;
  --border: #2C3B37; --border-strong: #3D4F4A;
  --overlay: rgba(0, 0, 0, .6);
  --text: #E8F0ED; --text-2: #A9B8B3; --text-3: #8B9A95; --text-inverse: #101716;
  --primary: #4FD1BF; --primary-hover: #74DDCF; --primary-press: #9BE8DD;
  --primary-soft: #153C36; --primary-soft-hover: #1B4A43; --on-primary: #04201B; --primary-ink: #8FE3D6;
  --gem-a: #6FE0D0; --gem-b: #26AE9B; --gem-c: #E0FFF9;
  --like: #FF6B7D; --like-soft: #44202A; --like-ink: #FF8A98;
  --success: #6FD6A6; --success-soft: #173A2C;
  --warning: #F5C25B; --warning-soft: #3A2E12;
  --danger: #FF7C84;  --danger-soft: #44202A;
  --info: #A9D3FF;    --info-soft: #1B2E44;
  --tone-pink: #45202E; --tone-pink-ink: #FF9DBB;
  --tone-lavender: #2E2549; --tone-lavender-ink: #C8B8FF;
  --tone-peach: #43291C; --tone-peach-ink: #FFC29E;
  --tone-mint: #153C36; --tone-mint-ink: #8FE3D6;
  --tone-sky: #1B2E44; --tone-sky-ink: #A9D3FF;
  --tone-butter: #3A3112; --tone-butter-ink: #F5D77A;
  --role-admin: #EE6565; --role-top: #F0C512; --role-mod: #2FAA1D; --role-sim: #FF7A00;
  --shadow-1: 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-2: 0 18px 36px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(79, 209, 191, .16);
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .85);
  --logo-grad: linear-gradient(140deg, #74DDCF, #2A9D8F);
  --avatar-grad: linear-gradient(135deg, #4FD1BF, #FFB38A);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101716; --bg-sunken: #0B1110;
    --surface: #18211F; --surface-2: #212D2A; --surface-3: #2A3834;
    --border: #2C3B37; --border-strong: #3D4F4A;
    --overlay: rgba(0, 0, 0, .6);
    --text: #E8F0ED; --text-2: #A9B8B3; --text-3: #8B9A95; --text-inverse: #101716;
    --primary: #4FD1BF; --primary-hover: #74DDCF; --primary-press: #9BE8DD;
    --primary-soft: #153C36; --primary-soft-hover: #1B4A43; --on-primary: #04201B; --primary-ink: #8FE3D6;
    --gem-a: #6FE0D0; --gem-b: #26AE9B; --gem-c: #E0FFF9;
    --like: #FF6B7D; --like-soft: #44202A; --like-ink: #FF8A98;
    --success: #6FD6A6; --success-soft: #173A2C; --warning: #F5C25B; --warning-soft: #3A2E12;
    --danger: #FF7C84; --danger-soft: #44202A; --info: #A9D3FF; --info-soft: #1B2E44;
    --tone-pink: #45202E; --tone-pink-ink: #FF9DBB; --tone-lavender: #2E2549; --tone-lavender-ink: #C8B8FF;
    --tone-peach: #43291C; --tone-peach-ink: #FFC29E; --tone-mint: #153C36; --tone-mint-ink: #8FE3D6;
    --tone-sky: #1B2E44; --tone-sky-ink: #A9D3FF; --tone-butter: #3A3112; --tone-butter-ink: #F5D77A;
    --role-admin: #EE6565; --role-top: #F0C512; --role-mod: #2FAA1D; --role-sim: #FF7A00;
    --shadow-1: 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-2: 0 18px 36px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(79, 209, 191, .16);
    --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .85);
    --logo-grad: linear-gradient(140deg, #74DDCF, #2A9D8F);
    --avatar-grad: linear-gradient(135deg, #4FD1BF, #FFB38A);
  }
}

/* ---------- Типографика на телефоне ---------- */
@media (max-width: 767px) {
  :root { --fs-display: 30px; --fs-h1: 26px; --fs-h2: 21px; --fs-h3: 18px; }
}