/* ============================================================================
   be-Sirius — Foundational tokens
   Colors + Typography for the be-Sirius design system.

   Источник: design-проект beSirius_2.0,
   _ds/be-sirius-design-system-019dce66-7b9f-7dee-a462-fb76ecc1f9c5/colors_and_type.css

   Единственное отличие от оригинала: блок из 17 статических @font-face (TTF)
   заменён на два вариативных woff2-сабсета. Диапазон весов 100–1000 покрывает
   все начертания, которые использует система. Всё остальное — дословно.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Web fonts — single-family system
   DM Sans, вариативный, самохостинг. Ни одного внешнего запроса.
   latin      — U+0000-00FF, пунктуация, ↑ ↓ € ™
   latin-ext  — расширенная латиница
   ВНИМАНИЕ: символа → (U+2192) нет ни в одном сабсете. Стрелки в интерфейсе
   рисуются иконкой <bs-icon name="arrow-right">, а не текстовым символом.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/DMSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/DMSans-latin.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+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ============================================================== TEXT === */
  --bs-text-primary:       #181A2C;
  --bs-text-secondary:     #80819A;
  --bs-text-placeholder:   #9FA1B0;
  --bs-text-link:          #674CAF;
  --bs-text-select:        #674CAF;
  --bs-text-accent:        #674CAF;
  --bs-text-activity:      #0083FD;
  --bs-text-on-dark:       #FFFFFF;

  /* ======================================================= BACKGROUNDS === */
  --bs-bg-white:           #FFFFFF;
  --bs-bg-transparent:     #FFFFFF;
  --bs-bg-light-grey:      #F9F9FC;
  --bs-bg-accent:          #5F5DDF;
  --bs-bg-tab-active:      #674CAF;
  --bs-bg-tab-inactive:    #F3F4F6;
  --bs-bg-notification:    #FF5E67;
  --bs-bg-info-block:      #FEF1D7;
  --bs-bg-light-red:       #FFEDE8;

  /* ========================================================== BORDERS === */
  --bs-border-default:     #E3E5EA;
  --bs-border-select:      #674CAF;
  --bs-border-error:       #B72F4F;

  /* ========================================================== BUTTONS === */
  --bs-button-primary-bg:        #674CAF;
  --bs-button-primary-text:      #FFFFFF;
  --bs-button-primary-hover-bg:  #4B319D;
  --bs-button-disabled-bg:       rgba(103, 76, 175, 0.40);

  /* =========================================================== STATUS === */
  --bs-status-purple-text:        #674CAF;
  --bs-status-purple-bg:          #F3F3FA;
  --bs-status-green-text:         #0D907C;
  --bs-status-green-bg:           #D9FFF6;
  --bs-status-light-green-text:   #0D907C;
  --bs-status-light-green-bg:     #D9FFF6;
  --bs-status-red-text:           #B72F4F;
  --bs-status-red-bg:             #FFDAD1;
  --bs-status-yellow-text:        #8C5105;
  --bs-status-yellow-bg:          #FFEAA7;
  --bs-status-yellow-accent:      #F7C34B;
  --bs-status-blue-text:          #0D73D0;
  --bs-status-blue-bg:            #CFF5FE;

  /* ======================================================== ICON FILL === */
  --bs-icon-purple:        #674CAF;
  --bs-icon-black:         #181A2C;
  --bs-icon-blue:          #4C8CED;
  --bs-icon-green:         #1DC0A6;
  --bs-icon-red:           #B72F4F;

  /* ===================================================== PROGRESS BAR === */
  --bs-progress-active:    #674CAF;
  --bs-progress-complete:  #0D907C;
  --bs-progress-track:     #E3E5EA;

  /* ============================================================== MAP === */
  --bs-map-hq-production:           #967AE3;
  --bs-map-third-party-production:  #BEC2FF;
  --bs-map-select-country:          #4B319D;
  --bs-map-empty:                   #E3E5EA;
  --bs-map-active:                  #5F4DC9;

  /* ======================================================= GBA SCORES === */
  --bs-gba-aaa:    #00473C;
  --bs-gba-aa:     #0D907C;
  --bs-gba-a:      #04C3A6;
  --bs-gba-green:  #8DDDCB;

  /* ==================================================== GRADE PALETTE === */
  --bs-grade-bg-empty: #F3F4F6;
  --bs-grade-aaa:      #00473C;
  --bs-grade-aa:       #0D907C;
  --bs-grade-a:        #8DDDCB;
  --bs-grade-0:        #E3E5EA;

  /* ================================================ COMMODITY PALETTE === */
  --bs-commodity-nickel:  #8FC5E3;
  --bs-commodity-copper:  #FF9C9E;
  --bs-commodity-lithium: #A396E2;
  --bs-commodity-cobalt:  #92DEB7;
  --bs-commodity-cathode: #FFE591;

  /* ================================================= COVERAGE PALETTE === */
  --bs-coverage-auto: #0D907C;
  --bs-coverage-low:  #FF9C9E;
  --bs-coverage-ai:   #F3F4F6;

  /* ==================================================== COVERAGE CELL === */
  --bs-coverage-cell-high:   #92DEB7;
  --bs-coverage-cell-medium: #FFE591;
  --bs-coverage-cell-low:    #FF9C9E;

  /* ============================================================== ESG === */
  --bs-esg-governance:  #5F5DDF;
  --bs-esg-social:      #F0F5A5;
  --bs-esg-climate:     #C4C5FE;
  --bs-esg-environment: #A4673E;

  /* ===================================================================== */
  /* LEGACY ALIASES — не канон Figma, оставлены для совместимости.          */
  /* ===================================================================== */
  --bs-primary:            var(--bs-button-primary-bg);
  --bs-primary-hover:      var(--bs-button-primary-hover-bg);
  --bs-primary-strong:     #5F43A8;
  --bs-primary-light:      var(--bs-map-hq-production);
  --bs-primary-stroke:     #9747FF;
  --bs-primary-bg:         var(--bs-status-purple-bg);
  --bs-primary-bg-strong:  var(--bs-map-third-party-production);
  --bs-purple-text:        var(--bs-status-purple-text);

  --bs-bg:                 var(--bs-bg-white);
  --bs-bg-grey:            var(--bs-bg-light-grey);
  --bs-bg-tab:             var(--bs-bg-tab-inactive);
  --bs-bg-page:            #F9F9F9;
  --bs-bg-info:            var(--bs-bg-info-block);
  --bs-bg-third-party:     var(--bs-bg-light-grey);
  --bs-bg-country:         var(--bs-bg-tab-inactive);

  --bs-border:             var(--bs-border-default);
  --bs-border-strong:      #D9D9D9;
  --bs-border-dashed:      #9747FF;

  --bs-tag-red-bg:         var(--bs-status-red-bg);
  --bs-tag-red-text:       var(--bs-status-red-text);
  --bs-tag-yellow-bg:      var(--bs-status-yellow-bg);
  --bs-tag-yellow-text:    var(--bs-status-yellow-text);
  --bs-tag-green-bg:       var(--bs-status-green-bg);
  --bs-tag-green-text:     var(--bs-status-green-text);
  --bs-tag-purple-bg:      var(--bs-status-purple-bg);
  --bs-tag-purple-text:    var(--bs-status-purple-text);
  --bs-tag-accent-bg:      var(--bs-status-yellow-accent);

  --bs-text-yellow:        var(--bs-status-yellow-text);
  --bs-text-green:         var(--bs-status-green-text);
  --bs-text-red:           var(--bs-status-red-text);

  --bs-success:            var(--bs-gba-aa);
  --bs-success-strong:     var(--bs-gba-aaa);
  --bs-success-light:      var(--bs-gba-a);
  --bs-warning:            #F3A712;
  --bs-warning-light:      var(--bs-status-yellow-accent);
  --bs-danger:             var(--bs-bg-notification);
  --bs-danger-strong:      var(--bs-status-red-text);

  /* ---------------------------------------------------------------- MISC */
  --bs-shadow-pop:        0 8px 32px 0 rgba(24, 26, 44, 0.10);
  --bs-shadow-card:       0 1px 2px 0 rgba(24, 26, 44, 0.06);
  --bs-shadow-elev:       0 4px 16px 0 rgba(24, 26, 44, 0.08);
  --bs-shadow-modal:      0 24px 48px -12px rgba(24, 26, 44, 0.18);

  /* radii */
  --bs-radius-xs: 4px;
  --bs-radius-sm: 5px;
  --bs-radius:    8px;
  --bs-radius-lg: 12px;
  --bs-radius-pill: 999px;

  /* spacing — 4px base */
  --bs-space-1: 4px;
  --bs-space-2: 8px;
  --bs-space-3: 12px;
  --bs-space-4: 16px;
  --bs-space-5: 20px;
  --bs-space-6: 24px;
  --bs-space-8: 32px;
  --bs-space-10: 40px;
  --bs-space-12: 48px;
  --bs-space-16: 64px;
  --bs-space-20: 80px;

  /* ============================================================= TYPE === */
  --bs-font-sans:     "DM Sans", system-ui, sans-serif;
  --bs-font-body:     "DM Sans", system-ui, sans-serif;
  --bs-font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
   Semantic type roles — точные спеки из /04-Fonts/Text-styles
   --------------------------------------------------------------------------- */

