:root {
    /* FONT */
    --font-family-base: 'Inter', sans-serif; /* "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 900;
    /* Base text */
    --font-size-base: 14px;
    --line-height-base: 1.5; /* = 24px */
    --letter-spacing-base: normal;
    /* Display title */
    --letter-spacing-display: -0.02em;
    --font-size-display-2xl: 72px;
    --line-height-display-2xl: 1.25; /* = 90px */

    --font-size-display-xl: 60px;
    --line-height-display-xl: 1.2; /* = 72px */

    --font-size-display-lg: 48px;
    --line-height-display-lg: 1.25; /* = 60px */

    --font-size-display-md: 36px;
    --line-height-display-md: 1.22; /* = 44px */

    --font-size-display-sm: 30px;
    --line-height-display-sm: 1.27; /* = 38px */

    --font-size-display-xs: 24px;
    --line-height-display-xs: 1.33; /* = 32px */
    /* Text style */
    --font-size-text-2xl: 22px;
    --line-height-text-2xl: 1.5; /* = 30px */

    --font-size-text-xl: 20px;
    --line-height-text-xl: 1.5; /* = 30px */

    --font-size-text-lg: 18px;
    --line-height-text-lg: 1.56; /* = 28px */

    --font-size-text-md: 16px;
    --line-height-text-md: 1.5; /* = 24px */

    --font-size-text-sm: 14px;
    --line-height-text-sm: 1.43; /* = 20px */

    --font-size-text-sm-1: 13px;
    --font-size-text-xs: 12px;
    --line-height-text-xs: 1.5; /* = 18px */
    /* === Base === */
    --white: #ffffff;
    --black: #000000;
    --transparent: rgba(255, 255, 255, 0);
    /* COLOR */
    --bg-color: #fafafa;
    --bg-color-accent: #f9f9f9;
    /* === Gray (AA/AAA) === */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e9eaeb; /* разделители */
    --gray-300: #d5d7da; /* бордеры */
    --gray-400: #6B6B6B;
    --gray-500: #717680; /* обычный текст (не AAA) */
    --gray-600: #535862; /* текст (AA), фоновый текст */
    --gray-700: #414651; /* тёмный текст (AAA) */
    --gray-800: #252b37; /* заголовки */
    --gray-900: #181d27; /* основа UI dark */
    --gray-950: #0a0d12;
    /* === Gray Dark (тёмная тема) === */
    --gray-dark-100: #f0f0f1;
    --gray-dark-200: #ececed;
    --gray-dark-300: #cecfd2;
    --gray-dark-400: #94979c;
    --gray-dark-500: #85888e;
    --gray-dark-600: #61656c;
    --gray-dark-700: #373a41;
    --gray-dark-800: #22262f;
    --gray-dark-900: #13161b;
    --gray-dark-950: #0c0e12;
    /* === Brand (фирменный, отобраны только контрастные) === */
    --brand-50: #F9F5FF; /* BG */
    --brand-100: #F4EBFF; /* AAA — использовать с dark-текстом */
    --brand-150: #ECE4FF;
    --brand-300: #D6BBFB; /* AA — основной цвет */
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9; /* AA — интерактив/hover */
    --brand-700: #6941C6;
    --brand-800: #53389E; /* AAA — тёмный фон/акцент */
    --brand-900: #42307D; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #7F56D994;
    --brand-transparent-bc: #7F56D933;
    /* === Accent (второстепенные, как ярлыки и метки) === */
    --accent-blue: #2e90fa;
    --accent-indigo: #6172f3;
    --accent-pink: #ee46bc;
    /* === Semantic — Success === */
    --success-100: #dcfae6; /* AAA фон */
    --success-300: #75e0a7; /* AA акцент */
    --success-500: #17b26a; /* основной зелёный */
    --success-700: #067647; /* текст/иконки */
    --success-900: #074d31; /* тёмный success */
    --success-transparent-bg: #06764794;
    --success-transparent-bc: #06764733;
    /* === Semantic — Warning === */
    --warning-100: #fef0c7;
    --warning-300: #fec84b;
    --warning-500: #f79009;
    --warning-700: #b54708;
    --warning-900: #7a2e0e;
    --warning-transparent-bg: #b5470894;
    --warning-transparent-bc: #b5470833;
    /* === Semantic — Error === */
    --error-100: #fee4e2; /* фон */
    --error-300: #fda29b; /* ярлык, иконки */
    --error-500: #f04438; /* основной красный */
    --error-700: #b42318; /* текст ошибок */
    --error-900: #7a271a; /* насыщенный */
    --error-transparent-bg: #b4231894;
    --error-transparent-bc: #b4231833;
    /* RADIUS */
    --radius-none: 0px;
    --radius-xxs: 2px; /* = 0.125rem */
    --radius-xs: 4px; /* = 0.25rem */
    --radius-sm: 6px; /* = 0.375rem */
    --radius-md: 8px; /* = 0.5rem */
    --radius-lg: 10px; /* = 0.625rem */
    --radius-xl: 12px; /* = 0.75rem */
    --radius-2xl: 16px; /* = 1rem */
    --radius-3xl: 20px; /* = 1.25rem */
    --radius-4xl: 24px; /* = 1.5rem */
    --radius-full: 9999px;
    /* === Spacing primitives (4px base grid) === */
    --spacing-none: 0px;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 64px;
    --spacing-8xl: 80px;
    --spacing-9xl: 96px;
    --spacing-10xl: 128px;
    --spacing-11xl: 160px;
    /* === Container sizes === */
    --container-padding-mobile: 16px;
    --container-padding-desktop: 32px;
    --container-max-width-desktop: 1280px;
    /* === Paragraph width === */
    --paragraph-max-width: 720px;
    /* === Shadows === */
    --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0px 4px 6px rgba(16, 24, 40, 0.1), 0px 2px 4px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0px 10px 15px rgba(16, 24, 40, 0.1), 0px 4px 6px rgba(16, 24, 40, 0.06);
    --shadow-xl: 0px 20px 25px rgba(16, 24, 40, 0.1), 0px 10px 10px rgba(16, 24, 40, 0.04);
    --shadow-2xl: 0px 25px 50px rgba(16, 24, 40, 0.25);
    --shadow-3xl: 0 35px 60px rgba(0, 0, 0, 0.3);
    --shadow-custom: 0 12px 24px var(--brand-100), 0 4px 12px var(--brand-100);
    --shadow-custom-small: 0px 4px 6px var(--brand-100), 0px 2px 4px var(--brand-100);
    /* === Focus rings === */
    --focus-ring-color: var(--brand-500);
    --focus-ring-error-color: var(--error-500);
    --focus-ring-shadow-xs: 0 0 0 4px rgba(127, 86, 217, 0.4); /* brand */
    --focus-ring-shadow-sm: 0 0 0 4px rgba(127, 86, 217, 0.6); /* brand */
    --focus-ring-error-shadow-xs: 0 0 0 4px rgba(217, 45, 32, 0.4); /* error */
    --focus-ring-shadow-skeuo: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    --control-height: 40px;
    --color-focus-shadow: rgba(10, 13, 18, 0.05);
    --color-border: var(--gray-300);
    --color-text-secondary: var(--gray-700);
    /* === Theme-aware semantic tokens === */
    /* Text on brand-colored backgrounds (всегда светлый, не зависит от темы) */
    --text-on-brand: #ffffff;
    /* "Soft" brand surface — для active/hover/selected состояний */
    --brand-soft-bg: var(--brand-100);
    --brand-soft-text: var(--brand-700);
    --brand-soft-border: var(--brand-300);
    --components-height-3xs: 24px;
    --components-height-2xs: 28px;
    --components-height-xs: 32px;
    --components-height-sm: 36px;
    --components-height-md: 40px;
    --components-height-lg: 44px;
    --components-height-xl: 48px;
    --components-height-2xl: 52px;
    --components-height-3xl: 56px;
}

