/* =====================================================================
   МІСТО ПРОФЕСІЙНОЇ ІНДУСТРІЇ — дизайн-токени
   Графітова архітектурна палітра, стримані акценти, скляні поверхні.
   ===================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

:root {
    /* --- Поверхні ---------------------------------------------------- */
    --bg-deep:      #0C0E10;
    --bg-base:      #121417;
    --bg-raised:    #171A1E;
    --bg-elevated:  #1D2126;
    --bg-inset:     #0E1013;

    --glass:        rgba(20, 23, 27, 0.82);
    --glass-strong: rgba(16, 18, 21, 0.94);
    --glass-soft:   rgba(29, 33, 38, 0.62);
    --blur:         saturate(150%) blur(20px);
    --blur-light:   saturate(140%) blur(12px);

    /* --- Лінії -------------------------------------------------------- */
    --line:         rgba(255, 255, 255, 0.07);
    --line-strong:  rgba(255, 255, 255, 0.12);
    --line-bright:  rgba(255, 255, 255, 0.20);

    /* --- Накладки поверхонь (наведення, підкладки) -------------------- */
    --tint-subtle:  rgba(255, 255, 255, 0.02);
    --tint-soft:    rgba(255, 255, 255, 0.035);
    --tint-hover:   rgba(255, 255, 255, 0.06);
    --tint-strong:  rgba(255, 255, 255, 0.08);
    --tint-bold:    rgba(255, 255, 255, 0.14);
    --overlay:      rgba(8, 9, 11, 0.72);

    /* --- Текст -------------------------------------------------------- */
    --text:         #E9EBEE;
    --text-soft:    #A8AEB6;
    --text-muted:   #767D86;
    --text-faint:   #575D65;
    --text-invert:  #14171A;

    /* --- Акценти ------------------------------------------------------ */
    --accent:       #C9AE85;
    --accent-soft:  rgba(201, 174, 133, 0.16);
    --accent-line:  rgba(201, 174, 133, 0.42);
    --accent-text:  #DCC49F;

    --positive:     #7FA88C;
    --warning:      #C9A86B;
    --danger:       #C77E75;
    --danger-soft:  rgba(199, 126, 117, 0.14);
    --info:         #7E97A8;

    /* --- Тіні --------------------------------------------------------- */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow:       0 8px 24px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg:    0 24px 60px -20px rgba(0, 0, 0, 0.72);
    --shadow-sheet: 0 -12px 48px -16px rgba(0, 0, 0, 0.7);

    /* --- Геометрія ---------------------------------------------------- */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-full: 999px;

    /* --- Типографіка -------------------------------------------------- */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    --t-xs:   11px;
    --t-sm:   12px;
    --t-base: 13px;
    --t-md:   14px;
    --t-lg:   16px;
    --t-xl:   19px;
    --t-2xl:  24px;
    --t-3xl:  30px;
    --t-4xl:  40px;

    /* --- Рух ---------------------------------------------------------- */
    --ease:      cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --fast:      140ms;
    --normal:    240ms;
    --slow:      420ms;

    /* --- Розміри інтерфейсу ------------------------------------------- */
    --topbar-h:    60px;
    --catbar-h:    46px;
    --panel-w:     420px;
    --z-map:       1;
    --z-controls:  400;
    --z-panel:     500;
    --z-topbar:    600;
    --z-sheet:     700;
    --z-modal:     900;
    --z-toast:     1000;

    /* --- Акценти категорій (запасні значення) ------------------------- */
    --cat-default: #8A8F98;

    /* --- Карта -------------------------------------------------------- */
    --marker-bg:        rgba(15, 17, 20, 0.92);
    --marker-core-bg:   rgba(12, 14, 16, 0.95);
    --cluster-bg:       rgba(20, 23, 27, 0.88);
    --cluster-text:     #E9EBEE;
    --map-label:        rgba(233, 235, 238, 0.52);
    --map-label-dot:    rgba(233, 235, 238, 0.42);
    --map-label-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8);
    --map-attr-bg:      rgba(12, 14, 16, 0.72);

    /* Накладки поверх зображень: обкладинка профілю та підпис у галереї */
    --hero-overlay:     linear-gradient(180deg, rgba(12, 14, 16, 0.28) 0%,
                                        rgba(12, 14, 16, 0.78) 58%, var(--bg-base) 100%);
    --image-caption:    linear-gradient(180deg, transparent, rgba(10, 12, 14, 0.88));
    --cover-opacity:    0.9;
}

/* =====================================================================
   СВІТЛА ТЕМА
   Умикається кнопкою в шапці; вибір зберігається у браузері.
   ===================================================================== */
:root[data-theme="light"] {
    --bg-deep:      #E9EBEE;
    --bg-base:      #F4F5F7;
    --bg-raised:    #FFFFFF;
    --bg-elevated:  #FFFFFF;
    --bg-inset:     #F1F2F5;

    --glass:        rgba(255, 255, 255, 0.86);
    --glass-strong: rgba(255, 255, 255, 0.95);
    --glass-soft:   rgba(255, 255, 255, 0.65);

    --line:         rgba(17, 22, 29, 0.10);
    --line-strong:  rgba(17, 22, 29, 0.16);
    --line-bright:  rgba(17, 22, 29, 0.26);

    --tint-subtle:  rgba(17, 22, 29, 0.025);
    --tint-soft:    rgba(17, 22, 29, 0.04);
    --tint-hover:   rgba(17, 22, 29, 0.06);
    --tint-strong:  rgba(17, 22, 29, 0.09);
    --tint-bold:    rgba(17, 22, 29, 0.16);
    --overlay:      rgba(28, 32, 38, 0.42);

    --text:         #16191D;
    --text-soft:    #454C55;
    --text-muted:   #666E78;
    --text-faint:   #8B939C;
    --text-invert:  #FFFFFF;

    --accent:       #8A6A38;
    --accent-soft:  rgba(138, 106, 56, 0.12);
    --accent-line:  rgba(138, 106, 56, 0.42);
    --accent-text:  #7A5C2E;

    --positive:     #3F7355;
    --warning:      #8A6A2F;
    --danger:       #A2483D;
    --danger-soft:  rgba(162, 72, 61, 0.10);
    --info:         #40626F;

    --shadow-sm:    0 1px 2px rgba(17, 22, 29, 0.08);
    --shadow:       0 8px 24px -10px rgba(17, 22, 29, 0.20);
    --shadow-lg:    0 24px 60px -24px rgba(17, 22, 29, 0.28);
    --shadow-sheet: 0 -12px 48px -18px rgba(17, 22, 29, 0.24);

    --cat-default:  #6E767F;

    --marker-bg:        rgba(255, 255, 255, 0.96);
    --marker-core-bg:   rgba(255, 255, 255, 0.98);
    --cluster-bg:       rgba(255, 255, 255, 0.94);
    --cluster-text:     #16191D;
    --map-label:        rgba(35, 41, 48, 0.72);
    --map-label-dot:    rgba(35, 41, 48, 0.55);
    --map-label-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.9);
    --map-attr-bg:      rgba(255, 255, 255, 0.78);

    --hero-overlay:     linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%,
                                        rgba(244, 245, 247, 0.88) 58%, var(--bg-base) 100%);
    --image-caption:    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.92));
    --cover-opacity:    0.55;
}

@media (max-width: 860px) {
    :root {
        --topbar-h: 56px;
        --catbar-h: 44px;
    }
}