/**
 * ECS Design Tokens - GENERATED FILE, DO NOT EDIT.
 * Edit the JSON files in design-tokens/src and run `npm run build` in design-tokens/.
 *
 * tokens.css is the aggregate of the category files in this folder:
 *   - palette.css
 *   - data-palette.css
 *   - semantic-colors.css
 *   - typography.css
 *   - spacing.css
 *   - elevation.css
 *   - z-index.css
 *   - dimensions.css
 */

/* ========== palette ========== */
:root {
  --blue-100: #F0F5FA;
  --blue-200: #CADDEE;
  --blue-300: #A3C5E2;
  --blue-400: #82B0D9;
  --blue-500: #3B85C7; /* Primary color */
  --blue-600: #1F68A8;
  --blue-700: #215887;
  --blue-800: #1E4060;
  --blue-900: #182B3B;
  --white: #FFFFFF;
  --gray-100: #F6F6F6;
  --gray-200: #E8E8E8;
  --gray-300: #DDDDDD;
  --gray-400: #BBBBBB;
  --gray-500: #767676;
  --gray-600: #606060;
  --gray-700: #4B4B4B;
  --gray-800: #333333;
  --gray-900: #1A1A1A; /* Default text color */
  --black: #000000;
  --green-100: #EDF6EA;
  --green-200: #C0E0B5;
  --green-300: #92CA81;
  --green-400: #6BB859;
  --green-500: #1F8915; /* Success color */
  --green-600: #227817;
  --green-700: #206117;
  --green-800: #1C4614;
  --green-900: #162D11;
  --yellow-100: #FFF2DE;
  --yellow-200: #FDD189;
  --yellow-300: #EEB12B; /* Warning color */
  --yellow-400: #D49C21;
  --yellow-500: #96701D;
  --yellow-600: #82601C;
  --yellow-700: #634A18;
  --yellow-800: #4E3A16;
  --yellow-900: #322611;
  --red-100: #FEF1ED;
  --red-200: #FACDC2;
  --red-300: #F2AA98;
  --red-400: #E98E78;
  --red-500: #CD482D;
  --red-600: #BD341F; /* Error color */
  --red-700: #9C2D1B;
  --red-800: #6F2416;
  --red-900: #461B11;
  --indigo-100: #F5F2FC;
  --indigo-200: #DBD3F3;
  --indigo-300: #C0B4EB;
  --indigo-400: #A796E4;
  --indigo-500: #7466D1;
  --indigo-600: #5A52CB;
  --indigo-700: #3F42C5; /* Information color */
  --indigo-800: #2C2F94;
  --indigo-900: #232059;
  --gradient-blue-100: linear-gradient(180deg, #F0F4FA 0%, #A3BDE2 100%);
  --gradient-blue-200: linear-gradient(180deg, #CAD8EE 0%, #82A9D9 100%);
  --gradient-blue-300: linear-gradient(180deg, #A3BDE2 0%, #3B85C7 100%);
  --gradient-blue-400: linear-gradient(180deg, #3B85C7 0%, #215887 100%);
  --gradient-blue-500: linear-gradient(180deg, #1F6CA8 0%, #1E4060 100%);
  --gradient-blue-600: linear-gradient(180deg, #215887 0%, #18293B 100%);
  --gradient-red-100: linear-gradient(180deg, #D55B42 0%, #9C2D1B 100%);
  --gradient-red-200: linear-gradient(180deg, #C4341F 0%, #6F2416 100%);
  --gradient-red-300: linear-gradient(180deg, #9C2D1B 0%, #461B11 100%);
}

/* ========== data-palette ========== */
:root {
  --data-red-100: #FFF1ED;
  --data-red-200: #FFCBC0; /* Highlight color */
  --data-red-300: #FFA492;
  --data-red-400: #FD6E5A;
  --data-red-500: #E6190F; /* Highlight color */
  --data-red-600: #CD1A1D;
  --data-red-700: #A61D19;
  --data-red-800: #761C15;
  --data-red-900: #4A1710;
  --data-orange-100: #FFF1E8;
  --data-orange-200: #FFCDAE; /* Highlight color */
  --data-orange-300: #FFA671;
  --data-orange-400: #F77623; /* Highlight color */
  --data-orange-500: #C15406;
  --data-orange-600: #AA4C0E;
  --data-orange-700: #8A3F0F;
  --data-orange-800: #632F10;
  --data-orange-900: #3F200D;
  --data-yellow-100: #FFF4CB; /* Highlight color */
  --data-yellow-200: #FAD50F; /* Highlight color */
  --data-yellow-300: #DABA16;
  --data-yellow-400: #B49A19;
  --data-yellow-500: #877317;
  --data-yellow-600: #796719;
  --data-yellow-700: #635418;
  --data-yellow-800: #483D15;
  --data-yellow-900: #2E2711;
  --data-lime-100: #EBFAC9; /* Highlight color */
  --data-lime-200: #AAEB36; /* Highlight color */
  --data-lime-300: #95CC32;
  --data-lime-400: #7CA92D;
  --data-lime-500: #5E7E25;
  --data-lime-600: #506D22;
  --data-lime-700: #465C1F;
  --data-lime-800: #34421A;
  --data-lime-900: #232B14;
  --data-green-100: #DCFDD6; /* Highlight color */
  --data-green-200: #70F26F; /* Highlight color */
  --data-green-300: #1CD83B;
  --data-green-400: #23B334;
  --data-green-500: #22872A;
  --data-green-600: #237828;
  --data-green-700: #216123;
  --data-green-800: #1D461C;
  --data-green-900: #162D15;
  --data-aqua-100: #D6FBF7; /* Highlight color */
  --data-aqua-200: #47EEE3; /* Highlight color */
  --data-aqua-300: #1ED1C7;
  --data-aqua-400: #24ADA5;
  --data-aqua-500: #21837E;
  --data-aqua-600: #23706B;
  --data-aqua-700: #215E59;
  --data-aqua-800: #1D4441;
  --data-aqua-900: #162B2A;
  --data-blue-100: #EFF9FE;
  --data-blue-200: #C8E8FA; /* Highlight color */
  --data-blue-300: #9DD3F5;
  --data-blue-400: #5EB6F0;
  --data-blue-500: #1579C1; /* Highlight color */
  --data-blue-600: #1E679F;
  --data-blue-700: #1E5480;
  --data-blue-800: #1F4261;
  --data-blue-900: #192D3F;
  --data-indigo-100: #F6F1FF;
  --data-indigo-200: #E0D0FD; /* Highlight color */
  --data-indigo-300: #C8AFFB;
  --data-indigo-400: #A888F8;
  --data-indigo-500: #7E57F4;
  --data-indigo-600: #6648F1; /* Highlight color */
  --data-indigo-700: #3C2DEE;
  --data-indigo-800: #231DBA;
  --data-indigo-900: #23176E;
  --data-violet-100: #F8F1FE;
  --data-violet-200: #E7CEFD; /* Highlight color */
  --data-violet-300: #D4ABFA;
  --data-violet-400: #BA81F6;
  --data-violet-500: #984AF2; /* Highlight color */
  --data-violet-600: #8531ED;
  --data-violet-700: #6E16DB;
  --data-violet-800: #511999;
  --data-violet-900: #35165C;
  --data-fuchsia-100: #FFEFFA;
  --data-fuchsia-200: #FFC7EC; /* Highlight color */
  --data-fuchsia-300: #FC9CDF;
  --data-fuchsia-400: #F563CE;
  --data-fuchsia-500: #D813B0; /* Highlight color */
  --data-fuchsia-600: #B81E97;
  --data-fuchsia-700: #971F7C;
  --data-fuchsia-800: #6B1D58;
  --data-fuchsia-900: #431837;
}

/* ========== semantic-colors ========== */
:root {
  --surface: #FFFFFF; /* Default page/card surface */
  --surface-muted: #F6F6F6; /* App background, quiet panels */
  --surface-selected: #F0F5FA; /* Selected rows, active list items, secondary toolbars */
  --surface-inverse: #182B3B; /* Dark chrome: masthead, dark toolbars */
  --text: #1A1A1A; /* Default body text */
  --text-muted: #767676; /* Secondary/help text */
  --text-disabled: #BBBBBB;
  --text-placeholder: rgba(0, 0, 0, 0.5); /* Input placeholder text */
  --text-inverse: #FFFFFF; /* Text on dark/inverse surfaces */
  --border: #DDDDDD; /* Default 1px border */
  --border-subtle: #E8E8E8; /* Hairlines, dividers inside components */
  --border-strong: #BBBBBB; /* Emphasized borders, input borders on hover */
  --link: #1F68A8;
  --link-hover: #000000;
  --primary: #3B85C7; /* Primary brand/action color */
  --primary-hover: #1F68A8;
  --primary-active: #215887;
  --success: #1F8915;
  --success-surface: #EDF6EA;
  --success-border: #C0E0B5;
  --warning: #EEB12B;
  --warning-surface: #FFF2DE;
  --warning-border: #FDD189;
  --error: #BD341F;
  --error-surface: #FEF1ED;
  --error-border: #FACDC2;
  --info: #3F42C5;
  --info-surface: #F5F2FC;
  --info-border: #DBD3F3;
  --risk-low: #1F8915;
  --risk-low-hover: #227817;
  --risk-high-low: #206117;
  --risk-high-low-hover: #1C4614;
  --risk-low-medium: #EEB12B;
  --risk-low-medium-hover: #D49C21;
  --risk-high-medium: #D49C21;
  --risk-high-medium-hover: #96701D;
  --risk-high: #BD341F;
  --risk-high-hover: #9C2D1B;
  --risk-extreme-high: #6F2416;
  --risk-extreme-high-hover: #461B11;
  --focus-outline: #1F68A8; /* Focus outline color */
  --active-rail: #F77623; /* Active item indicator rail ($active-item-border-color) */
  --button-primary-bg: linear-gradient(180deg, #3B85C7 0%, #215887 100%); /* $primary-button-background */
  --button-primary-bg-hover: linear-gradient(180deg, #1F6CA8 0%, #1E4060 100%);
  --button-primary-bg-active: linear-gradient(180deg, #215887 0%, #18293B 100%);
  --button-primary-bg-focus: linear-gradient(180deg, #1F6CA8 0%, #1E4060 100%);
  --button-secondary-bg: #FFFFFF;
  --button-secondary-bg-hover: #F0F5FA;
  --button-secondary-bg-active: #CADDEE;
  --button-secondary-bg-focus: #F0F5FA;
  --button-secondary-text: #1F68A8;
  --button-secondary-text-hover: #215887;
  --button-secondary-text-active: #1E4060;
  --button-secondary-text-focus: #215887;
  --toolbar-bg: linear-gradient(180deg, #215887 0%, #18293B 100%); /* $toolbar-background-G */
  --toolbar-bg-secondary: #F0F5FA; /* $secondary-toolbar-F */
  --scrollbar-thumb: #BBBBBB;
  --scrollbar-thumb-hover: #767676;
  --scrollbar-track: transparent;
  --backdrop: rgba(0, 0, 0, 0.4); /* Popup/modal backdrop ($popup-background) */
}

/* ========== typography ========== */
:root {
  --font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-icons: 'Font Awesome 7 Pro', serif;
  --font-family-icons-brands: 'Font Awesome 6 Brands';
  --font-family-icons-duotone: 'Font Awesome 6 Duotone';
  --font-family-icons-sharp: 'Font Awesome 6 Sharp';
  --font-size-root: 16px; /* $default-font-size - html root, rem base */
  --font-size-body: 12px; /* Default body/label text */
  --font-size-sm: 0.75rem; /* Small text: inputs, section headers */
  --font-size-th: 0.70rem; /* Table header cells */
  --font-size-td: 0.75rem; /* Table body cells */
  --font-size-minor-header: 0.85rem;
  --font-size-inline-error: 11px; /* Inline validation errors everywhere. NOT for .alert banners (success/error/warning) - those use body size. */
  --font-size-h1: 1.9rem;
  --font-size-h2: 1.1875rem;
  --font-size-h3: 1rem;
  --font-size-h4: 0.875rem;
  --font-size-h5: 0.75rem;
  --font-size-h6: 0.625rem;
  --font-weight-light: 300;
  --font-weight-regular: 400; /* Default weight for body text and headings */
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-none: 1; /* Labels, single-line UI text */
  --line-height-tight: 1.3; /* Alerts, dense text blocks */
  --line-height-body: 1.5;
  --line-height-heading: 1.25rem; /* h3 */
  --line-height-heading-sm: 1.125rem; /* h4-h6, inputs */
  --disabled-opacity: 0.4;
}

/* ========== spacing ========== */
:root {
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
}

/* ========== elevation ========== */
:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); /* $normal-shadow - every card & tile */
  --shadow-top: 0 -1px 2px rgba(0, 0, 0, 0.2); /* $top-normal-shadow - bottom-anchored bars */
  --shadow-lg: 0 3px 15px 0 rgba(0, 0, 0, 0.4); /* $large-shadow - popovers, toasts, dropdowns */
  --shadow-dropdown: 0 7px 12px 1px rgba(0, 0, 0, 0.4); /* $dropdown-shadow - dx-select-box only */
  --shadow-modal: 0 20px 40px 0 rgba(0, 0, 0, 0.4); /* modal-popup mixin */
  --shadow-header: 0px 2px 2px rgba(0, 0, 0, 0.16), 0px 4px 4px rgba(0, 0, 0, 0.08), 0px 8px 8px rgba(0, 0, 0, 0.08); /* $header-shadow - sticky headers */
}

/* ========== z-index ========== */
:root {
  --z-base: 1;
  --z-dropdown: 3000;
  --z-sticky: 5000;
  --z-overlay: 9000;
  --z-modal: 10000;
  --z-popover: 10500; /* Popovers/tooltips that must sit above modals */
  --z-toast: 11000;
  --z-critical: 100000; /* Must-win layer (blocking loaders, drag ghosts) */
}

/* ========== dimensions ========== */
:root {
  --header-height: 50px; /* Masthead. Component dimensions seeded from utils/variables.scss. */
  --nav-items-height: 38px;
  --sub-nav-height: 40px; /* $horizontalAppSubNavHeight */
  --tabs-height: 43px;
  --sidebar-width: 220px;
  --row-height: 22px; /* Table/list body rows */
  --row-height-header: 32px; /* Table header rows */
  --list-height: 22px;
  --toolbar-height: 32px;
  --toolbar-label-height: 20px;
  --minimal-toolbar-height: 48px;
  --field-height: 32px; /* Form controls */
  --input-height: 28px; /* Native inputs */
  --button-height-sm: 24px; /* Default button */
  --button-height-md: 32px;
  --button-height-lg: 40px;
  --radius: 4px; /* Universal border radius */
  --radius-pill: 10px; /* Badges only */
  --active-rail-width: 2px; /* $active-item-border-width */
  --scrollbar-size: 10px;
  --scrollbar-thumb-border: 3px;
  --transition: all 300ms ease; /* $default-transition */
  --transition-duration: 300ms;
  --breakpoint-phone-max: 767px;
  --breakpoint-tablet-max: 900px;
  --breakpoint-desktop-min: 901px;
}