/* Headings */
.bs-h1 { font-family: var(--bs-font-sans); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--bs-text-primary); }
.bs-h2 { font-family: var(--bs-font-sans); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--bs-text-primary); }
.bs-h3 { font-family: var(--bs-font-sans); font-weight: 400; font-size: 20px; line-height: 28px; color: var(--bs-text-primary); }
.bs-h4 { font-family: var(--bs-font-sans); font-weight: 600; font-size: 18px; line-height: 24px; color: var(--bs-text-primary); }

/* Body */
.bs-body-1 { font-family: var(--bs-font-body); font-weight: 400; font-size: 18px; line-height: 28px; color: var(--bs-text-primary); }
.bs-body-2 { font-family: var(--bs-font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--bs-text-primary); }
.bs-body-3 { font-family: var(--bs-font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--bs-text-primary); }

/* Text */
.bs-st-1   { font-family: var(--bs-font-sans); font-weight: 600; font-size: 14px; line-height: 18px; color: var(--bs-text-primary); }
.bs-text-1 { font-family: var(--bs-font-body); font-weight: 500; font-size: 14px; line-height: 18px; color: var(--bs-text-primary); }
.bs-text-2 { font-family: var(--bs-font-body); font-weight: 400; font-size: 14px; line-height: 18px; color: var(--bs-text-primary); }

