/* =============================================
   BO Design System — Design Tokens v2.0
   Navy + Red Ring
   Brand: babyoptgroup (Бэйби Опт Груп · bogr.ru)
   Theme: Wholesale Admin — уверенный B2B-дистрибьютор
          детских брендов. Navy + Red Ring; нейтральный,
          профессиональный, надёжный.
   ============================================= */

/* ── Averta Cyrillic (локальный шрифт) ── */
@font-face{font-family:'Averta';src:url('assets/fonts/averta-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Averta';src:url('assets/fonts/averta-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Averta';src:url('assets/fonts/averta-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Averta';src:url('assets/fonts/averta-extrabold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Averta';src:url('assets/fonts/averta-black.woff2') format('woff2');font-weight:900;font-display:swap}

:root {
  /* ── Navy ── */
  --bo-navy-deep:   #131C33;
  --bo-navy:        #1B2A4A;
  --bo-navy-700:    #24365C;
  --bo-navy-600:    #2E4472;
  --bo-navy-soft:   #E8ECF4;

  /* ── Red ── */
  --bo-red:         #E23A2E;
  --bo-red-hover:   #C92D22;
  --bo-red-text:    #B3271D;
  --bo-red-soft:    #FBEAE8;
  --bo-red-bright:  #FF6B5E;   /* яркий red для тёмных подложек (декор) */

  /* ── Ink / Text ── */
  --bo-ink:         #1A2238;
  --bo-text:        #4A5468;
  --bo-text-light:  #656D80;

  /* ── Фоны ── */
  --bo-paper:       #F6F7F9;
  --bo-surface:     #EEF0F4;
  --bo-white:       #FFFFFF;
  --bo-border:      #E3E6EC;
  --bo-border-2:    #CFD4DE;
  --bo-control-border: #9AA2B0;

  /* ── Status tokens (8 тонов × 4: bg / text / border / dot) ── */
  --bo-st-neutral-bg:     #F1F2F5;
  --bo-st-neutral-text:   #4A5468;
  --bo-st-neutral-border: #D9DDE5;
  --bo-st-neutral-dot:    #7C8499;

  --bo-st-amber-bg:       #FEF3C7;
  --bo-st-amber-text:     #A16207;
  --bo-st-amber-border:   #FDE68A;
  --bo-st-amber-dot:      #F59E0B;

  --bo-st-orange-bg:      #FFEDD5;
  --bo-st-orange-text:    #C2410C;
  --bo-st-orange-border:  #FED7AA;
  --bo-st-orange-dot:     #F97316;

  --bo-st-red-bg:         #FEE2E2;
  --bo-st-red-text:       #B91C1C;
  --bo-st-red-border:     #FECACA;
  --bo-st-red-dot:        #EF4444;

  --bo-st-indigo-bg:      #E0E7FF;
  --bo-st-indigo-text:    #4338CA;
  --bo-st-indigo-border:  #C7D2FE;
  --bo-st-indigo-dot:     #6366F1;

  --bo-st-sky-bg:         #E0F2FE;
  --bo-st-sky-text:       #0369A1;
  --bo-st-sky-border:     #BAE6FD;
  --bo-st-sky-dot:        #0EA5E9;

  --bo-st-teal-bg:        #CCFBF1;
  --bo-st-teal-text:      #0F766E;
  --bo-st-teal-border:    #99F6E4;
  --bo-st-teal-dot:       #14B8A6;

  --bo-st-green-bg:       #DCFCE7;
  --bo-st-green-text:     #15803D;
  --bo-st-green-border:   #BBF7D0;
  --bo-st-green-dot:      #22C55E;

  /* ── Typography ── */
  --bo-font:      'Averta', system-ui, sans-serif;
  --bo-font-mono: 'Geist Mono', ui-monospace, monospace;

  --bo-fs-hero:     clamp(36px, 5.5vw + 16px, 64px);
  --bo-fs-display:  clamp(30px, 4.2vw + 12px, 52px);
  --bo-fs-h1:       36px;
  --bo-fs-h2:       28px;
  --bo-fs-h3:       22px;
  --bo-fs-section-h: clamp(24px, 2.2vw + 14px, 36px);
  --bo-fs-body-lg:  19px;
  --bo-fs-body:     16px;
  --bo-fs-small:    14px;
  --bo-fs-caption:  12px;
  --bo-fs-label:    11px;

  --bo-fw-regular:   400;
  --bo-fw-semibold:  600;
  --bo-fw-bold:      700;
  --bo-fw-extrabold: 800;
  --bo-fw-black:     900;

  --bo-lh-tight:   1.1;
  --bo-lh-heading: 1.22;
  --bo-lh-body:    1.6;

  --bo-ls-display: -0.015em;
  --bo-ls-heading: -0.01em;
  --bo-ls-body:    0;
  --bo-ls-caps:    0.11em;

  /* ── Radii ── */
  --bo-r-sm:    8px;
  --bo-r-md:    12px;
  --bo-r-card:  20px;
  --bo-r-lg:    28px;
  --bo-r-btn:   999px;
  --bo-r-input: 12px;
  --bo-r-panel: 14px;

  /* ── Shadows ── */
  --bo-shadow-sm:        0 2px 10px rgba(19,28,51,.06);
  --bo-shadow-card:      0 14px 38px rgba(19,28,51,.10);
  --bo-shadow-card-hover:0 22px 50px rgba(19,28,51,.16);
  --bo-shadow-btn:       0 8px 20px rgba(226,58,46,.25);
  --bo-ring:             0 0 0 1px var(--bo-border);
  --bo-focus:            0 0 0 4px rgba(226,58,46,.32);

  /* ── Spacing Scale (4px base, 9 ступеней) ── */
  --bo-space-xs:  4px;
  --bo-space-sm:  8px;
  --bo-space-md:  16px;
  --bo-space-lg:  24px;
  --bo-space-xl:  32px;
  --bo-space-2xl: 48px;
  --bo-space-3xl: 64px;
  --bo-space-4xl: 96px;
  --bo-space-5xl: 128px;

  /* ── Layout ── */
  --bo-container-max:    1200px;
  --bo-container-narrow: 800px;
  --bo-container-wide:   1200px;  /* v2.1: единая ширина всех страниц */
  --bo-nav-height:       72px;
  --bo-card-border:      1px;
  --bo-card-padding:     24px;

  /* ── Transitions ── */
  --bo-ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --bo-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --bo-duration-fast: 150ms;
  --bo-duration-normal: 300ms;
  --bo-duration-slow: 520ms;

  /* ── Button specifics ── */
  --bo-btn-height:      52px;
  --bo-btn-padding:     0 30px;
  --bo-btn-font-size:   15px;
  --bo-btn-font-weight: 800;

  /* ── Семантические алиасы (light) ── */
  --bo-bg:          var(--bo-paper);
  --bo-card:        var(--bo-white);
  --bo-card-2:      var(--bo-surface);
  --bo-line:        var(--bo-border);
  --bo-fg:          var(--bo-ink);
  --bo-fg-muted:    var(--bo-text-light);
  --bo-primary:     var(--bo-navy);
  --bo-primary-fg:  #fff;
  --bo-accent:      var(--bo-red);
  --bo-accent-hover:var(--bo-red-hover);
  --bo-accent-soft: var(--bo-red-soft);
  --bo-accent-text: var(--bo-red-text);
}

/* ── Dark-тема (admin) — только переопределение алиасов ── */
[data-theme="dark"] {
  --bo-bg:          #10182B;
  --bo-accent-hover:#FF9C93;
  --bo-accent-soft: rgba(255,129,119,.14);
  --bo-card:        #1A2440;
  --bo-card-2:      #22304F;
  --bo-line:        #2C3A5C;
  --bo-fg:          #E9EDF5;
  --bo-fg-muted:    #93A0B8;
  --bo-primary:     #E85D52;
  --bo-primary-fg:  #131C33;
  --bo-accent:      #FF8177;
  --bo-accent-text: #FF8177;

  /* ── Status tokens dark overrides ── */
  /* neutral dot: #7C8499 */
  --bo-control-border: #5B6885;

  --bo-st-neutral-bg:     rgba(124,132,153,.14);
  --bo-st-neutral-text:   #B6BDCC;
  --bo-st-neutral-border: rgba(124,132,153,.35);

  /* amber dot: #F59E0B */
  --bo-st-amber-bg:       rgba(245,158,11,.14);
  --bo-st-amber-text:     #FCD34D;
  --bo-st-amber-border:   rgba(245,158,11,.35);

  /* orange dot: #F97316 */
  --bo-st-orange-bg:      rgba(249,115,22,.14);
  --bo-st-orange-text:    #FDBA74;
  --bo-st-orange-border:  rgba(249,115,22,.35);

  /* red dot: #EF4444 */
  --bo-st-red-bg:         rgba(239,68,68,.14);
  --bo-st-red-text:       #FCA5A5;
  --bo-st-red-border:     rgba(239,68,68,.35);

  /* indigo dot: #6366F1 */
  --bo-st-indigo-bg:      rgba(99,102,241,.14);
  --bo-st-indigo-text:    #A5B4FC;
  --bo-st-indigo-border:  rgba(99,102,241,.35);

  /* sky dot: #0EA5E9 */
  --bo-st-sky-bg:         rgba(14,165,233,.14);
  --bo-st-sky-text:       #7DD3FC;
  --bo-st-sky-border:     rgba(14,165,233,.35);

  /* teal dot: #14B8A6 */
  --bo-st-teal-bg:        rgba(20,184,166,.14);
  --bo-st-teal-text:      #5EEAD4;
  --bo-st-teal-border:    rgba(20,184,166,.35);

  /* green dot: #22C55E */
  --bo-st-green-bg:       rgba(34,197,94,.14);
  --bo-st-green-text:     #86EFAC;
  --bo-st-green-border:   rgba(34,197,94,.35);
}

/* =============================================
   Акцентные палитры (админ-слой)
   data-palette на <html>, рядом с data-theme.
   Меняют ТОЛЬКО интерфейсный акцент приложений
   (--bo-accent / --bo-accent-text; в dark — ещё --bo-primary).
   Бренд-константы (navy, красная «o») неизменны.
   Дефолт (без атрибута) = Bogr Red — ничего не переопределяется.
   ============================================= */

/* ── Cinematic Terracotta (из Cinematic DS) ── */
[data-palette="cinematic"] {
  --bo-accent:      #D4432E;
  --bo-accent-hover:#B83826;
  --bo-accent-soft: #F9E5E1;
  --bo-accent-text: #B83826;   /* 5.4:1 на белом — AA */
}
[data-theme="dark"][data-palette="cinematic"] {
  --bo-primary:     #E06A57;
  --bo-accent-hover:#F0A99B;
  --bo-accent-soft: rgba(232,141,125,.14);
  --bo-primary-fg:  #131C33;
  --bo-accent:      #E88D7D;
  --bo-accent-text: #E88D7D;
}

/* ── Teal ── */
[data-palette="teal"] {
  --bo-accent:      #14B8A6;
  --bo-accent-hover:#0F9488;
  --bo-accent-soft: #CCFBF1;
  --bo-accent-text: #0F766E;   /* 6.3:1 на белом — AA */
}
[data-theme="dark"][data-palette="teal"] {
  --bo-primary:     #14B8A6;
  --bo-accent-hover:#8CF2E4;
  --bo-accent-soft: rgba(94,234,212,.14);
  --bo-primary-fg:  #0B2C28;
  --bo-accent:      #5EEAD4;
  --bo-accent-text: #5EEAD4;
}

/* ── Indigo ── */
[data-palette="indigo"] {
  --bo-accent:      #6366F1;
  --bo-accent-hover:#4F46E5;
  --bo-accent-soft: #E0E7FF;
  --bo-accent-text: #4F46E5;   /* 6.3:1 на белом — AA */
}
[data-theme="dark"][data-palette="indigo"] {
  --bo-primary:     #818CF8;
  --bo-accent-hover:#C7D2FE;
  --bo-accent-soft: rgba(165,180,252,.14);
  --bo-primary-fg:  #131C33;
  --bo-accent:      #A5B4FC;
  --bo-accent-text: #A5B4FC;
}

@media(max-width:480px){:root{--bo-ls-caps:0.08em}}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}