/* ============================================================
   Helvia Console — Color tokens
   Lifted verbatim from src/styles/less/abstracts/variables.less
   Base palette + semantic aliases. All values are real product tokens.
   ============================================================ */
:root {
  /* ---- Brand ---- */
  --primary-color: #605DEC;            /* Helvia indigo — brand, links, accents, active states */
  --primary-color-1: #F0F0FE;          /* primary tint used for selected menu items (antd @primary-1) */
  --primary-color-alt: #505776;        /* slate — the color used for BUTTONS */
  --primary-color-alt-hover: #626988;  /* button hover */
  /* The indigo TINT that fills an icon / art tile inside a selected or active
     control (IconButton active, OptionCard selected). Same value as
     --bot-color-200 / --blue-200, so the tile sits on the brand ramp.
     One tint, one name: the old hand-written #EFEEFE was drift.
     NOT the same job as --primary-color-1 (#F0F0FE), which is the selected
     SURFACE of a row — nav item, menu item, pagination cell. */
  --primary-color-tint: #EFEFFF;
  /* Interaction rings. Hover = light indigo "this is pickable"; the committed
     ring (pressed / focus-visible / selected) is the brand indigo itself. */
  --ring-color-hover: #A4A2F4;
  --ring-color-selected: var(--primary-color);
  --secondary-color: #505776;

  /* ---- Semantic (basic + light = same hue at 10% alpha) ---- */
  --info-color: #1C60D4;
  --info-color-light: rgba(28, 96, 212, 0.1);
  --success-color: #2DB28A;
  --success-color-light: rgba(45, 178, 138, 0.1);
  --warning-color: #F3A702;
  --warning-color-light: rgba(243, 167, 2, 0.1);
  --error-color: #D23636;
  --error-color-light: rgba(210, 54, 54, 0.1);
  --error-color-antd: #FF4D4F;         /* antd's default red, used for required-field asterisks */

  /* ---- Neutrals / greys (HBF custom) ---- */
  --hbf-light-grey-color: #F5F5F5;
  --hbf-muted-color: #8E97BC;          /* secondary text, placeholders, muted icons */
  --hbf-highlight-color: #B9BFFF;
  --hbf-shadow-color: rgba(80, 87, 118, 0.2);

  /* ---- Text ---- */
  --text-color: #505776;               /* body text (= primary-color-alt) */
  --text-color-secondary: #8E97BC;     /* captions, secondary, placeholder */
  --heading-color: #505776;
  --disabled-color: rgba(80, 87, 118, 0.6);
  --link-color: #605DEC;
  --input-placeholder-color: #8E97BC;

  /* ---- Surfaces / backgrounds ---- */
  --surface-card: #FFFFFF;
  --layout-body-background: #F4F5F9;   /* app canvas behind cards */
  --background-color-light: #F7F8FB;

  /* FieldGroup surface ramp — the two depths of a tinted form subgroup.
     Same cool neutral base (hue 240, the slight blue offset of --gray-50) so the
     steps read as ONE material, not two different grays. Level 2 is a half-step
     between --gray-50 and --gray-100: deliberately NOT --gray-100 #F1F1F4 (the
     header/table band) and NOT --gray-200 #E9E9F0 (reads as a disabled surface).
     Nesting is capped at two levels — there is no surface-3. */
  --fieldgroup-surface-1: #F8F8FA;
  --fieldgroup-surface-2: #EFEFF3;
  --item-active-bg: rgba(96, 93, 236, 0.08);  /* selected list/menu row */
  --item-hover-bg: rgba(96, 93, 236, 0.04);   /* hovered list/menu row */

  /* ---- Borders ---- */
  --border-color-base: rgba(194, 194, 232, 0.5); /* #C2C2E8 @ 50% — default component border */
  --border-color-split: rgba(194, 194, 232, 0.5);

  /* ---- Tables ---- */
  --table-row-hover-bg: #F8F8FA;
  --table-selected-row-bg: #F1F1F4;
  --table-header-bg: #FFFFFF;

  /* ---- Skeleton ---- */
  --skeleton-color: rgba(203, 203, 225, 0.2);
  --skeleton-to-color: rgba(179, 179, 214, 0.2);
}

/* ============================================================
   Lab colors — the four product "labs" each own a hue.
   Used by the lab switcher, sidebars, and section accenting.
   ============================================================ */
