/* Berkate Portable Design Tokens — v1
 * Подключите этот файл и используйте var(--ds-*) в своих компонентах.
 * Переключайте дизайн через data-design="base|blur|soft" на <html>.
 * Тема: data-berkate-theme="dark|light" на <html>.
 * https://berkate.github.io/Design_System/ */

/* ─────────────────────────────────────────
   BASE design — тёмная тема (по умолчанию)
   ───────────────────────────────────────── */
:root {
  /* Страница */
  --ds-page-bg: hsl(var(--background));
  --ds-map-opacity: 1;

  /* Поверхности (карточки, панели) */
  --ds-surface: hsl(var(--card));
  --ds-border: 1px solid hsl(var(--border) / .58);
  --ds-shadow: none;
  --ds-shadow-sm: none;
  --ds-shadow-hover: none;
  --ds-shadow-active: none;
  --ds-blur: none;

  /* Типографика */
  --ds-heading-font: "Play", sans-serif;
  --ds-body-font: "Roboto", system-ui, sans-serif;
  --ds-text: hsl(var(--foreground));
  --ds-text-muted: hsl(var(--muted-foreground));

  /* Акцент */
  --ds-accent: hsl(var(--primary));

  /* Навигация */
  --ds-nav-bg: hsl(var(--background));
  --ds-nav-border: 1px solid hsl(var(--border) / .55);
  --ds-nav-shadow: none;
  --ds-nav-blur: none;

  /* Нижняя навигация */
  --ds-nav-bottom-bg: hsl(var(--background));
  --ds-nav-bottom-border: 1px solid hsl(var(--border) / .55);
  --ds-nav-bottom-shadow: none;

  /* Разделители */
  --ds-divider: hsl(var(--border) / .4);

  /* Метки секций */
  --ds-label: hsl(var(--primary));
}

/* BASE — светлая тема */
html[data-berkate-theme="light"] {
  --ds-surface: hsl(var(--card));
  --ds-border: 1px solid hsl(var(--border) / .72);
  --ds-shadow: 0 2px 16px rgba(10,20,40,.07);
  --ds-nav-bg: hsl(var(--background));
  --ds-nav-border: 1px solid hsl(var(--border) / .9);
  --ds-nav-shadow: 0 8px 20px rgba(22,35,58,.1);
  --ds-nav-bottom-bg: hsl(var(--background));
  --ds-nav-bottom-border: 1px solid hsl(var(--border) / .9);
}

/* ─────────────────────────────────────────
   BLUR design — стеклянный (glassmorphic)
   ───────────────────────────────────────── */
html[data-design="blur"] {
  --ds-surface: hsl(var(--card) / .38);
  --ds-border: 1px solid hsl(var(--border) / .28);
  --ds-blur: blur(5px);
}
html[data-berkate-theme="light"][data-design="blur"] {
  --ds-surface: rgba(255,255,255,.42);
  --ds-border: 1px solid rgba(0,0,0,.09);
}

/* ─────────────────────────────────────────
   SOFT design — нейморфный (neumorphic)
   ───────────────────────────────────────── */
html[data-design="soft"] {
  /* Страница */
  --ds-page-bg: #E6EAF0;
  --ds-map-opacity: 0;

  /* Поверхности */
  --ds-surface: #E6EAF0;
  --ds-border: none;
  --ds-shadow: -8px -8px 18px #FFFFFF, 8px 8px 18px #B6BECA;
  --ds-shadow-sm: -4px -4px 10px #FFFFFF, 4px 4px 10px #B6BECA;
  --ds-shadow-hover: -12px -12px 24px #FFFFFF, 12px 12px 24px #B0B8C4;
  --ds-shadow-active: inset 3px 3px 7px #BAC2CE, inset -3px -3px 7px #FFFFFF;
  --ds-blur: none;

  /* Типографика */
  --ds-heading-font: 'Manrope', system-ui, sans-serif;
  --ds-body-font: 'Inter', system-ui, sans-serif;
  --ds-text: #272D3B;
  --ds-text-muted: #555D70;

  /* Акцент */
  --ds-accent: #3D67E0;

  /* Навигация */
  --ds-nav-bg: #E6EAF0;
  --ds-nav-border: none;
  --ds-nav-shadow: -4px -4px 10px #FFFFFF, 4px 4px 10px #B6BECA;
  --ds-nav-blur: none;

  /* Нижняя навигация */
  --ds-nav-bottom-bg: #E6EAF0;
  --ds-nav-bottom-border: none;
  --ds-nav-bottom-shadow: 0 -4px 12px #B6BECA, 0 -2px 6px #FFFFFF;

  /* Разделители */
  --ds-divider: rgba(39,45,59,.1);

  /* Метки секций */
  --ds-label: #3D67E0;
}