[data-accent="purple"] {
    --bg-color: #F9F5FF;
    --brand-50: #F9F5FF; /* BG */
    --brand-100: #F4EBFF; /* AAA — использовать с dark-текстом */
    --brand-300: #D6BBFB; /* AA — основной цвет */
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9; /* AA — интерактив/hover */
    --brand-700: #6941C6;
    --brand-800: #53389E; /* AAA — тёмный фон/акцент */
    --brand-900: #42307D; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #7F56D954;
    --brand-transparent-bc: #7F56D933;
}

[data-accent="default"] {
    --bg-color: #fafafa;
    --brand-50: #F9F5FF; /* BG */
    --brand-100: #F4EBFF; /* AAA — использовать с dark-текстом */
    --brand-300: #D6BBFB; /* AA — основной цвет */
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9; /* AA — интерактив/hover */
    --brand-700: #6941C6;
    --brand-800: #53389E; /* AAA — тёмный фон/акцент */
    --brand-900: #42307D; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #7F56D954;
    --brand-transparent-bc: #7F56D933;
}

/* Dark mode (Alt+0) — основан на default-палитре purple, инвертирует серую шкалу */
[data-accent="dark"] {
    /* Brand (как в default), но light-tints (50/100/150) переопределены под тёмный фон */
    --brand-50: rgba(127, 86, 217, 0.10);   /* hover-фон, очень мягкий */
    --brand-100: rgba(127, 86, 217, 0.18);  /* active/selected фон */
    --brand-150: rgba(127, 86, 217, 0.28);  /* sticky active фон */
    --brand-300: #D6BBFB;
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9;
    --brand-700: #6941C6;
    --brand-800: #53389E;
    --brand-900: #42307D;
    --brand-transparent-bg: #7F56D954;
    --brand-transparent-bc: #7F56D933;

    /* Поверхности */
    --bg-color: #0c0e12;
    --bg-color-accent: #13161b;
    --white: #13161b;        /* карточки, формы, поповеры */
    --black: #f0f0f1;        /* основной текст */
    --transparent: rgba(0, 0, 0, 0);

    /* Серая шкала: инвертируем, маппя на --gray-dark-* */
    --gray-50: #0c0e12;      /* самый тёмный фон */
    --gray-100: #13161b;
    --gray-200: #22262f;     /* разделители */
    --gray-300: #373a41;     /* бордеры */
    --gray-400: #61656c;
    --gray-500: #85888e;     /* обычный текст (не AAA) */
    --gray-600: #94979c;     /* текст AA */
    --gray-700: #cecfd2;     /* тёмный текст → светлый AAA */
    --gray-800: #ececed;     /* заголовки */
    --gray-900: #f0f0f1;     /* основа UI */
    --gray-950: #ffffff;

    /* Тени — глубже на тёмном фоне */
    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.55), 0px 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.55), 0px 10px 10px rgba(0, 0, 0, 0.35);
    --shadow-2xl: 0px 25px 50px rgba(0, 0, 0, 0.7);
    --shadow-3xl: 0 35px 60px rgba(0, 0, 0, 0.8);
    --shadow-custom: 0 12px 24px rgba(127, 86, 217, 0.25), 0 4px 12px rgba(127, 86, 217, 0.2);
    --shadow-custom-small: 0px 4px 6px rgba(127, 86, 217, 0.25), 0px 2px 4px rgba(127, 86, 217, 0.2);

    /* Семантические бордеры/текст */
    --color-border: var(--gray-300);
    --color-text-secondary: var(--gray-700);
    --color-focus-shadow: rgba(255, 255, 255, 0.08);
    /* Soft brand-surface для active/hover (на тёмном фоне используем приглушённый purple) */
    --brand-soft-bg: rgba(127, 86, 217, 0.18);
    --brand-soft-text: var(--brand-300);
    --brand-soft-border: rgba(127, 86, 217, 0.45);

    color-scheme: dark;

    --bs-secondary-color: rgba(255, 255, 255, 0.5);

    --surface-secondary: var(--gray-dark-800) !important;
}

