/* Design tokens – цвета, типографика, отступы + glass/gradients из prettyproto */
:root {
    /* Accents from prettyproto */
    --skyblue: #055096;
    --skyblue-light: #36a2d3;
    --sunbeam: #b674d4;
    --sunbeam-light: #e8a0d8;
    --coral: #e62586;
    --amber: #b45309;

    /* Glass – light */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.78);

    /* Ambient gradient – light */
    --bg-main: #f4eef8;
    --bg-gradient-1: #e6f2f4;
    --bg-gradient-2: #f3e6ef;
    --bg-gradient-3: #f7f8fb;

    /* Surfaces */
    --bg: transparent;
    --surface: rgba(255, 255, 255, 0.45);
    --surface-card: var(--glass-bg);
    --text: #3f3f46;
    --text-muted: #71717a;
    --text-dim: #a1a1aa;

    /* Accent – muted steel blue (links, focus, selection) */
    --blue: #5c7a96;
    --blue-hover: #4d6880;
    --blue-light: rgba(92, 122, 150, 0.12);

    /* Primary buttons – soft raspberry (brand coral, dialed down) */
    --btn-primary-bg: #c44d7a;
    --btn-primary-hover: #a83f66;
    --btn-primary-text: #fffafc;
    --btn-primary-light: rgba(196, 77, 122, 0.12);

    --green: #3f8f63;
    --green-light: rgba(63, 143, 99, 0.12);
    --red: #b65c5c;
    --red-light: rgba(182, 92, 92, 0.12);

    --gray: #a1a1aa;
    --gray-light: rgba(0, 0, 0, 0.04);
    --border: var(--glass-border);
    --border-light: rgba(0, 0, 0, 0.06);
    --white: #FFFFFF;

    --shadow: 0 8px 32px var(--glass-shadow);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --radius: 15px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --section-pad: clamp(48px, 6vw, 80px);
    --container: min(100% - 2rem, 1120px);

    --nav-bg: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(255, 255, 255, 0.55) 100%
    );
    --nav-blur: 20px;
    --nav-saturate: 1.35;
    --input-bg: rgba(255, 255, 255, 0.72);
    --input-border: rgba(63, 63, 70, 0.16);
    --toggle-bg: rgba(0, 0, 0, 0.08);
    --focus-ring: rgba(92, 122, 150, 0.22);
    /* Halved from the previous 3px halo – still visible, less bulky */
    --focus-ring-width: 1px;

    --badge-bg: rgba(92, 122, 150, 0.12);
    --badge-text: #5c7a96;
    --cta-bg: #52525b;
    --cta-text: #fafafa;
    --footer-border: var(--glass-border);

    /* Opaque popup surfaces – readable in light theme */
    --popup-bg: #ffffff;
    --popup-text: #3f3f46;
    --popup-text-muted: #52525b;

    --nav-mobile-bg: rgba(255, 255, 255, 0.97);
    --nav-mobile-item-bg: rgba(255, 255, 255, 0.9);
    --nav-mobile-overlay: rgba(15, 12, 20, 0.45);

    /* Scrollbars */
    --scrollbar-size: 10px;
    --scrollbar-track: rgba(63, 63, 70, 0.06);
    --scrollbar-thumb: rgba(63, 63, 70, 0.28);
    --scrollbar-thumb-hover: rgba(63, 63, 70, 0.42);

    --transition-fast: 0.3s ease;
    --transition-normal: 0.4s ease;

    /* Typography – UI / contract sans */
    --font-sans: "Wix Madefor Display", sans-serif;
    --font-display: "Lebowski", sans-serif;
    --font-serif: "Cormorant", Georgia, "Times New Roman", serif;
    --font-unbounded: "Unbounded", sans-serif;
    --font-raleway: "Raleway", sans-serif;

    /* Typography – readable UI scale */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 0.9375rem; /* 15px */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.125rem;    /* 18px */
    --text-2xl: 1.375rem;   /* 22px */

    /*
     * Font weights – Madefor Display reads heavy; keep UI chrome light.
     * Prefer these over raw 600/650/700 on buttons, menus, chips, labels.
     */
    --fw-ui: 400;           /* buttons, menu items, chips, controls */
    --fw-ui-medium: 450;    /* labels, selected options, nav active */
    --fw-ui-strong: 500;    /* card titles, active tabs, section titles */
    --fw-label: 550;        /* uppercase micro-labels (was often 700) */

    /*
     * Spacing scale (отступы):
     * use only these steps for padding / margin / gap.
     * Prefer adjacent steps over off-scale values (6→xs, 10→sm, 14→md).
     */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --gap: var(--space-lg);

    /* Avatar placeholders */
    --avatar-1: #EEF2FF;
    --avatar-2: #ECFDF5;
    --avatar-3: #FEF9C3;
    --avatar-4: #FCE7F3;
    --avatar-5: #E0E7FF;
    --avatar-6: #CCFBF1;
    --avatar-7: #FEE2E2;
    --avatar-8: #F3E8FF;
}

