/* Скины. Всё приложение строится на этих токенах — переключение мгновенное. */

:root,
[data-skin="eba"] {
  --brand: #7B2FF7;
  --brand-2: #FF2E93;
  --brand-grad: linear-gradient(135deg, #7B2FF7 0%, #C02BD8 50%, #FF2E93 100%);
  --on-brand: #fff;
  --brand-soft: #F1E8FF;
  --bg: #F4F1FA;
  --surface: #ffffff;
  --surface-2: #F3EEFB;
  --text: #1B1430;
  --muted: #7C7393;
  --line: #E7E0F3;
  --danger: #FF3B5C;
  --ok: #18B87A;
  --header-bg: var(--bg);
  --header-text: var(--text);
  --tab-active: var(--brand);
  --font: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --r-l: 26px;
  --r-m: 18px;
  --r-s: 12px;
  --shadow: 0 6px 24px rgba(91, 33, 182, .10);
  --promo-1: linear-gradient(135deg, #7B2FF7, #FF2E93);
  --promo-2: linear-gradient(135deg, #FF8A00, #FF2E93);
  --promo-3: linear-gradient(135deg, #00C6FF, #7B2FF7);
  --page-bg: radial-gradient(1200px 600px at 20% 0%, #EADCFF 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #FFD6EA 0%, transparent 60%), #F7F3FC;
  --page-text: #1B1430;
  --page-muted: #6E6585;
  --page-card: rgba(255,255,255,.72);
  --page-line: rgba(27,20,48,.08);
}

/* Сбер: зелёный #21A038 и фирменный градиент жёлтый → зелёный → голубой */
[data-skin="sber"] {
  --brand: #21A038;
  --brand-2: #0FA8E0;
  --brand-grad: linear-gradient(135deg, #F2E913 0%, #21A038 45%, #0FA8E0 100%);
  --on-brand: #fff;
  --brand-soft: #E3F6E7;
  --bg: #F2F4F7;
  --surface: #ffffff;
  --surface-2: #EEF1F4;
  --text: #1F1F22;
  --muted: #7D838A;
  --line: #E4E8EC;
  --danger: #F2363D;
  --ok: #21A038;
  --header-bg: var(--bg);
  --header-text: var(--text);
  --tab-active: #21A038;
  --font: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --r-l: 22px;
  --r-m: 16px;
  --r-s: 12px;
  --shadow: 0 4px 18px rgba(16, 60, 30, .07);
  --promo-1: linear-gradient(135deg, #21A038, #0FA8E0);
  --promo-2: linear-gradient(135deg, #F2E913, #21A038);
  --promo-3: linear-gradient(135deg, #0FA8E0, #5C2DD5);
  --page-bg: radial-gradient(1000px 600px at 10% 0%, #D6F5DE 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #D4EEFB 0%, transparent 60%), #F4F7F5;
  --page-text: #1F1F22;
  --page-muted: #66707A;
  --page-card: rgba(255,255,255,.75);
  --page-line: rgba(0,0,0,.07);
}

/* Альфа: красный #EF3124, белый, тёмно-синий текст */
[data-skin="alfa"] {
  --brand: #EF3124;
  --brand-2: #EF3124;
  --brand-grad: linear-gradient(135deg, #EF3124, #D0170C);
  --on-brand: #fff;
  --brand-soft: #FDE7E5;
  --bg: #F3F4F5;
  --surface: #ffffff;
  --surface-2: #F3F4F5;
  --text: #0B1F35;
  --muted: #86919B;
  --line: #E6E8EB;
  --danger: #EF3124;
  --ok: #0CC44D;
  --header-bg: var(--bg);
  --header-text: var(--text);
  --tab-active: #0B1F35;
  --font: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --r-l: 20px;
  --r-m: 16px;
  --r-s: 10px;
  --shadow: 0 2px 10px rgba(11, 31, 53, .06);
  --promo-1: linear-gradient(135deg, #EF3124, #FF7A45);
  --promo-2: linear-gradient(135deg, #0B1F35, #3A4F68);
  --promo-3: linear-gradient(135deg, #FF5C4D, #EF3124);
  --page-bg: radial-gradient(900px 500px at 0% 0%, #FFE1DE 0%, transparent 60%), #F6F6F7;
  --page-text: #0B1F35;
  --page-muted: #5D6B7A;
  --page-card: rgba(255,255,255,.8);
  --page-line: rgba(11,31,53,.08);
}

/* Т-Банк: жёлтый #FFDD2D, графит #333, светло-серый фон */
[data-skin="tbank"] {
  --brand: #FFDD2D;
  --brand-2: #FFCD00;
  --brand-grad: linear-gradient(135deg, #FFE45C, #FFDD2D 55%, #FFC700);
  --on-brand: #333333;
  --brand-soft: #FFF6CC;
  --bg: #F6F7F8;
  --surface: #ffffff;
  --surface-2: #F1F2F4;
  --text: #333333;
  --muted: #9299A2;
  --line: #E7E9EC;
  --danger: #F52222;
  --ok: #00B92D;
  --header-bg: var(--bg);
  --header-text: var(--text);
  --tab-active: #333333;
  --font: "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, sans-serif;
  --r-l: 28px;
  --r-m: 20px;
  --r-s: 14px;
  --shadow: 0 4px 16px rgba(0, 0, 0, .05);
  --promo-1: linear-gradient(135deg, #FFDD2D, #FFB800);
  --promo-2: linear-gradient(135deg, #333333, #5B5F66);
  --promo-3: linear-gradient(135deg, #428BF9, #6B4EFF);
  --page-bg: radial-gradient(900px 500px at 0% 0%, #FFF3B0 0%, transparent 60%), #F6F7F8;
  --page-text: #333333;
  --page-muted: #6D737B;
  --page-card: rgba(255,255,255,.82);
  --page-line: rgba(0,0,0,.07);
}

/* ВТБ: глубокий синий #0A2896 и голубой #009FDF */
[data-skin="vtb"] {
  --brand: #0A2896;
  --brand-2: #009FDF;
  --brand-grad: linear-gradient(135deg, #0A2896 0%, #1E4BD2 55%, #009FDF 100%);
  --on-brand: #fff;
  --brand-soft: #E3EBFF;
  --bg: #EEF2F9;
  --surface: #ffffff;
  --surface-2: #EDF1F8;
  --text: #0A1E45;
  --muted: #7A87A3;
  --line: #DFE5F0;
  --danger: #E5243B;
  --ok: #19B36B;
  --header-bg: linear-gradient(160deg, #0A2896, #1A44C8);
  --header-text: #fff;
  --tab-active: #0A2896;
  --font: "Roboto", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, sans-serif;
  --r-l: 16px;
  --r-m: 12px;
  --r-s: 8px;
  --shadow: 0 4px 16px rgba(10, 40, 150, .08);
  --promo-1: linear-gradient(135deg, #0A2896, #009FDF);
  --promo-2: linear-gradient(135deg, #009FDF, #3BD3FF);
  --promo-3: linear-gradient(135deg, #1E4BD2, #7B61FF);
  --page-bg: radial-gradient(900px 600px at 0% 0%, #D3DEFF 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #D2F1FF 0%, transparent 60%), #F1F4FA;
  --page-text: #0A1E45;
  --page-muted: #5B6884;
  --page-card: rgba(255,255,255,.8);
  --page-line: rgba(10,30,69,.08);
}

/* Газпромбанк: тёмная тема, глубокий синий и яркий голубой акцент */
[data-skin="gpb"] {
  --brand: #2B6BF3;
  --brand-2: #00C2FF;
  --brand-grad: linear-gradient(135deg, #1D4ED8 0%, #2B6BF3 50%, #00C2FF 100%);
  --on-brand: #fff;
  --brand-soft: #1A2C55;
  --bg: #0B1222;
  --surface: #141D33;
  --surface-2: #1C2742;
  --text: #EAF0FF;
  --muted: #8A97B5;
  --line: #24304D;
  --danger: #FF4D6A;
  --ok: #2FD58B;
  --header-bg: var(--bg);
  --header-text: var(--text);
  --tab-active: #4D8BFF;
  --font: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --r-l: 22px;
  --r-m: 16px;
  --r-s: 12px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);
  --promo-1: linear-gradient(135deg, #1D4ED8, #00C2FF);
  --promo-2: linear-gradient(135deg, #0B1F4D, #2B6BF3);
  --promo-3: linear-gradient(135deg, #6D28D9, #2B6BF3);
  --page-bg: radial-gradient(900px 600px at 0% 0%, #13245A 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #0D3550 0%, transparent 60%), #070C18;
  --page-text: #EAF0FF;
  --page-muted: #94A1C0;
  --page-card: rgba(20,29,51,.75);
  --page-line: rgba(255,255,255,.08);
}