[data-accent="blue"] {
    --bg-color: #EFF4FF;
    --brand-50: #EFF4FF; /* BG */
    --brand-100: #D1E0FF; /* AAA — использовать с dark-текстом */
    --brand-300: #84ADFF; /* AA — основной цвет */
    --brand-400: #528BFF;
    --brand-500: #2970FF;
    --brand-600: #155EEF; /* AA — интерактив/hover */
    --brand-700: #004EEB;
    --brand-800: #0040C1; /* AAA — тёмный фон/акцент */
    --brand-900: #00359E; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #155EEF54;
    --brand-transparent-bc: #155EEF33;
}

[data-accent="green"] {
    --bg-color: #ECFDF3;
    --brand-50: #ECFDF3; /* BG */
    --brand-100: #DCFAE6; /* AAA — использовать с dark-текстом */
    --brand-300: #75E0A7; /* AA — основной цвет */
    --brand-400: #47CD89;
    --brand-500: #17B26A;
    --brand-600: #079455; /* AA — интерактив/hover */
    --brand-700: #079455; /* AA — интерактив/hover */
    --brand-800: #085D3A; /* AAA — тёмный фон/акцент */
    --brand-900: #074D31; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #07945554;
    --brand-transparent-bc: #07945533;
}

/* Red — #CC0000 */
[data-accent="red"] {
    --bg-color: #FCF4F4;
    --brand-50: #FCF4F4;
    --brand-100: #F9E5E5;
    --brand-300: #EDA5A5;
    --brand-400: #E27272;
    --brand-500: #D83F3F;
    --brand-600: #CC0000;
    --brand-700: #AD0000;
    --brand-800: #840000;
    --brand-900: #700000;
    --brand-transparent-bg: #CC000054;
    --brand-transparent-bc: #CC000033;
}

/* Emerald Green — #006633 */
[data-accent="emeraldgreen"] {
    --bg-color: #F4F8F6;
    --brand-50: #F4F8F6;
    --brand-100: #E5EFEA;
    --brand-300: #A5C9B7;
    --brand-400: #72AA8E;
    --brand-500: #3F8C66;
    --brand-600: #006633;
    --brand-700: #00562B;
    --brand-800: #004221;
    --brand-900: #00381C;
    --brand-transparent-bg: #00663354;
    --brand-transparent-bc: #00663333;
}

