/* ══════════════════════════════════════════════════════
   EGRN MAX · Design Tokens (iOS grouped style)
   Light / dark · MAX WebApp · prefers-color-scheme
   ══════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --bg: #f2f2f7;
    --group: #ffffff;
    --fill: #e5e5ea;
    --fill-2: #f2f2f7;
    --elevated: #ffffff;

    /* Text */
    --label: #8e8e93;
    --text: #1c1c1e;
    --text-2: #3a3a3c;

    /* Brand (corporate navy — по фирменному лого «Отчёт ЕГРН») */
    --brand-navy: #123f72;
    --brand: #0f5aa8;
    --brand-light: #a9d4f0;
    --brand-gradient: linear-gradient(135deg, #12467d 0%, #0f5aa8 100%);

    --blue: #0f5aa8;
    --green: #2f9e57;
    --orange: #ff9500;
    --red: #ff3b30;

    /* Semantic */
    --primary: var(--brand-navy);
    --primary-dark: #0c335f;
    --success: var(--green);
    --warning: var(--orange);
    --error: #d70015;

    /* Structure */
    --sep: rgba(60, 60, 67, 0.12);
    --shadow: rgba(0, 0, 0, 0.06);
    --overlay: rgba(0, 0, 0, 0.45);
    --dock-bg: rgba(242, 242, 247, 0.92);

    /* Tints (buttons, pay blocks, badges) */
    --tint-green: rgba(47, 158, 87, 0.1);
    --tint-blue: rgba(15, 90, 168, 0.09);
    --tint-navy: rgba(18, 63, 114, 0.09);
    --tint-orange: rgba(255, 149, 0, 0.12);
    --tint-red: rgba(255, 59, 48, 0.1);
    --success-bg: var(--tint-green);
    --warning-bg: var(--tint-orange);
    --error-bg: rgba(215, 0, 21, 0.08);
    --primary-light: var(--tint-navy);

    /* Layout */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-full: 50%;
    --page-pad: clamp(12px, 3.2vw, 24px);
    --gap-section: 10px;
    --nav-height: 56px;
    --header-height: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Typography */
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 15px;
    --font-lg: 17px;
    --font-xl: 20px;

    /* Legacy aliases */
    --card-bg: var(--group);
    --text-secondary: var(--label);
    --border: var(--sep);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #000000;
        --group: #1c1c1e;
        --fill: #2c2c2e;
        --fill-2: #1c1c1e;
        --elevated: #2c2c2e;

        --label: #98989d;
        --text: #ffffff;
        --text-2: #ebebf5;

        --brand-navy: #3d8be0;
        --brand: #4a9bec;
        --brand-light: #16324f;
        --brand-gradient: linear-gradient(135deg, #2b6fc4 0%, #4a9bec 100%);

        --blue: #4a9bec;
        --green: #30d158;
        --orange: #ff9f0a;
        --red: #ff453a;

        --primary: #3d8be0;
        --primary-dark: #2b6fc4;
        --error: #ff6961;

        --sep: rgba(84, 84, 88, 0.65);
        --shadow: rgba(0, 0, 0, 0.35);
        --overlay: rgba(0, 0, 0, 0.6);
        --dock-bg: rgba(28, 28, 30, 0.94);

        --tint-green: rgba(48, 209, 88, 0.14);
        --tint-blue: rgba(74, 155, 236, 0.16);
        --tint-navy: rgba(74, 155, 236, 0.16);
        --tint-orange: rgba(255, 159, 10, 0.14);
        --tint-red: rgba(255, 69, 58, 0.14);
        --error-bg: rgba(255, 105, 97, 0.14);
        --primary-light: rgba(74, 155, 236, 0.16);
    }
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg: #000000;
    --group: #1c1c1e;
    --fill: #2c2c2e;
    --fill-2: #1c1c1e;
    --elevated: #2c2c2e;

    --label: #98989d;
    --text: #ffffff;
    --text-2: #ebebf5;

    --brand-navy: #3d8be0;
    --brand: #4a9bec;
    --brand-light: #16324f;
    --brand-gradient: linear-gradient(135deg, #2b6fc4 0%, #4a9bec 100%);

    --blue: #4a9bec;
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;

    --primary: #3d8be0;
    --primary-dark: #2b6fc4;
    --error: #ff6961;

    --sep: rgba(84, 84, 88, 0.65);
    --shadow: rgba(0, 0, 0, 0.35);
    --overlay: rgba(0, 0, 0, 0.6);
    --dock-bg: rgba(28, 28, 30, 0.94);

    --tint-green: rgba(48, 209, 88, 0.14);
    --tint-blue: rgba(74, 155, 236, 0.16);
    --tint-navy: rgba(74, 155, 236, 0.16);
    --tint-orange: rgba(255, 159, 10, 0.14);
    --tint-red: rgba(255, 69, 58, 0.14);
    --error-bg: rgba(255, 105, 97, 0.14);
    --primary-light: rgba(74, 155, 236, 0.16);
}

html {
    color-scheme: light dark;
}