/* Проектные токены Vertex Siam — сформированы на основе DESIGN.md и бренд-референса */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* ========================================================================
     ТЕМНАЯ ТЕМА (Default / High-Tech European Engineering)
     ======================================================================== */
  --color-bg: #0B0E14;
  --color-surface: #121622;
  --color-surface-elevated: #181D2D;
  --color-surface-hover: #1E2538;
  --color-surface-card: #131724;
  
  --color-header-bg: rgba(11, 14, 20, 0.88);
  --color-footer-bg: #080A0F;

  /* Контрастная светлая инженерная панель для списков и каталога */
  --color-surface-light: #E9EBEE;
  --color-surface-light-card: #FFFFFF;
  --color-text-dark: #0D131F;
  --color-text-dark-muted: #4B5563;
  --color-line-dark: #D1D5DB;

  /* Текст на темном фоне */
  --color-text: #F8FAFC;
  --color-muted: #94A3B8;
  --color-dim: #64748B;

  /* Акцентный электро-кобальт */
  --color-accent: #2052FE;
  --color-primary: #2052FE;
  --color-accent-hover: #1742DE;
  --color-accent-active: #0F32B5;
  --color-accent-glow: rgba(32, 82, 254, 0.4);
  --color-accent-subtle: rgba(32, 82, 254, 0.12);
  --color-accent-text: #FFFFFF;

  /* Границы и разделители */
  --color-line: rgba(255, 255, 255, 0.08);
  --color-line-hover: rgba(255, 255, 255, 0.18);
  --color-line-accent: rgba(32, 82, 254, 0.35);

  /* Тени */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 16px 45px rgba(0, 0, 0, 0.5);

  /* Статусы */
  --color-success: #10B981;
  --color-warning: #F59E0B;

  /* Шрифты */
  --font-heading: 'Space Grotesk', 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Типографические размеры */
  --text-xs: 12px;
  --text-small: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-h3: clamp(20px, 2.5vw, 28px);
  --text-h2: clamp(28px, 4vw, 44px);
  --text-h1: clamp(34px, 5.5vw, 68px);

  /* Отступы и ритм */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 36px;
  --space-5: 56px;
  --space-6: 88px;
  --space-7: 120px;

  /* Сетка и контейнеры */
  --container: 1280px;
  --container-narrow: 960px;
  --container-wide: 1400px;

  /* Радиусы скругления в стиле референса */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Элементы управления */
  --control-height: 50px;
  --control-height-small: 40px;

  /* Аппаратные переходы */
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ========================================================================
   СВЕТЛАЯ ТЕМА (High-Tech Architectural Platinum & Slate)
   Поддерживает все вариации селекторов: html[data-theme="light"],
   body[data-theme="light"], [data-theme="light"], .theme-light
   ======================================================================== */
:root[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"],
html.theme-light,
body.theme-light,
[data-theme="light"],
.theme-light {
  --color-bg: #F4F6F9 !important;
  --color-surface: #FFFFFF !important;
  --color-surface-elevated: #F8FAFC !important;
  --color-surface-hover: #EDF2F7 !important;
  --color-surface-card: #FFFFFF !important;

  --color-header-bg: rgba(255, 255, 255, 0.94) !important;
  --color-footer-bg: #0B0E14 !important;

  --color-surface-light: #E2E8F0 !important;
  --color-surface-light-card: #FFFFFF !important;
  --color-text-dark: #0D131F !important;
  --color-text-dark-muted: #4B5563 !important;
  --color-line-dark: #CBD5E1 !important;

  /* Текст на светлом фоне */
  --color-text: #0D131F !important;
  --color-muted: #475569 !important;
  --color-dim: #64748B !important;

  /* Акцентный электро-кобальт */
  --color-accent: #2052FE !important;
  --color-primary: #2052FE !important;
  --color-accent-hover: #1742DE !important;
  --color-accent-active: #0F32B5 !important;
  --color-accent-glow: rgba(32, 82, 254, 0.2) !important;
  --color-accent-subtle: rgba(32, 82, 254, 0.08) !important;
  --color-accent-text: #FFFFFF !important;

  /* Границы и разделители */
  --color-line: rgba(15, 23, 42, 0.1) !important;
  --color-line-hover: rgba(15, 23, 42, 0.2) !important;
  --color-line-accent: rgba(32, 82, 254, 0.35) !important;

  /* Тени */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  --shadow-card-hover: 0 12px 32px rgba(32, 82, 254, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"],
html.theme-light,
html[data-theme="light"] body,
body.theme-light {
  background-color: #F4F6F9 !important;
  color: #0D131F !important;
}