:root {
    /* =========================================================
       FONTS
       ========================================================= */

    --soul-font-main: "Montserrat", Arial, sans-serif;

    /* =========================================================
       LAYOUT
       ========================================================= */

    --soul-container: 1210px;
    --soul-header-height: 66px;

    /* =========================================================
       BASE COLORS
       ========================================================= */

    --soul-text: #221b2c;
    --soul-muted: rgba(34, 27, 44, 0.62);
    --soul-white: #ffffff;

    --soul-bg: #eef6fa;
    --soul-bg-light: #f8fbfd;

    /* =========================================================
       THEME COLORS
       base — sky-blue → titanium gray
       nko — violet → white
       business — orange → white
       experts — green → white
       future — blue → white
       ========================================================= */

/* BASE / SKY → WHITE → TITANIUM */
--base-rgb: 148, 184, 207;        /* sky titanium */
--base-soft-rgb: 255, 255, 255;   /* white center */
--base-end-rgb: 196, 202, 209;    /* titanium gray */



/* colored themes */
--nko-rgb: 104, 36, 176;
--business-rgb: 255, 126, 54;
--experts-rgb: 112, 190, 76;
--future-rgb: 18, 116, 224;

/* active theme */
--theme-rgb: var(--base-rgb);
--theme-soft-rgb: var(--base-soft-rgb);
--theme-end-rgb: var(--base-end-rgb);

    --theme-main: rgb(var(--theme-rgb));
    --theme-soft: rgba(var(--theme-rgb), 0.12);
    --theme-border: rgba(var(--theme-rgb), 0.22);
    --theme-shadow: rgba(var(--theme-rgb), 0.16);

    /* =========================================================
       RADIUS
       ========================================================= */

    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 34px;
    --radius-xl: 44px;
}

/* =========================================================
   THEME SWITCHING
   Меняется только активный цвет, логика градиента остаётся одна
   ========================================================= */

html[data-theme="base"] {
    --theme-rgb: var(--base-rgb);
    --theme-soft-rgb: var(--base-soft-rgb);
    --theme-end-rgb: var(--base-end-rgb);
}

html[data-theme="nko"] {
    --theme-rgb: var(--nko-rgb);
    --theme-soft-rgb: 241, 234, 248;
    --theme-end-rgb: 202, 205, 211;
}

html[data-theme="business"] {
    --theme-rgb: var(--business-rgb);
    --theme-soft-rgb: 255, 238, 225;
    --theme-end-rgb: 202, 205, 211;
}

html[data-theme="experts"] {
    --theme-rgb: var(--experts-rgb);
    --theme-soft-rgb: 239, 251, 234;
    --theme-end-rgb: 202, 205, 211;
}

html[data-theme="future"] {
    --theme-rgb: var(--future-rgb);
    --theme-soft-rgb: 226, 239, 255;
    --theme-end-rgb: 202, 205, 211;
}
/* =========================================================
   CHIPS / SECTION PILLS — THEME TOKENS
   ========================================================= */

:root {
    --chip-rgb: 112, 119, 130;
    --chip-text-rgb: 34, 36, 42;

    --chip-bg-top: rgba(255, 255, 255, 0.90);
    --chip-bg-mid: rgba(239, 243, 247, 0.82);
    --chip-bg-bottom: rgba(214, 221, 229, 0.72);

    --chip-border-alpha: 0.40;
    --chip-glow-alpha-1: 0.14;
    --chip-glow-alpha-2: 0.07;
    --chip-shadow-alpha: 0.08;
}

html[data-theme="base"] {
    --chip-rgb: 112, 119, 130;
    --chip-text-rgb: 34, 36, 42;

    --chip-bg-top: rgba(255, 255, 255, 0.90);
    --chip-bg-mid: rgba(239, 243, 247, 0.82);
    --chip-bg-bottom: rgba(214, 221, 229, 0.72);
}

html[data-theme="nko"] {
    --chip-rgb: 104, 36, 176;
    --chip-text-rgb: 38, 32, 48;

    --chip-bg-top: rgba(255, 255, 255, 0.90);
    --chip-bg-mid: rgba(244, 235, 250, 0.82);
    --chip-bg-bottom: rgba(221, 202, 238, 0.72);
}

html[data-theme="business"] {
    --chip-rgb: 255, 126, 54;
    --chip-text-rgb: 48, 38, 30;

    --chip-bg-top: rgba(255, 255, 255, 0.90);
    --chip-bg-mid: rgba(255, 239, 226, 0.82);
    --chip-bg-bottom: rgba(255, 216, 186, 0.72);
}

html[data-theme="experts"] {
    --chip-rgb: 112, 190, 76;
    --chip-text-rgb: 34, 44, 32;

    --chip-bg-top: rgba(255, 255, 255, 0.90);
    --chip-bg-mid: rgba(241, 252, 236, 0.82);
    --chip-bg-bottom: rgba(220, 244, 210, 0.72);
}

html[data-theme="future"] {
    --chip-rgb: 18, 116, 224;
    --chip-text-rgb: 32, 38, 52;

    --chip-bg-top: rgba(255, 255, 255, 0.90);
    --chip-bg-mid: rgba(231, 241, 255, 0.82);
    --chip-bg-bottom: rgba(202, 224, 255, 0.72);
}