/* =============================================
   MB CAR — Design System Variables
   ============================================= */

:root {
  /* ── Brand Colors ── */
  --c-black:        #000000;
  --c-dark:         #111111;
  --c-footer:       #0b0b0b;
  --c-footer-bd:    #1a1a1a;
  --c-footer-text:  #888888;

  /* ── Blues ── */
  --c-blue:         #2563EB;
  --c-accent:       #3B82F6;
  --c-accent-hover: #2563EB;
  --c-blue-light:   #EFF6FF;
  --c-blue-border:  #BFDBFE;

  /* ── Grays ── */
  --c-gray-50:      #F9FAFB;
  --c-gray-100:     #F3F4F6;
  --c-gray-bg:      #F5F5F7;
  --c-gray-200:     #E5E7EB;
  --c-gray-300:     #D1D5DB;
  --c-gray-400:     #9CA3AF;
  --c-gray-500:     #6B7280;
  --c-gray-600:     #4B5563;
  --c-gray-700:     #374151;
  --c-gray-800:     #1F2937;
  --c-gray-900:     #111827;

  /* ── Status Colors ── */
  --c-green:        #16A34A;
  --c-green-light:  #DCFCE7;
  --c-orange:       #EA580C;
  --c-orange-light: #FFF7ED;
  --c-red:          #DC2626;
  --c-red-light:    #FEF2F2;

  /* ── Base ── */
  --c-white:        #ffffff;
  --c-text:         #111827;
  --c-text-muted:   #6B7280;
  --c-text-light:   #9CA3AF;
  --c-border:       #E5E7EB;
  --c-border-input: #D1D5DB;

  /* ── Смысловые токены (две темы). --c-white / --c-black остались буквальными:
        ими красятся только всегда-тёмные блоки (первый экран, верхняя полоса, подвал) ── */
  --c-page:         #EEF1F6;                 /* фон страницы под подложкой */
  --c-page-2:       #E3E8F0;                 /* второй цвет градиента подложки */
  --c-surface:      rgba(255,255,255,.94);   /* плашки и карточки — подложка просвечивает */
  --c-surface-solid:#ffffff;                 /* выпадающие окна, панели, белые кнопки — непрозрачные */
  --c-section:      rgba(255,255,255,.36);   /* широкие полосы-секции */
  --c-field:        #ffffff;                 /* поля ввода */
  --c-chip:         rgba(255,255,255,.9);    /* круглые кнопки поверх фото */
  --c-header-bg:    rgba(255,255,255,.9);    /* шапка */
  --c-ink:          #000000;                 /* «чернила»: чёрный текст, заголовки, рамки */
  --c-on-accent:    #ffffff;                 /* текст на залитых кнопках и значках */
  --c-btn-bg:       #000000;                 /* заливка чёрных кнопок и активных переключателей */
  --c-btn-bg-hover: #333333;
  --c-inverse:      #111827;                 /* всегда тёмный: всплывающие подсказки, значки на белых кружках */

  /* ── Typography ── */
  --font:           'Inter', system-ui, -apple-system, sans-serif;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* ── Font Sizes ── */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.25rem;    /* 20px */
  --fs-2xl:   1.5rem;     /* 24px */
  --fs-3xl:   1.875rem;   /* 30px */
  --fs-4xl:   2.25rem;    /* 36px */
  --fs-5xl:   3rem;       /* 48px */
  --fs-6xl:   3.75rem;    /* 60px */
  --fs-7xl:   4.5rem;     /* 72px */

  /* ── Spacing (4px base) ── */
  --sp-1:   0.25rem;   /* 4px  */
  --sp-2:   0.5rem;    /* 8px  */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */

  /* ── Layout ── */
  --container-max:  1280px;
  --container-px:   1rem;
  --header-h:       80px;
  --topbar-h:       36px;

  /* ── Border Radius ── */
  --r-sm:   0.375rem;  /* 6px  */
  --r-md:   0.5rem;    /* 8px  */
  --r-lg:   0.75rem;   /* 12px */
  --r-xl:   1rem;      /* 16px */
  --r-2xl:  1.5rem;    /* 24px */
  --r-3xl:  1.875rem;  /* 30px */
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
  --shadow:     0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-base:   200ms ease;
  --t-slow:   300ms ease;
  --t-slower: 500ms ease;

  /* ── Z-Index ── */
  --z-header:   50;
  --z-dropdown: 100;
  --z-modal:    200;
}

/* ── Тёмная тема: те же имена, другие значения. Серая шкала перевёрнута:
      50–300 — полупрозрачные светлые (фоны и рамки), 400–900 — светлый текст ── */
html[data-theme="dark"] {
  color-scheme: dark;

  --c-blue:         #3B82F6;
  --c-accent-hover: #60A5FA;
  --c-blue-light:   rgba(59,130,246,.16);
  --c-blue-border:  rgba(59,130,246,.45);

  --c-gray-50:      rgba(255,255,255,.04);
  --c-gray-100:     rgba(255,255,255,.07);
  --c-gray-bg:      rgba(255,255,255,.05);
  --c-gray-200:     rgba(255,255,255,.16);
  --c-gray-300:     rgba(255,255,255,.20);
  --c-gray-400:     #7C869B;
  --c-gray-500:     #97A0B3;
  --c-gray-600:     #B0B9C9;
  --c-gray-700:     #C9D0DC;
  --c-gray-800:     #E1E5ED;
  --c-gray-900:     #F1F3F8;

  --c-green:        #22A455;
  --c-green-light:  rgba(34,197,94,.16);
  --c-orange-light: rgba(234,88,12,.16);
  --c-red:          #EF4444;
  --c-red-light:    rgba(239,68,68,.15);

  --c-text:         #E9ECF3;
  --c-text-muted:   #97A0B3;
  --c-text-light:   #7C869B;
  --c-border:       rgba(255,255,255,.16);
  --c-border-input: rgba(255,255,255,.20);

  --c-page:         #171C27;
  --c-page-2:       #1D2331;
  --c-surface:      rgba(50,59,79,.94);
  --c-surface-solid:#323B4F;
  --c-section:      rgba(36,43,58,.40);
  --c-field:        #252C3B;
  --c-chip:         rgba(50,59,79,.92);
  --c-header-bg:    rgba(30,36,49,.90);
  --c-ink:          #F1F3F8;
  --c-btn-bg:       #3B82F6;
  --c-btn-bg-hover: #2563EB;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.35);
  --shadow:     0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.45), 0 2px 4px -1px rgba(0,0,0,.3);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -2px rgba(0,0,0,.3);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.55), 0 10px 10px -5px rgba(0,0,0,.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.7);
}

@media (min-width: 1024px) {
  :root {
    --container-px: 2rem;
  }
}