/* Orange — #CC6600 */
[data-accent="orange"] {
    --bg-color: #FCF8F4;
    --brand-50: #FCF8F4;
    --brand-100: #F9EFE5;
    --brand-300: #EDC9A5;
    --brand-400: #E2AA72;
    --brand-500: #D88C3F;
    --brand-600: #CC6600;
    --brand-700: #AD5600;
    --brand-800: #844200;
    --brand-900: #703800;
    --brand-transparent-bg: #CC660054;
    --brand-transparent-bc: #CC660033;
}

/* Magenta — #CC0066 */
[data-accent="magenta"] {
    --bg-color: #FCF4F8;
    --brand-50: #FCF4F8;
    --brand-100: #F9E5EF;
    --brand-300: #EDA5C9;
    --brand-400: #E272AA;
    --brand-500: #D83F8C;
    --brand-600: #CC0066;
    --brand-700: #AD0056;
    --brand-800: #840042;
    --brand-900: #700038;
    --brand-transparent-bg: #CC006654;
    --brand-transparent-bc: #CC006633;
}

/* Indigo — #330066 */
[data-accent="indigo"] {
    --bg-color: #F6F4F8;
    --brand-50: #F6F4F8;
    --brand-100: #EAE5EF;
    --brand-300: #B7A5C9;
    --brand-400: #8E72AA;
    --brand-500: #663F8C;
    --brand-600: #330066;
    --brand-700: #2B0056;
    --brand-800: #210042;
    --brand-900: #1C0038;
    --brand-transparent-bg: #33006654;
    --brand-transparent-bc: #33006633;
}

/* Violet — #660066 */
[data-accent="violet"] {
    --bg-color: #F8F4F8;
    --brand-50: #F8F4F8;
    --brand-100: #EFE5EF;
    --brand-300: #C9A5C9;
    --brand-400: #AA72AA;
    --brand-500: #8C3F8C;
    --brand-600: #660066;
    --brand-700: #560056;
    --brand-800: #420042;
    --brand-900: #380038;
    --brand-transparent-bg: #66006654;
    --brand-transparent-bc: #66006633;
}

/* Navy Blue — #000066 */
[data-accent="navyblue"] {
    --bg-color: #F4F4F8;
    --brand-50: #F4F4F8;
    --brand-100: #E5E5EF;
    --brand-300: #A5A5C9;
    --brand-400: #7272AA;
    --brand-500: #3F3F8C;
    --brand-600: #000066;
    --brand-700: #000056;
    --brand-800: #000042;
    --brand-900: #000038;
    --brand-transparent-bg: #00006654;
    --brand-transparent-bc: #00006633;
}

/* Grey — #606060 */
[data-accent="grey"] {
    --bg-color: #F8F8F8;
    --brand-50: #F8F8F8;
    --brand-100: #EFEFEF;
    --brand-300: #C7C7C7;
    --brand-400: #A7A7A7;
    --brand-500: #878787;
    --brand-600: #606060;
    --brand-700: #515151;
    --brand-800: #3E3E3E;
    --brand-900: #343434;
    --brand-transparent-bg: #60606054;
    --brand-transparent-bc: #60606033;
}

/* Yellow — #FFBC4C */
[data-accent="yellow"] {
    --bg-color: #FFFCF7;
    --brand-50: #FFFCF7;
    --brand-100: #FFF8ED;
    --brand-300: #FFE7C0;
    --brand-400: #FFDA9C;
    --brand-500: #FFCC78;
    --brand-600: #FFBC4C;
    --brand-700: #D89F40;
    --brand-800: #A57A31;
    --brand-900: #8C6729;
    --brand-transparent-bg: #FFBC4C54;
    --brand-transparent-bc: #FFBC4C33;
}

/* Grey-Green — #6B7F76 */
[data-accent="greygreen"] {
    --bg-color: #F9F9F9;
    --brand-50: #F9F9F9;
    --brand-100: #F0F2F1;
    --brand-300: #CBD2CF;
    --brand-400: #ADB8B3;
    --brand-500: #909F98;
    --brand-600: #6B7F76;
    --brand-700: #5A6B64;
    --brand-800: #45524C;
    --brand-900: #3A4540;
    --brand-transparent-bg: #6B7F7654;
    --brand-transparent-bc: #6B7F7633;
}

/* White — #FFFFFF */
[data-accent="white"] {
    --bg-color: #FFFFFF;
    --brand-50: #F5F5F5;
    --brand-100: #E5E5E5;
    --brand-300: #D4D4D4;
    --brand-400: #B8B8B8;
    --brand-500: #9C9C9C;
    --brand-600: #737373;
    --brand-700: #616161;
    --brand-800: #4A4A4A;
    --brand-900: #3D3D3D;
    --brand-transparent-bg: #73737354;
    --brand-transparent-bc: #73737333;
}

:root, [data-accent] {
    transition: color 140ms ease, background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        opacity 140ms ease;
}