/* ==========================================================================
   ВРЕМЕННЫЙ ФАЙЛ: примерка дизайн-системы «Тёплые тона» (cosme, вариант 2).
   Подключается последним и переопределяет токены. Не для прода:
   либо значения переезжают в tokens.css, либо файл удаляется.
   Источник: cosme.institutmp.io/design-system/index?id=2
   ========================================================================== */

:root {
    --ground: #F6F7F9;
    --surface: #FFFFFF;
    --surface-2: #EFF1F4;
    --surface-3: #E6E9ED;

    --ink: #26282B;
    --ink-2: #6A7078;
    --ink-3: #7E838C;

    --hairline: #E6E9ED;

    /* Акцент действия — оранжевый, текст на нём белый (в отличие от жёлтого) */
    --brand: #FF8F1F;
    --brand-hover: #F57E06;
    --brand-soft: #FFF3E2;
    --brand-soft-ink: #C05E00;
    --on-brand: #FFFFFF;

    --accent: #FF8F1F;
    --accent-soft: #FFF3E2;

    --ok: #31A45C;
    --ok-soft: #E7F5EC;
    --warn: #DB9414;
    --warn-soft: #FBF2DD;
    --err: #E24C51;
    --err-soft: #FBEAEA;

    --macro-p: #4B5563;
    --macro-f: #FFC53D;
    --macro-c: #FF8F1F;

    --invert-bg: #26282B;
    --invert-ink: #F6F7F9;
    --invert-muted: #A0A6AF;
    --invert-btn-bg: #FF8F1F;
    --invert-btn-ink: #FFFFFF;

    --r-card: 22px;
    --r-inner: 16px;
    --r-control: 14px;

    --shadow-card: 0 2px 8px rgba(38, 40, 43, .05);
    --shadow-hover: 0 6px 20px rgba(38, 40, 43, .06), 0 20px 48px rgba(38, 40, 43, .07);
    --shadow-sticky: 0 6px 20px rgba(38, 40, 43, .07);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground: #141518;
        --surface: #1D1F23;
        --surface-2: #2A2D33;
        --surface-3: #33373F;

        --ink: #F2F3F5;
        --ink-2: #A0A6AF;
        --ink-3: #7F858E;

        --hairline: #30343B;

        --brand: #FFA13C;
        --brand-hover: #FFB25C;
        --brand-soft: #3B2C15;
        --brand-soft-ink: #FFA13C;
        --on-brand: #1D1400;

        --accent: #FFA13C;
        --accent-soft: #3B2C15;

        --ok: #4FC578;
        --ok-soft: #1E3327;
        --warn: #EAB459;
        --warn-soft: #37301C;
        --err: #F0696D;
        --err-soft: #3A2224;

        --macro-p: #A0A6AF;
        --macro-f: #FFC53D;
        --macro-c: #FFA13C;

        --invert-bg: #FFA13C;
        --invert-ink: #1D1400;
        --invert-muted: #7A5C28;
        --invert-btn-bg: #1D1F23;
        --invert-btn-ink: #FFA13C;

        --shadow-card: 0 2px 8px rgba(0, 0, 0, .35);
        --shadow-hover: 0 6px 20px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .45);
        --shadow-sticky: 0 6px 20px rgba(0, 0, 0, .45);
    }
}

:root[data-theme="dark"] {
    --ground: #141518;
    --surface: #1D1F23;
    --surface-2: #2A2D33;
    --surface-3: #33373F;

    --ink: #F2F3F5;
    --ink-2: #A0A6AF;
    --ink-3: #7F858E;

    --hairline: #30343B;

    --brand: #FFA13C;
    --brand-hover: #FFB25C;
    --brand-soft: #3B2C15;
    --brand-soft-ink: #FFA13C;
    --on-brand: #1D1400;

    --accent: #FFA13C;
    --accent-soft: #3B2C15;

    --ok: #4FC578;
    --ok-soft: #1E3327;
    --warn: #EAB459;
    --warn-soft: #37301C;
    --err: #F0696D;
    --err-soft: #3A2224;

    --macro-p: #A0A6AF;
    --macro-f: #FFC53D;
    --macro-c: #FFA13C;

    --invert-bg: #FFA13C;
    --invert-ink: #1D1400;
    --invert-muted: #7A5C28;
    --invert-btn-bg: #1D1F23;
    --invert-btn-ink: #FFA13C;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-hover: 0 6px 20px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .45);
    --shadow-sticky: 0 6px 20px rgba(0, 0, 0, .45);
}

/* Повадки «Тёплых тонов»: тени у карточек, подъём на ховере, жирные заголовки */

.card {
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s, transform .2s;
}

a.card:hover,
.tile:hover,
.tile-flat:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.tile,
.tile-flat {
    transition: box-shadow .2s, transform .2s, background .15s;
}

h1, h2 {
    font-weight: 800;
}

.btn {
    font-weight: 600;
}