/* ВНИМАНИЕ: копия из web/wiki/DesignSystem/colors_and_type.css.
   Не править здесь — менять в источнике и копировать заново.
   (DesignSystem/ закрыт от публичного доступа — см. frankenphp/Caddyfile.)
   =====================================================================
   Оргструктура 24 — Colors & Type
   Design system tokens for products running inside Bitrix24.
   =====================================================================

   Two products live on top of these tokens:
   • Оргструктура  — hierarchical org-chart builder
   • Статистики   — KPI / metrics dashboard

   Both embed inside a Bitrix24 portal, so the visual language is
   intentionally close to native Bitrix24: cyan-blue accent, white canvas,
   thin grey dividers, compact density, Open Sans type.

   -------------------------------------------------------------------- */

/* --- Font ---------------------------------------------------------- */
/* Open Sans хостится локально (fontsource → web/wiki/assets/fonts/).
   Google Fonts CDN не используем: возможны блокировки в РФ.
   unicode-range разделяет latin/cyrillic — браузер качает только нужный. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wiki/assets/fonts/open-sans-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wiki/assets/fonts/open-sans-latin-400.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: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/wiki/assets/fonts/open-sans-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/wiki/assets/fonts/open-sans-latin-600.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: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wiki/assets/fonts/open-sans-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wiki/assets/fonts/open-sans-latin-700.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;
}

:root {
  /* =================================================================
     COLOR — BRAND
     ================================================================= */
  /* Primary Bitrix-cyan. #2fc6f6 is the exact button/link hue in the
     screenshots; the darker #00aeef shows up on hover/press.           */
  --brand-500: #2fc6f6;   /* primary action, tab underline, links     */
  --brand-600: #00aeef;   /* hover / active / focus ring base          */
  --brand-700: #008fc6;   /* pressed                                   */
  --brand-100: #e8f5fb;   /* chip bg, row highlight, info strip        */
  --brand-50:  #f4fbff;   /* very soft tint, section banner            */

  /* =================================================================
     COLOR — NEUTRALS (ui chrome)
     ================================================================= */
  --fg-1: #20262e;        /* primary text (near black, slight cool)    */
  --fg-2: #4a5560;        /* secondary text, body copy                 */
  --fg-3: #7a8594;        /* tertiary / muted labels                   */
  --fg-4: #a7b0bb;        /* disabled, placeholder                     */
  --fg-uppercase: #8e97a3;/* UPPERCASE small column labels             */

  --bg-0: #ffffff;        /* card / content surface                    */
  --bg-1: #f7f8fa;        /* page bg, table header row                 */
  --bg-2: #edf0f2;        /* tab strip bg, chrome                      */
  --bg-3: #e3e7eb;        /* divider strong                            */

  --border-weak:   #eef1f4;
  --border:        #e1e5ea;
  --border-strong: #c9d1da;

  /* =================================================================
     COLOR — SEMANTIC
     ================================================================= */
  --success-500: #2eb67d;       /* positive trend, "Done"              */
  --success-100: #e4f5ec;
  --warning-500: #f5a623;       /* attention, partially-met            */
  --warning-100: #fdf0da;
  --danger-500:  #e74d4d;       /* missed KPI, destructive             */
  --danger-100:  #fde4e0;       /* pink "future period" column bg      */
  --info-500:    #2fc6f6;       /* = brand-500                         */
  --info-100:    #e8f5fb;

  /* =================================================================
     COLOR — ORG-CHART DEPARTMENT PALETTE
     A closed set of 7 "department colours" used for dept-colour-coded
     cards, badges and legends. Each has a DARK header (for the card
     title strip) and a LIGHT body (for the content area).
     Observed directly in the org-chart screenshots.
     ================================================================= */
  --dept-green-head:  #5fb15b;  --dept-green-body:  #c8e7c6;
  --dept-yellow-head: #1a1a1a;  --dept-yellow-body: #fbe88a;
  --dept-orange-head: #2b1910;  --dept-orange-body: #f5c88a;
  --dept-coral-head:  #2b1410;  --dept-coral-body:  #ec9988;
  --dept-blue-head:   #111827;  --dept-blue-body:   #a8d8ee;
  --dept-purple-head: #2a1836;  --dept-purple-body: #c9b6e6;
  --dept-teal-head:   #0f2a2a;  --dept-teal-body:   #a9dcd4;

  /* =================================================================
     COLOR — CHART PALETTE (Статистики)
     Soft, pastel — taken from the observed Dashboard screens.
     ================================================================= */
  --chart-blue:   #7aa7f0;
  --chart-purple: #a89cf0;
  --chart-green:  #6fb896;
  --chart-red:    #e07b6b;
  --chart-olive:  #9ca76a;
  --chart-teal:   #6fb8b8;
  --chart-orange: #f0a973;

  /* Future / "not filled yet" period in a chart: pink wash.            */
  --chart-future-bg: #fde4e0;

  /* =================================================================
     TYPE — SCALE
     Matches observed sizing: dense Bitrix24-style UI.
     ================================================================= */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:  11px;    /* UPPERCASE table column labels                  */
  --fs-sm:  12px;    /* meta, breadcrumb                               */
  --fs-base:13px;    /* body, row text, form                           */
  --fs-md:  14px;    /* primary button label, list item                */
  --fs-lg:  16px;    /* section title                                  */
  --fs-xl:  20px;    /* page title ("Структура компании")              */
  --fs-2xl: 24px;    /* rare, empty-state heading                      */

  --lh-tight: 1.25;
  --lh-normal: 1.45;
  --lh-loose: 1.6;

  --tracking-caps: 0.06em;   /* UPPERCASE labels + primary buttons      */

  /* =================================================================
     SEMANTIC TEXT ROLES
     Use these instead of raw sizes whenever possible.
     ================================================================= */
  --text-page-title: 400 var(--fs-xl)/1.3 var(--font-sans);     /* "Структура компании" */
  --text-section:    600 var(--fs-lg)/1.3 var(--font-sans);
  --text-body:       400 var(--fs-base)/var(--lh-normal) var(--font-sans);
  --text-body-bold:  600 var(--fs-base)/var(--lh-normal) var(--font-sans);
  --text-meta:       400 var(--fs-sm)/var(--lh-normal) var(--font-sans);
  --text-caps:       700 var(--fs-xs)/1.1 var(--font-sans);     /* uppercase labels */
  --text-button:     700 var(--fs-xs)/1.1 var(--font-sans);     /* uppercase button */

  /* =================================================================
     SPACING — 4-pt base scale (Bitrix24-like)
     ================================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  /* =================================================================
     RADII — small, restrained
     ================================================================= */
  --radius-xs: 2px;
  --radius-sm: 3px;   /* buttons, inputs, chips                        */
  --radius:    4px;   /* cards, panels                                 */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* =================================================================
     ELEVATION — very subtle. Bitrix24 mostly uses borders, not shadows.
     ================================================================= */
  --shadow-1: 0 1px 2px rgba(20,30,45,0.04), 0 0 0 1px rgba(20,30,45,0.04);
  --shadow-2: 0 2px 8px rgba(20,30,45,0.06), 0 0 0 1px rgba(20,30,45,0.04);
  --shadow-3: 0 8px 24px rgba(20,30,45,0.10);
  --shadow-focus: 0 0 0 3px rgba(47,198,246,0.28);

  /* =================================================================
     Z-LAYERS
     ================================================================= */
  --z-nav: 10;
  --z-dropdown: 40;
  --z-modal: 80;
  --z-toast: 100;
}

/* ---------------------------------------------------------------------
   BASE RESETS — keep light. Only what's needed for consistent rendering.
   --------------------------------------------------------------------- */
html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic element defaults --------------------------------------- */
h1 { font: var(--text-page-title); margin: 0 0 var(--space-4); color: var(--fg-1); font-weight: 400; }
h2 { font: var(--text-section); margin: 0 0 var(--space-3); color: var(--fg-1); }
h3 { font: 600 var(--fs-md)/1.3 var(--font-sans); margin: 0 0 var(--space-2); color: var(--fg-1); }

p  { font: var(--text-body); margin: 0 0 var(--space-3); color: var(--fg-2); }

small { font: var(--text-meta); color: var(--fg-3); }

a {
  color: var(--brand-600);
  text-decoration: none;
}
a:hover { color: var(--brand-700); text-decoration: underline; }

button { font-family: inherit; }

/* UPPERCASE micro-label — used constantly in tables & dept cards ---- */
.u-caps {
  font: var(--text-caps);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-uppercase);
}