/* ============================================================
   057 COMMUNITY — токени дизайн-системи
   Спільні для публічного сайту (site.css) і панелі ведучого
   (panel.css). Теми — це фази гри: Ніч (dark), День (light),
   Сутінки (gray). Тримаємо їх в одному файлі, щоб панель і сайт
   не розʼїхалися по кольорах.
   ============================================================ */
/* ---------- ТОКЕНИ: НІЧ (типова тема) ---------- */
:root,
body.theme-dark {
    color-scheme: dark;

    --bg: #0a090c;
    --bg-deep: #050408;
    --surface: #141118;
    --surface-2: #1b1721;
    --surface-3: #241f2c;

    --ink: #ede6da;
    --ink-dim: rgba(237, 230, 218, 0.64);
    /* Прозорість підібрана під контраст 4.5:1 на тлі теми: цим токеном набрані
       підписи по 9-12px з широким трекінгом, і на 0.34 вони давали 2.6:1 —
       дрібний текст просто не читався. */
    --ink-faint: rgba(237, 230, 218, 0.54);

    --line: rgba(237, 230, 218, 0.10);
    --line-strong: rgba(237, 230, 218, 0.22);

    --accent: #c5203e;
    --accent-hot: #e63b57;
    --accent-soft: rgba(197, 32, 62, 0.16);

    /* Ті самі кольори, але приглушені/висвітлені рівно настільки, щоб дрібний
       підпис на поверхні проходив 4.5:1. Рамки й заливки лишаються насиченими:
       вимога контрасту стосується тексту, а не ліній. */
    --accent-text: #e84761;
    --warn-text: #e0a33e;
    --good-text: #4fb286;
    --accent-glow: rgba(197, 32, 62, 0.45);

    --brass: #b8874b;
    --brass-soft: rgba(184, 135, 75, 0.16);

    --good: #4fb286;
    --warn: #e0a33e;

    --card-face: #f2ece0;
    --card-face-ink: #17131a;

    --lamp: radial-gradient(80% 60% at 50% -10%, rgba(184, 135, 75, 0.16), transparent 70%);
    --vignette: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);

    --shadow-lift: 0 26px 60px -24px rgba(0, 0, 0, 0.85);
    --shadow-press: 0 8px 20px -12px rgba(0, 0, 0, 0.7);

    /* Силует міста: що далі план — то менший контраст із небом */
    --skyline-far: #221b31;
    --skyline-mid: #120e1a;
    --skyline-ink: #030205;

    /* Одна шкала заокруглень на весь проєкт. Було чотири випадкові величини
       поруч (10, 12, 16, 99) — і форма «гуляла» від блоку до блоку. Тепер
       кожен радіус має свій рівень: дрібне — поле — картка — велика поверхня
       — пігулка. Кола (аватар, крапка) лишаються 50%. */
    --radius: 4px;
    --radius-field: 10px;
    --radius-card: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    --max: min(1340px, 92vw);
    --gutter: clamp(16px, 4vw, 48px);
}

/* ---------- ДЕНЬ: денна фаза, паперове досьє ---------- */
body.theme-light {
    color-scheme: light;

    --bg: #ece5d8;
    --bg-deep: #e0d7c6;
    --surface: #fbf7f0;
    --surface-2: #f4eee3;
    --surface-3: #ebe2d3;

    --ink: #17131a;
    --ink-dim: rgba(23, 19, 26, 0.66);
    --ink-faint: rgba(23, 19, 26, 0.64);

    --line: rgba(23, 19, 26, 0.12);
    --line-strong: rgba(23, 19, 26, 0.26);

    --accent: #a5122c;
    --accent-hot: #c02340;
    --accent-soft: rgba(165, 18, 44, 0.10);

    /* Ті самі кольори, але приглушені/висвітлені рівно настільки, щоб дрібний
       підпис на поверхні проходив 4.5:1. Рамки й заливки лишаються насиченими:
       вимога контрасту стосується тексту, а не ліній. */
    --accent-text: #a5122c;
    --warn-text: #885d10;
    --good-text: #2d7857;
    --accent-glow: rgba(165, 18, 44, 0.25);

    /* Темніше за нічну латунь: на кремовому тлі денної теми #8a6329 давав
       лише 3.7:1, а цим кольором набрані надзаголовки по 10px. */
    --brass: #74511f;
    --brass-soft: rgba(138, 99, 41, 0.12);

    --good: #2f7d5b;
    --warn: #9a6a12;

    --card-face: #fbf7f0;
    --card-face-ink: #17131a;

    --lamp: radial-gradient(80% 60% at 50% -10%, rgba(138, 99, 41, 0.10), transparent 70%);
    --vignette: radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(90, 74, 50, 0.16) 100%);

    --shadow-lift: 0 22px 44px -26px rgba(60, 44, 30, 0.5);
    --shadow-press: 0 6px 16px -10px rgba(60, 44, 30, 0.45);

    --skyline-far: rgba(50, 38, 30, 0.18);
    --skyline-mid: rgba(50, 38, 30, 0.34);
    --skyline-ink: rgba(50, 38, 30, 0.52);
}

/* ---------- СУТІНКИ: нейтральна графітова ---------- */
body.theme-gray {
    color-scheme: dark;

    --bg: #17181b;
    --bg-deep: #111214;
    --surface: #202226;
    --surface-2: #282b30;
    --surface-3: #32353b;

    --ink: #e6e7ea;
    --ink-dim: rgba(230, 231, 234, 0.64);
    --ink-faint: rgba(230, 231, 234, 0.55);

    --line: rgba(230, 231, 234, 0.10);
    --line-strong: rgba(230, 231, 234, 0.22);

    --accent: #b8394c;
    --accent-hot: #d04e60;
    --accent-soft: rgba(184, 57, 76, 0.16);

    /* Ті самі кольори, але приглушені/висвітлені рівно настільки, щоб дрібний
       підпис на поверхні проходив 4.5:1. Рамки й заливки лишаються насиченими:
       вимога контрасту стосується тексту, а не ліній. */
    --accent-text: #da7583;
    --warn-text: #c9a05a;
    --good-text: #5aa987;
    --accent-glow: rgba(184, 57, 76, 0.35);

    --brass: #9d9481;
    --brass-soft: rgba(157, 148, 129, 0.14);

    --good: #5aa987;
    --warn: #c9a05a;

    --card-face: #e9eaec;
    --card-face-ink: #17181b;

    --lamp: radial-gradient(80% 60% at 50% -10%, rgba(157, 148, 129, 0.10), transparent 70%);
    --vignette: radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(0, 0, 0, 0.4) 100%);

    --skyline-far: #262a31;
    --skyline-mid: #16181c;
    --skyline-ink: #0a0b0d;
}