html[data-theme="dark"],
html.dark-theme,
body.dark-theme {
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.35);
    --glass-hover: rgba(255, 255, 255, 0.08);

    --bg-main: #12111a;
    --bg-gradient-1: #10101c;
    --bg-gradient-2: #15221c;
    --bg-gradient-3: #1a2430;

    --bg: transparent;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-card: var(--glass-bg);
    --text: #d4d4d8;
    --text-muted: #a1a1aa;
    --text-dim: #71717a;

    --blue: #c9a8e0;
    --blue-hover: #d9bceb;
    --blue-light: rgba(201, 168, 224, 0.16);

    /* Primary buttons – near-white with warm brand tint */
    --btn-primary-bg: #f3eef4;
    --btn-primary-hover: #ffffff;
    --btn-primary-text: #1a1218;
    --btn-primary-light: rgba(243, 238, 244, 0.14);

    --green: #86b89a;
    --green-light: rgba(134, 184, 154, 0.14);
    --red: #c99292;
    --red-light: rgba(201, 146, 146, 0.14);

    --gray: #71717a;
    --gray-light: rgba(255, 255, 255, 0.06);
    --border: var(--glass-border);
    --border-light: rgba(255, 255, 255, 0.06);
    --white: rgba(255, 255, 255, 0.06);

    --shadow: 0 12px 40px var(--glass-shadow), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);

    --nav-bg: linear-gradient(
        180deg,
        rgba(49, 56, 82, 0.62) 0%,
        rgba(25, 28, 42, 0.74) 100%
    );
    --nav-blur: 20px;
    --nav-saturate: 1.25;
    --nav-mobile-bg: rgba(30, 34, 48, 0.92);
    --nav-mobile-item-bg: rgba(255, 255, 255, 0.07);
    --nav-mobile-overlay: rgba(0, 0, 0, 0.62);
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.12);
    --toggle-bg: rgba(255, 255, 255, 0.08);
    --focus-ring: rgba(201, 168, 224, 0.28);

    --badge-bg: rgba(201, 168, 224, 0.16);
    --badge-text: #e2d0f2;
    --cta-bg: rgba(255, 255, 255, 0.08);
    --cta-text: #e4e4e7;
    --footer-border: var(--glass-border);

    /* Opaque popup surfaces – readable in dark theme */
    --popup-bg: #1c1a24;
    --popup-text: #e4e4e7;
    --popup-text-muted: #a1a1aa;

    --avatar-1: #312E81;
    --avatar-2: #14532D;
    --avatar-3: #713F12;
    --avatar-4: #831843;
    --avatar-5: #3730A3;
    --avatar-6: #134E4A;
    --avatar-7: #7F1D1D;
    --avatar-8: #581C87;

    --scrollbar-track: rgba(255, 255, 255, 0.04);
    --scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}