/* ─────────────────────────────────────────
   LUMORA A — «Металл» (шлифованный алюминий)
   ───────────────────────────────────────── */
html[data-design="lumora-a"] {
  --primary: 184 82% 62%;
  --primary-foreground: 220 15% 12%;
  --ds-page-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='4'%3E%3Crect width='1' height='1' y='0' fill='rgba(255,255,255,.14)'/%3E%3Crect width='1' height='1' y='2' fill='rgba(0,0,0,.10)'/%3E%3C/svg%3E"),var(--bds-bg, #2A2B2F);
  --ds-surface: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='4'%3E%3Crect width='1' height='1' y='0' fill='rgba(255,255,255,.10)'/%3E%3Crect width='1' height='1' y='2' fill='rgba(0,0,0,.07)'/%3E%3C/svg%3E"),var(--bds-surface, linear-gradient(180deg,#3D3F45,#2B2D32));
  --ds-border: 1px solid var(--bds-border, rgba(255,255,255,.08));
  --ds-blur: none;
  --ds-shadow-sm: var(--bds-shadow-sm);
  --ds-shadow: var(--bds-shadow-md);
  --ds-shadow-hover: var(--bds-shadow-lg);
  --ds-text: var(--bds-text, #ECEEF2);
  --ds-text-muted: var(--bds-text-muted, #A6ACB6);
  --ds-accent: var(--bds-accent, #4FE3EE);
  --ds-label: var(--bds-accent, #4FE3EE);
  --ds-heading-font: var(--bds-font-heading, 'Advent Pro', sans-serif);
  --ds-body-font: var(--bds-font-body, 'Martian Mono', monospace);
  --ds-nav-bg: var(--bds-surface-2, #34363C);
  --ds-nav-border: 1px solid var(--bds-border, rgba(255,255,255,.08));
  --ds-nav-shadow: var(--bds-shadow-sm);
  --ds-nav-bottom-bg: var(--bds-surface-2, #34363C);
  --ds-nav-bottom-border: 1px solid var(--bds-border, rgba(255,255,255,.08));
  --ds-nav-bottom-shadow: 0 -1px 0 var(--bds-border, rgba(255,255,255,.08)), 0 -8px 20px rgba(0,0,0,.4);
  --ds-divider: var(--bds-border, rgba(255,255,255,.08));
  --ds-map-opacity: 0;
  --ds-primary-bg: var(--bds-primary-bg, linear-gradient(180deg,#18191D,#0F1013));
  --ds-on-primary: var(--bds-on-primary, #ECEFF3);
}
html[data-berkate-theme="light"][data-design="lumora-a"] {
  --primary: 184 62% 48%;
  --primary-foreground: 0 0% 100%;
  --ds-page-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='4'%3E%3Crect width='1' height='1' y='0' fill='rgba(0,0,0,.10)'/%3E%3Crect width='1' height='1' y='2' fill='rgba(255,255,255,.07)'/%3E%3C/svg%3E"),var(--bds-bg, #D8DCE1);
  --ds-surface: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='4'%3E%3Crect width='1' height='1' y='0' fill='rgba(0,0,0,.07)'/%3E%3Crect width='1' height='1' y='2' fill='rgba(255,255,255,.05)'/%3E%3C/svg%3E"),var(--bds-surface, linear-gradient(180deg,#EEF0F3,#D2D7DD));
  --ds-border: 1px solid var(--bds-border, rgba(55,65,80,.20));
  --ds-shadow-sm: var(--bds-shadow-sm);
  --ds-shadow: var(--bds-shadow-md);
  --ds-shadow-hover: var(--bds-shadow-lg);
  --ds-text: var(--bds-text, #1B1E23);
  --ds-text-muted: var(--bds-text-muted, #4A5260);
  --ds-accent: var(--bds-accent, #3FD8E6);
  --ds-label: var(--bds-accent, #3FD8E6);
  --ds-nav-bg: var(--bds-surface-2, #E3E6EA);
  --ds-nav-border: 1px solid var(--bds-border, rgba(55,65,80,.20));
  --ds-nav-shadow: var(--bds-shadow-sm);
  --ds-nav-bottom-bg: var(--bds-surface-2, #E3E6EA);
  --ds-nav-bottom-border: 1px solid var(--bds-border, rgba(55,65,80,.20));
  --ds-nav-bottom-shadow: 0 -1px 0 var(--bds-border, rgba(55,65,80,.20)), 0 -8px 20px rgba(35,42,55,.12);
  --ds-divider: var(--bds-border, rgba(55,65,80,.15));
  --ds-primary-bg: var(--bds-primary-bg, linear-gradient(180deg,#3B3E45,#1B1D21));
  --ds-on-primary: var(--bds-on-primary, #EEF2F6);
}
html[data-design="lumora-a"] .btn-primary,
html[data-design="lumora-a"] .nav-cta { background: var(--ds-primary-bg) !important; color: var(--ds-on-primary) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(63,216,230,.28), 0 8px 18px -8px rgba(20,24,30,.55) !important; }
html[data-berkate-theme="light"][data-design="lumora-a"] .btn-primary,
html[data-berkate-theme="light"][data-design="lumora-a"] .nav-cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(63,216,230,.28), 0 8px 18px -8px rgba(35,42,55,.45) !important; }

/* ─────────────────────────────────────────
   LUMORA B — «Графит и стекло» (дефолт)
   ───────────────────────────────────────── */
html[data-design="lumora-b"] {
  --primary: 330 100% 59%;
  --primary-foreground: 0 0% 100%;
  --ds-page-bg: radial-gradient(ellipse 70% 60% at 15% 25%, rgba(123,47,247,.14) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 85% 75%, rgba(255,46,147,.14) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 55% 50%, rgba(34,216,242,.07) 0%, transparent 50%), #2D2E34;
  --ds-surface: linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  --ds-border: 1px solid rgba(255,255,255,.14);
  --ds-blur: blur(18px);
  --ds-shadow-sm: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -12px rgba(0,0,0,.6);
  --ds-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.035), 0 30px 60px -28px rgba(0,0,0,.7), 0 10px 24px -16px rgba(0,0,0,.5);
  --ds-shadow-hover: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px rgba(0,0,0,.75), 0 14px 30px -18px rgba(0,0,0,.55);
  --ds-text: #F4F5F9;
  --ds-text-muted: #C4C6CE;
  --ds-accent: #FF2E93;
  --ds-label: #FF2E93;
  --ds-heading-font: 'Manrope', sans-serif;
  --ds-body-font: 'Onest', sans-serif;
  --ds-nav-bg: rgba(255,255,255,.07);
  --ds-nav-border: 1px solid rgba(255,255,255,.14);
  --ds-nav-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -12px rgba(0,0,0,.6);
  --ds-nav-bottom-bg: rgba(45,46,52,.85);
  --ds-nav-bottom-border: 1px solid rgba(255,255,255,.14);
  --ds-nav-bottom-shadow: 0 -8px 32px rgba(0,0,0,.5);
  --ds-divider: rgba(255,255,255,.12);
  --ds-map-opacity: 0;
  --ds-primary-bg: linear-gradient(180deg,#FFFFFF,#E4E6EC);
  --ds-on-primary: #1B1C22;
}
html[data-berkate-theme="light"][data-design="lumora-b"] {
  --ds-page-bg: radial-gradient(ellipse 70% 60% at 15% 25%, rgba(123,47,247,.10) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 85% 75%, rgba(255,46,147,.10) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 55% 50%, rgba(34,216,242,.06) 0%, transparent 50%), #BFCDD3;
  --ds-surface: linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,.22));
  --ds-border: 1px solid rgba(24,46,58,.15);
  --ds-shadow-sm: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px -12px rgba(34,58,70,.45);
  --ds-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.18), 0 28px 56px -28px rgba(34,58,70,.55), 0 8px 20px -14px rgba(34,58,70,.32);
  --ds-shadow-hover: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(255,255,255,.3), 0 40px 80px -30px rgba(34,58,70,.6), 0 12px 26px -16px rgba(34,58,70,.35);
  --ds-text: #111B21;
  --ds-text-muted: #29383F;
  --ds-accent: #FF2E93;
  --ds-label: #7B2FF7;
  --ds-nav-bg: rgba(255,255,255,.5);
  --ds-nav-border: 1px solid rgba(24,46,58,.15);
  --ds-nav-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px -12px rgba(34,58,70,.2);
  --ds-nav-bottom-bg: rgba(191,205,211,.88);
  --ds-nav-bottom-border: 1px solid rgba(24,46,58,.12);
  --ds-nav-bottom-shadow: 0 -8px 24px rgba(34,58,70,.18);
  --ds-divider: rgba(24,46,58,.1);
  --ds-primary-bg: linear-gradient(180deg,#1E2A31,#111B21);
  --ds-on-primary: #FFFFFF;
}
html[data-design="lumora-b"] .btn-primary,
html[data-design="lumora-b"] .nav-cta { background: var(--ds-primary-bg) !important; color: var(--ds-on-primary) !important; box-shadow: 0 12px 30px -12px rgba(255,46,147,.45), inset 0 1px 0 #FFFFFF !important; }
html[data-berkate-theme="light"][data-design="lumora-b"] .btn-primary,
html[data-berkate-theme="light"][data-design="lumora-b"] .nav-cta { box-shadow: 0 12px 26px -12px rgba(17,27,33,.55), inset 0 1px 0 rgba(255,255,255,.12) !important; }

/* ─────────────────────────────────────────
   LUMORA C — «Холодная сталь»
   ───────────────────────────────────────── */
html[data-design="lumora-c"] {
  --primary: 186 90% 68%;
  --primary-foreground: 220 20% 10%;
  --ds-page-bg: #3E4F65;
  --ds-surface: linear-gradient(180deg,#5F738E,#45576F);
  --ds-border: 1px solid rgba(255,255,255,.13);
  --ds-blur: none;
  --ds-shadow-sm: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(8,16,30,.4);
  --ds-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(8,16,30,.3), 0 14px 30px -14px rgba(8,16,30,.6);
  --ds-shadow-hover: inset 0 1px 0 rgba(255,255,255,.24), 0 32px 64px -28px rgba(8,16,30,.7), 0 10px 22px -12px rgba(8,16,30,.4);
  --ds-text: #F5F8FC;
  --ds-text-muted: #DDE4EE;
  --ds-accent: #5FE9F5;
  --ds-label: #5FE9F5;
  --ds-heading-font: 'Advent Pro', sans-serif;
  --ds-body-font: 'Onest', sans-serif;
  --ds-nav-bg: #4A5C75;
  --ds-nav-border: 1px solid rgba(255,255,255,.13);
  --ds-nav-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(8,16,30,.4);
  --ds-nav-bottom-bg: #3E4F65;
  --ds-nav-bottom-border: 1px solid rgba(255,255,255,.13);
  --ds-nav-bottom-shadow: 0 -1px 0 rgba(255,255,255,.13), 0 -8px 20px rgba(8,16,30,.4);
  --ds-divider: rgba(255,255,255,.1);
  --ds-map-opacity: 0;
  --ds-primary-bg: linear-gradient(180deg,#212C3B,#18212E);
  --ds-on-primary: #EEF4FB;
}
html[data-berkate-theme="light"][data-design="lumora-c"] {
  --primary: 250 75% 59%;
  --primary-foreground: 0 0% 100%;
  --ds-page-bg: #DDE2EA;
  --ds-surface: linear-gradient(180deg,#F2F4F8,#D6DCE7);
  --ds-border: 1px solid rgba(55,65,100,.18);
  --ds-shadow-sm: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 3px rgba(40,50,85,.16);
  --ds-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(55,65,100,.14), 0 12px 26px -14px rgba(40,50,85,.34);
  --ds-shadow-hover: inset 0 1px 0 rgba(255,255,255,.95), 0 30px 60px -28px rgba(40,50,85,.42), 0 8px 18px -10px rgba(40,50,85,.18);
  --ds-text: #232A3B;
  --ds-text-muted: #4E5770;
  --ds-accent: #7F72F5;
  --ds-label: #4F3FD0;
  --ds-nav-bg: #E7EBF1;
  --ds-nav-border: 1px solid rgba(55,65,100,.18);
  --ds-nav-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 3px rgba(40,50,85,.16);
  --ds-nav-bottom-bg: #E7EBF1;
  --ds-nav-bottom-border: 1px solid rgba(55,65,100,.18);
  --ds-nav-bottom-shadow: 0 -1px 0 rgba(55,65,100,.18), 0 -8px 20px rgba(40,50,85,.1);
  --ds-divider: rgba(55,65,100,.12);
  --ds-primary-bg: linear-gradient(180deg,#5D4EE0,#4F3FD0);
  --ds-on-primary: #FFFFFF;
}
html[data-design="lumora-c"] .btn-primary,
html[data-design="lumora-c"] .nav-cta { background: var(--ds-primary-bg) !important; color: var(--ds-on-primary) !important; box-shadow: 0 0 0 1px rgba(95,233,245,.4), 0 0 18px -4px rgba(95,233,245,.5), inset 0 1px 0 rgba(255,255,255,.08) !important; }
html[data-berkate-theme="light"][data-design="lumora-c"] .btn-primary,
html[data-berkate-theme="light"][data-design="lumora-c"] .nav-cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px -10px rgba(79,63,208,.6) !important; }