/* =========================================================
   Забор73 — CSS Variables
   CSS custom properties for colors, spacing, fonts
   ========================================================= */

/* ===== "Россия красивая" Brand tokens (Light) ===== */
:root {
  color-scheme: light dark;
  --green-dark: #173404;
  --green: #3b6d11;
  --ochre: #ba7517;
  --amber: #fac775;
  --text: #20211e;
  --text-secondary: #5f5e5a;
  --menu-inactive: #41423e;
  --page-bg: #f1efe8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f5f4ef;
  --border: rgba(23, 52, 4, .10);
  --c-bg: var(--page-bg);
  --c-surface: var(--surface);
  --c-border: var(--border);
  --c-text: var(--text);

  --c-primary: var(--green);
  --c-primary-hover: #2c5a0c;
  --c-secondary: var(--text-secondary);
  --c-accent: var(--ochre);
  --c-accent-light: var(--amber);
  --c-danger: #b3261e;
  --c-success: #3b6d11;

  --radius: 12px;
  --radius-lg: 12px;
  /* Мягкая тень вместо жёстких границ карточек */
  --shadow-sm: 0 1px 2px rgba(23, 52, 4, .05), 0 8px 24px rgba(23, 52, 4, .06);
  --shadow-md: 0 2px 6px rgba(23, 52, 4, .07), 0 16px 36px rgba(23, 52, 4, .1);
  --shadow-lg: 0 10px 30px rgba(23, 52, 4, 0.1);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  --ff-heading: "Onest", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body: "Onest", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-display: "Onest", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --home-sidebar-offset: clamp(68px, 12vw, 108px);

  /* Ширина колонок главной ленты на десктопе */
  --feed-max-width: 680px;
  --feed-sidebar-width: 420px;
  /* Поле слева от карточки под вертикальную колонку голосования */
  --feed-vote-gutter: 68px;

  /* Нейтральная подложка под фото поста (поля при contain) */
  --c-photo-bg: color-mix(in srgb, var(--c-text) 8%, var(--c-bg));

  /* Нейтральная «молочная» пилюля: реакции без акцента, число рейтинга */
  --c-pill: color-mix(in srgb, var(--c-text) 6%, var(--c-surface));
  --c-pill-hover: color-mix(in srgb, var(--c-text) 11%, var(--c-surface));
  /* Капсула числа голосования в ленте. Отдельный тон: колонка голосования
     стоит на фоне страницы, а не на карточке, и обычная пилюля (6%) на
     белом фоне ленты сливается с ним. */
  --c-vote-pill: color-mix(in srgb, var(--c-text) 10%, var(--c-surface));
  /* Тонкий внутренний разделитель карточки */
  --c-divider: color-mix(in srgb, var(--c-text) 8%, transparent);

  /* Фон страницы ленты. Отдельно от --c-bg: молочный тон кита остаётся
     на остальных страницах, лента по макету стоит на белом. */
  --c-feed-bg: #ffffff;
}

/* ===== "Россия красивая" Brand tokens (Dark) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #141711;
    --surface: #1d211a;
    --surface-raised: #24291f;
    --surface-soft: #292e25;
    --text: #f1f0eb;
    --text-secondary: #a9ada3;
    --border: rgba(255, 255, 255, .09);
    --green-dark: #a6cf7a;
    --green: #7db449;
    --ochre: #d99a45;
    --amber: #e7bc72;
    --menu-inactive: var(--text-secondary);
    --c-primary-hover: #8abb55;
    --c-danger: #ef8b82;
    --c-success: var(--green);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .14);
    --shadow-md: 0 2px 5px rgba(0, 0, 0, .16), 0 12px 28px rgba(0, 0, 0, .18);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);
    /* В тёмной теме «белая лента» означает тот же тёмный фон страницы */
    --c-feed-bg: var(--page-bg);
  }
}