/*
 * @gpb/ui-kit-styles @ 4.16.3 — design tokens extracted for a plain-CSS app.
 *
 * The published kit is a React/styled-components package: colors, shadows and
 * typography are exposed as JS/TS objects (theme functions), not as CSS. The
 * values below are the *resolved* Regular / Light color-scheme tokens taken
 * straight from the kit sources:
 *   - colors  -> lib/esm/colors/staticColors/light.js + stateColors/defaultState.js
 *   - shadows -> lib/esm/shadows/defaultTheme/light.js
 *   - type    -> lib/esm/typography/typography.js
 *   - fonts   -> fonts/global.css (font-family stack)
 *
 * They are published here as CSS custom properties so a non-React page can
 * consume the real brand tokens. Namespaced with --gpb-* to stay close to the
 * kit; block-kit.css maps the project's --bk-* aliases onto these.
 */
:root {
  /* --- Font family (fonts/global.css) --- */
  --gpb-font-family: 'Gazprombank-Sans', 'Roboto', sans-serif;

  /* --- Grey ramp (staticColors/light.js -> grey) --- */
  --gpb-grey-0: #FFFFFF;
  --gpb-grey-100: #F5F5F5;
  --gpb-grey-200: #EAEAEA;
  --gpb-grey-300: #DFDFDF;
  --gpb-grey-350: #DFDFDF;
  --gpb-grey-400: #B7B7B7;
  --gpb-grey-500: #A5A5A5;
  --gpb-grey-700: #6F6F6F;
  --gpb-grey-1000: #0A0A0B;

  /* --- Brand blue (staticColors/light.js -> blue) --- */
  --gpb-blue-100: #2B5EE3;
  --gpb-accent: #2B61EC;        /* background.accent = blue.400 */
  --gpb-accent-hover: #194FDA;  /* background.accent hover = blue.500 */
  --gpb-accent-text: #2F67F9;   /* text.accent = blue.800 */

  /* --- Status colors (defaultState.js) --- */
  --gpb-red-100: #DB2C24;       /* text/icons error, errorBold */
  --gpb-red-200: #FCEAE8;       /* soft error surface */
  --gpb-red-400: #FFDCD6;       /* background error */
  --gpb-orange-100: #E88600;    /* text/icons warning, warningBold */
  --gpb-orange-200: #FFF6E8;    /* soft warning surface */
  --gpb-orange-400: #FCE6C5;    /* background warning */
  --gpb-green-100: #008148;     /* text/icons success, successBold */
  --gpb-green-200: #E6F7ED;     /* soft success surface */
  --gpb-green-400: #D1EFDA;     /* background success */
  --gpb-blue-ultralight: #E5EFFF; /* special.blue.400 (info surface) */

  /* --- Semantic roles (stateColors/defaultState.js, Regular/Light) --- */
  --gpb-text-primary: var(--gpb-grey-1000);
  --gpb-text-secondary: var(--gpb-grey-700);
  --gpb-text-tertiary: var(--gpb-grey-400);
  --gpb-bg-desktop: var(--gpb-grey-100);      /* background.primaryTopGrey = grey.150 */
  --gpb-bg-surface: var(--gpb-grey-0);        /* white surface */
  --gpb-bg-surface-muted: var(--gpb-grey-200);/* subtle chip/segment surface */
  --gpb-border-primary: var(--gpb-grey-350);
  --gpb-border-accent: var(--gpb-accent);

  /* --- Elevation / shadows (shadows/defaultTheme/light.js) --- */
  --gpb-elevation-s: 0px 2px 8px rgba(10, 10, 11, 0.08);
  --gpb-elevation-m: 0px 8px 12px rgba(10, 10, 11, 0.04);
  --gpb-elevation-l: 0px 24px 32px rgba(10, 10, 11, 0.08);
  --gpb-element-shadow: 0px 6px 16px rgba(52, 61, 87, 0.1);
  --gpb-hover-shadow: 0px 5px 10px -3px rgba(52, 61, 87, 0.16);

  /* --- Typography scale (typography/typography.js) --- */
  --gpb-type-numbers-xl: 700 44px/48px var(--gpb-font-family);   /* H1 */
  --gpb-type-header-screen: 700 24px/28px var(--gpb-font-family);/* H5 Bold */
  --gpb-type-header-section: 600 20px/24px var(--gpb-font-family);/* H6 Demibold */
  --gpb-type-header-card: 600 16px/20px var(--gpb-font-family);  /* P1 Demibold */
  --gpb-type-text: 400 16px/20px var(--gpb-font-family);         /* P1 Regular */
  --gpb-type-label: 400 14px/16px var(--gpb-font-family);        /* P2 Regular */
  --gpb-type-caption: 400 12px/16px var(--gpb-font-family);      /* P3 Regular */
}