/* Subtitles */
.bs-sub-1  { font-family: var(--bs-font-body); font-weight: 500; font-size: 12px; line-height: 16px; color: var(--bs-text-secondary); }
.bs-sub-2  { font-family: var(--bs-font-body); font-weight: 400; font-size: 12px; line-height: 16px; color: var(--bs-text-secondary); }
.bs-sub-3  { font-family: var(--bs-font-body); font-weight: 500; font-size: 10px; line-height: 16px; color: var(--bs-text-secondary); }
.bs-sub-4  { font-family: var(--bs-font-body); font-weight: 400; font-size: 10px; line-height: 16px; color: var(--bs-text-secondary); }

/* Links — always underlined */
.bs-link-1 { font-family: var(--bs-font-body); font-weight: 400; font-size: 18px; line-height: 28px; color: var(--bs-text-link); text-decoration: underline; }
.bs-link-2 { font-family: var(--bs-font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--bs-text-link); text-decoration: underline; }
.bs-link-3 { font-family: var(--bs-font-body); font-weight: 400; font-size: 14px; line-height: 18px; color: var(--bs-text-link); text-decoration: underline; }

/* Uppercase */
.bs-uppercase-1, .bs-u-1 { font-family: var(--bs-font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--bs-text-primary); text-transform: uppercase; letter-spacing: 0.05em; }
.bs-uppercase-2, .bs-u-2 { font-family: var(--bs-font-body); font-weight: 400; font-size: 14px; line-height: 18px; color: var(--bs-text-primary); text-transform: uppercase; letter-spacing: 0.05em; }

/* Native element defaults */
html { color: var(--bs-text-primary); background: var(--bs-bg); }
body { font-family: var(--bs-font-body); font-size: 14px; line-height: 18px; margin: 0; }
h1 { font-family: var(--bs-font-sans); font-weight: 600; font-size: 24px; line-height: 32px; margin: 0; }
h2 { font-family: var(--bs-font-sans); font-weight: 600; font-size: 20px; line-height: 28px; margin: 0; }
h3 { font-family: var(--bs-font-sans); font-weight: 400; font-size: 20px; line-height: 28px; margin: 0; }
h4 { font-family: var(--bs-font-sans); font-weight: 600; font-size: 18px; line-height: 24px; margin: 0; }
p  { font-family: var(--bs-font-body); font-weight: 400; font-size: 16px; line-height: 24px; margin: 0; }
small { font-family: var(--bs-font-body); font-size: 12px; line-height: 16px; color: var(--bs-text-secondary); }
code, pre { font-family: var(--bs-font-mono); }