/* CCM Design System Variables — compiled from insurancecrm-ui/src/scss/ccm/ccm-new/_variables.scss */
/* Provides all CSS custom properties used by ccm-ui-components.css and ccm-data-table.css */

:root {
  /* Font Family */
  --font: 'Montserrat', sans-serif;
  --font-heading: 'Visby CF', sans-serif;
  --font-fa: 'Font Awesome 6 Pro';
  --font-fak: 'Font Awesome Kit';
  --font-size: 16px;
  --mob-font-size: 12px;

  /* Font Weight */
  --fw-el: 300;
  --fw-lg: 400;
  --fw-nm: 500;
  --fw-sb: 600;
  --fw-bd: 700;
  --fw-ebd: 900;
  --fw-xb: 900;

  /* Font Weight For Heading */
  --fw-heading-lg: 400;
  --fw-heading-nm: 500;
  --fw-heading-sb: 600;
  --fw-heading-bd: 700;
  --fw-heading-xb: 900;

  /* Font Sizes (rem at 16px base) */
  --fs-11: 0.6875rem;
  --fs-72: 4.5rem;
  --fs-64: 4rem;
  --fs-56: 3.5rem;
  --fs-48: 3rem;
  --fs-40: 2.5rem;
  --fs-36: 2.25rem;
  --fs-32: 2rem;
  --fs-28: 1.75rem;
  --fs-24: 1.5rem;
  --fs-22: 1.375rem;
  --fs-20: 1.25rem;
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-15: 0.9375rem;
  --fs-14: 0.875rem;
  --fs-13: 0.8125rem;
  --fs-12: 0.75rem;
  --fs-10: 0.625rem;
  --fs-08: 0.5rem;

  /* Base Colors */
  --white: #fff;
  --black: #000;
  --new-black: #231f20;

  /* Neutrals */
  --neutral-700: #222;
  --neutral-600: #505050;
  --neutral-500: #666;
  --neutral-450: #979797;
  --neutral-400: #a3a3a3;
  --neutral-300: #ccc;
  --neutral-250: #f0f0f0;
  --neutral-200: #f6f6f6;
  --neutral-150: #fafafa;

  /* Primary — Ocean Blue */
  --ocean-blue: #165c7d;
  --ocean-blue-900: #0b2e3e;
  --ocean-blue-800: #124a64;
  --ocean-blue-250: #c5d6de;
  --ocean-blue-200: #dce7ec;
  --ocean-blue-100: #e8eff2;
  --ocean-blue-50: #f3f7f8;

  /* Tangerine */
  --tan: #bc5b22;
  --tan-900: #5e2d11;
  --tan-800: #96491b;
  --tan-250: #eed6c8;
  --tan-200: #f5e6de;
  --tan-100: #f8efe9;
  --tan-50: #fcf7f4;

  /* Sunshine */
  --sunshine: #c08c02;
  --sunshine-900: #604601;
  --sunshine-800: #9a7002;
  --sunshine-250: #efe2c0;
  --sunshine-200: #f6eed9;
  --sunshine-100: #f9f3e6;
  --sunshine-50: #fcf9f2;

  /* Forest Green */
  --forest: #5e6738;
  --forest-900: #2f331c;
  --forest-800: #4b522d;
  --forest-250: #d7d9cd;
  --forest-200: #e7e8e1;
  --forest-100: #eff0eb;
  --forest-50: #f7f7f5;

  /* Teal */
  --teal: #488178;
  --teal-900: #24403c;
  --teal-800: #3a6760;
  --teal-250: #d1dfdd;
  --teal-200: #e4eceb;
  --teal-100: #edf2f1;
  --teal-50: #f6f9f8;

  /* Plum */
  --plum: #890a4d;
  --plum-900: #440526;
  --plum-800: #6e083e;
  --plum-250: #e1c2d2;
  --plum-200: #eddae4;
  --plum-100: #f3e6ed;
  --plum-50: #f9f3f6;

  /* Sky Blue */
  --sky-blue: #4b7b8b;
  --sky-blue-900: #1e3138;
  --sky-blue-800: #3c626f;
  --sky-blue-250: #d2dee2;
  --sky-blue-200: #e4eef1;
  --sky-blue-100: #edf2f3;
  --sky-blue-50: #f6f8f9;

  /* Ultra Marine — Select */
  --ultra-marine: #017698;
  --ultra-marine-800: #015e7a;
  --ultra-marine-250: #bfdde5;
  --ultra-marine-200: #cce4ea;
  --ultra-marine-100: #e6f1f5;
  --ultra-marine-50: #f2f8fa;

  /* Shamrock — Success */
  --shamrock: #229759;
  --shamrock-800: #1b7947;
  --shamrock-250: #c8e5d5;
  --shamrock-200: #d3eade;
  --shamrock-100: #e9f5ee;
  --shamrock-50: #f4faf7;

  /* Scarlet — Error/Danger */
  --scarlet: #be1e2d;
  --scarlet-800: #981824;
  --scarlet-500: #9b3f48;
  --scarlet-250: #efc7ca;
  --scarlet-200: #f2d2d5;
  --scarlet-100: #f8e8ea;
  --scarlet-50: #fcf4f4;

  /* Theme Aliases */
  --primary: var(--ocean-blue);
  --primary-900: var(--ocean-blue-900);
  --primary-800: var(--ocean-blue-800);
  --primary-250: var(--ocean-blue-250);
  --primary-200: var(--ocean-blue-200);
  --primary-100: var(--ocean-blue-100);
  --primary-50: var(--ocean-blue-50);

  --select: var(--ultra-marine);
  --select-800: var(--ultra-marine-800);
  --select-250: var(--ultra-marine-250);
  --select-200: var(--ultra-marine-200);
  --select-100: var(--ultra-marine-100);
  --select-50: var(--ultra-marine-50);

  --success: var(--shamrock);
  --success-800: var(--shamrock-800);
  --success-250: var(--shamrock-250);
  --success-200: var(--shamrock-200);
  --success-100: var(--shamrock-100);
  --success-50: var(--shamrock-50);

  --danger: var(--scarlet);
  --danger-800: var(--scarlet-800);
  --danger-500: var(--scarlet-500);
  --danger-250: var(--scarlet-250);
  --danger-200: var(--scarlet-200);
  --danger-100: var(--scarlet-100);
  --danger-50: var(--scarlet-50);

  /* Background Colors */
  --bg-body: var(--neutral-150);
  --bg-white: var(--white);
  --bg-light-gray: var(--neutral-200);
  --bg-success: var(--success-100);
  --bg-error: var(--danger-50);
  --bg-select: var(--select-50);
  --bg-hover: var(--primary-50);
  --bg-teal-100: var(--teal-100);
  --bg-sunshine-100: var(--sunshine-100);
  --bg-tan-50: var(--tan-50);

  /* Text Colors */
  --placeholder: var(--neutral-400);
  --text-default: var(--black);
  --text-color: var(--black);
  --text-input: var(--black);
  --text-danger: var(--danger);
  --text-hint: var(--neutral-600);
  --text-select: var(--select);

  /* Disabled */
  --disabled-text: var(--neutral-400);
  --disabled-bg: var(--neutral-300);
  --disabled-bdr: var(--neutral-200);

  /* Borders */
  --bdr-primary: var(--neutral-300);
  --bdr-secondary: var(--neutral-250);
  --bdr-select: var(--select);
  --bdr-divider: var(--neutral-200);

  /* Hover */
  --hvr-primary: var(--primary-800);
  --hvr-success: var(--success-800);
  --hvr-danger: var(--danger-800);
  --hvr-select: var(--select-800);
  --hvr-tan: var(--tan-800);
  --hvr-sunshine: var(--sunshine-800);
  --hvr-forest: var(--forest-800);
  --hvr-teal: var(--teal-800);
  --hvr-plum: var(--plum-800);

  /* Button Variables */
  --text-btn: var(--white);
  --text-btn-outline: var(--black);
  --primary-btn-bg: var(--primary);
  --primary-btn-bg-hvr: var(--hvr-primary);
  --primary-btn-bg-focus: var(--select);
  --outline-btn-bg-hvr: var(--bg-hover);
  --outline-btn-bdr: var(--bdr-primary);
  --outline-btn-bdr-hvr: var(--hvr-primary);
  --outline-btn-bdr-focus: var(--select);
  --primary-success-btn-bg: var(--success);
  --primary-success-btn-bg-hvr: var(--hvr-success);
  --primary-success-btn-bg-focus: var(--success-800);
  --outline-success-btn-bdr: var(--success);
  --outline-success-btn-bg-hvr: var(--success-50);
  --primary-danger-btn-bg: var(--danger);
  --primary-danger-btn-bg-hvr: var(--hvr-danger);
  --primary-danger-btn-bg-focus: var(--danger-800);
  --outline-danger-btn-bdr: var(--danger);
  --outline-danger-btn-bg-hvr: var(--danger-50);
  --disabled-btn-text: var(--disabled-text);
  --disabled-btn-bg: var(--bg-light-gray);
  --disabled-btn-bdr: var(--neutral-300);
  --disabled-bg-new: var(--neutral-200);
  --disabled-bdr-new: var(--neutral-400);
  --disabled-btn-bg-new: var(--disabled-bg-new);
  --disabled-btn-bdr-new: var(--disabled-bdr-new);

  /* Input Variables */
  --input-bdr: var(--bdr-primary);
  --input-bdr-hvr: var(--hvr-primary);
  --input-bdr-focus: var(--select);
  --input-bg-hvr: var(--primary-50);
  --input-bg-focus: var(--select-50);
  --input-danger-bdr: var(--danger-50);
  --input-danger-bg: var(--danger);
  --input-disabled-bdr: var(--disabled-bdr);
  --input-disabled-bg: var(--disabled-bg);

  /* Checkbox */
  --checkbox-w: 16px;
  --checkbox-h: 16px;
  --checkbox-default: var(--neutral-600);
  --checkbox-default-hvr: var(--primary);
  --checkbox-select: var(--select);
  --checkbox-select-hvr: var(--primary);
  --checkbox-disabled: var(--disabled-bg);

  /* Gradients */
  --gradient-primary-50: linear-gradient(to bottom, var(--white) 82%, var(--ocean-blue-50));
  --gradient-sunshine-50: linear-gradient(to bottom, var(--white) 75%, var(--sunshine-50) 100%);
  --gradient-teal-50: linear-gradient(to bottom, var(--white) 75%, var(--teal-50) 100%);
  --gradient-plum-50: linear-gradient(to bottom, var(--white) 75%, var(--plum-50) 100%);
  --gradient-tan-50: linear-gradient(to bottom, var(--white) 76%, var(--tan-50));
  --gradient-forest-50: linear-gradient(to bottom, var(--white) 67%, var(--forest-50));
  --gradient-sky-blue-50: linear-gradient(to bottom, var(--white), var(--sky-blue-50));
  --gradient-shamrock-50: linear-gradient(to bottom, var(--shamrock-50));
  --gradient-scarlet-50: linear-gradient(to bottom, var(--white) 14%, var(--scarlet-50));

  /* Sizing */
  --size-vs: 24px;
  --size-xs: 32px;
  --size-sm: 36px;
  --size-md: 40px;
  --size-lg: 44px;
  --size-xl: 48px;
  --size-full: 100%;

  /* Border Radius */
  --rds-vs: 2px;
  --rds-xxs: 4px;
  --rds-xs: 4px;
  --rds-sm: 8px;
  --rds-md: 12px;
  --rds-lg: 16px;
  --rds-xl: 24px;
  --rds-rounded: 9999px;

  /* Shadows */
  --shadow-sm: 0 6px 12px 0 rgb(16 24 40 / 8%);
  --shadow-md: 0 8px 16px 0 rgb(16 24 40 / 8%);
  --shadow-lg: 0 20px 24px 0 rgb(16 24 40 / 8%);

  /* Animation */
  --t-3ms: all 0.3s ease-in-out;

  /* Cobalt Blue — used by newer UI components */
  --cobalt-blue: #0271e3;
  --cobalt-blue-900: #012f5f;
  --cobalt-blue-350: #a6cdf5;
  --cobalt-blue-250: #c0dbf8;
  --cobalt-blue-200: #cce3f9;
  --cobalt-blue-150: #d9eafb;
  --cobalt-blue-100: #e6f1fc;
  --cobalt-blue-50: #f2f8fe;

  /* Extended button outline variables */
  --outline-success-btn-txt: var(--success);
  --outline-success-btn-bdr-hvr: var(--success-800);
  --outline-danger-btn-txt: var(--danger);
  --outline-danger-btn-bdr-hvr: var(--danger-800);

  /* Extended checkbox variables */
  --checkbox-primary: var(--primary);
  --checkbox-primary-hvr: var(--hvr-primary);

  /* Extended disabled/placeholder variables */
  --c-mt-disabled-bdr: var(--neutral-450);
  --c-mt-disabled-bg: var(--neutral-200);
  --c-mt-disabled-text: var(--neutral-450);
  --c-mt-placeholder-new: var(--neutral-450);
}