:root {
  --org-color: var(--gray-700);          /* Organization / workspace admin (now Gray) */
  --bot-color: var(--blue-700);  /* Agent / Bot designer (now Blue) */
  --livechat-color: var(--orange-700);     /* Live Chat inbox (now Orange) */
  --observatory-color: var(--teal-700);  /* Observatory / monitoring (now Teal) */

  --org-color-hover: var(--gray-100);
  --bot-color-hover: var(--blue-200);
  --livechat-color-hover: var(--orange-200);
  --observatory-color-hover: var(--teal-200);

  /* Org sider gradient stops (Gray ramp) */
  --org-menu-color-1: var(--gray-800);
  --org-menu-color-2: var(--gray-900);
}

/* ============================================================
   Gray palette — the neutral workhorse ramp (25 → 900).
   Used across the product for primary & secondary buttons,
   text, borders, surfaces and the Organization lab.
   ============================================================ */
:root {
  --gray-25:  #FCFCFF;
  --gray-50:  #F8F8FA;
  --gray-100: #F1F1F4;
  --gray-200: #E9E9F0;
  --gray-300: #D6D7E4;
  --gray-400: #C4C6DA;
  --gray-500: #A5ABC7;
  --gray-600: #8A92B3;
  --gray-700: #62698C;
  --gray-800: #3C405B;
  --gray-900: #252731;
}

/* ============================================================
   Bot color palette — the canonical 25→900 ramp from the indigo.
   Pattern other lab hues follow; use for tints, fills, hovers.
   ============================================================ */
:root {
  --bot-color-25:  #FDFDFF;
  --bot-color-50:  #FAFAFF;
  --bot-color-100: #F8F8FF;
  --bot-color-200: #EFEFFF;
  --bot-color-300: #E0DFFF;
  --bot-color-400: #BCBBFF;
  --bot-color-500: #9E9CFF;
  --bot-color-600: #8D8BFF;
  --bot-color-700: #605DEC;  /* base */
  --bot-color-800: #3D3AC8;
  --bot-color-900: #1A17A6;
}

/* ============================================================
   Blue palette — the Agent lab ramp (25 → 900).
   Same naming logic as Gray. Replaces the former "Agent" indigo.
   ============================================================ */
:root {
  --blue-25:  #FDFDFF;
  --blue-50:  #FAFAFF;
  --blue-100: #F8F8FF;
  --blue-200: #EFEFFF;
  --blue-300: #E0DFFF;
  --blue-400: #BCBBFF;
  --blue-500: #9E9CFF;
  --blue-600: #8D8BFF;
  --blue-700: #5D5AE9;
  --blue-800: #3D3AC8;
  --blue-900: #1A17A6;
}

/* ============================================================
   Orange palette — the Live Chat lab ramp (25 → 900).
   Same naming logic as Gray / Blue. Replaces the former "LiveChat".
   ============================================================ */
:root {
  --orange-25:  #FFFBFA;
  --orange-50:  #FFF9F6;
  --orange-100: #FFF7F2;
  --orange-200: #FFECE2;
  --orange-300: #FFDAC7;
  --orange-400: #FFAF88;
  --orange-500: #FF8B51;
  --orange-600: #F1793C;
  --orange-700: #CF4906;
  --orange-800: #9A3400;
  --orange-900: #501B00;
}

/* ============================================================
   Teal palette — the Observatory lab ramp (25 → 900).
   Same naming logic as Gray / Blue / Orange. Replaces "Observatory".
   ============================================================ */
:root {
  --teal-25:  #F8FFFF;
  --teal-50:  #F0FFFF;
  --teal-100: #E7FEFD;
  --teal-200: #CCFAF9;
  --teal-300: #A0F2F0;
  --teal-400: #6AE5E2;
  --teal-500: #4ADEDA;
  --teal-600: #1DCEC9;
  --teal-700: #009994;
  --teal-800: #006460;
  --teal-900: #003937;
}

/* ============================================================
   Data-viz / chart palette — 17 categorical colors for bars,
   pies, lines and other analytics series. Cool→warm ordering.
   ============================================================ */
:root {
  --chart-1:  #478885;
  --chart-2:  #49ADC7;
  --chart-3:  #4BD996;
  --chart-4:  #4D92EE;
  --chart-5:  #4DD2EE;
  --chart-6:  #91B7B6;
  --chart-7:  #93E8C0;
  --chart-8:  #94E4F5;
  --chart-9:  #A55CC3;
  --chart-10: #A6C8F6;
  --chart-11: #CF426B;
  --chart-12: #EC529E;
  --chart-13: #EC8565;
  --chart-14: #ECC565;
  --chart-15: #F397C5;
  --chart-16: #F3B6A2;
  --chart-17: #F3DCA2;
}