:root {
  --basewhite: rgba(255, 255, 255, 1);
  --colorpry: rgba(2, 48, 71, 1);
  --greygrey-100: rgb(234, 234, 234);
  --greygrey-200: rgb(220, 220, 220);
  --greygrey-400: rgba(189, 189, 189, 1);
  --greygrey-800: rgba(66, 66, 66, 1);
  --blue-900: rgba(2, 48, 71, 1);
  --yellow-500: rgba(253, 185, 19, 1);

  --alpha-dark-700: rgba(26, 26, 26, 0.7);
  --alpha-light-900: rgba(255, 255, 255, 1);
  --alpha-light-700: rgba(255, 255, 255, 0.7);
  --alpha-dark-300: rgba(26, 26, 26, 0.26);
  --alpha-light-200: rgba(255, 255, 255, 0.18);
  --alpha-dark-00: rgba(26, 26, 26, 0);

  --label-light-bgcolor: rgba(224, 242, 254, 1);
  --elevation-xs: 0.5px 0.5px 3px 0px rgba(26, 26, 26, 0.08);

  --text-default: #1F2937;

/* Brand Colors */

  --sunshine-yellow: rgb(247, 200, 61);   /* #F7C83D */
  --sunshine-yellow-50: #FFF8E7;
  --sunshine-yellow-100: #FFECBD;
  --sunshine-yellow-200: #FFDF92;
  --sunshine-yellow-300: #FFD368;
  --sunshine-yellow-400: #FFC73E;
  --sunshine-yellow-500: #FDB913;
  --sunshine-yellow-600: #D49700;
  --sunshine-yellow-700: #AB7A00;
  --sunshine-yellow-800: #835D00;
  --sunshine-yellow-900: #5A4000;

  --data-blue:#023047;      /* = data-blue-900 */
  --data-blue-50: #F2FBFF;
  --data-blue-100: #DCF3FF;
  --data-blue-200: #C6ECFF;
  --data-blue-300: #B0E4FF;
  --data-blue-400: #97DAFB;
  --data-blue-500: #79C4EA;
  --data-blue-600: #4C9AC1;
  --data-blue-700: #297499;
  --data-blue-800: #115070;
  --data-blue-900: #023047;

  --sandy-pink: #F6C0BE;      
  --sandy-pink-50: #FFF3F5;
  --sandy-pink-100: #FFD0D8;
  --sandy-pink-200: #FFACBA;
  --sandy-pink-300: #FF899D;
  --sandy-pink-400: #E67588;
  --sandy-pink-500: #C96072;
  --sandy-pink-600: #AC4D5D;
  --sandy-pink-700: #8F3C4A;
  --sandy-pink-800: #712C38;
  --sandy-pink-900: #541E27;

  --gray-50: #FAFAFA;
  --gray-100: #E5E5E5;
  --gray-200: #D1D1D1;
  --gray-300: #BCBCBC;
  --gray-400: #A8A8A8;
  --gray-500: #949494;
  --gray-600: #7F7F7F;
  --gray-700: #6B6B6B;
  --gray-800: #565556;
  --gray-900: #414042;
  
  --bahama-blue: rgb(33, 158, 188);  /* #219EBC */ 
  --water-blue: #4DAECB;
  --shell-yellow: #FADA80;
  --dark-gray: #414042;     /* = gray-900 */
  --light-gray: #EBEBEC; 
  --light-blue: #F0F9FF;

  /* Additional semantic colors */
  --surface-muted: #F9FAFB;
  --surface-hover: #F0F4F8;
  --text-strong: #111827;
  --text-secondary: #374151;
  --text-muted: #4B5563;
  --text-deeper: #0F172A;
  --link-blue: #005EB8;
  --link-blue-600: #0056B3;
  --border-light: #E5E7EB;
  --border-muted: #B3C1C8;
  --border-alt: #CFD8DC;
  --muted-600: #6B7280;
  --data-tint-50: #E9F5F8;
  --danger-600: #DC2626;
  --accent-orange: #FF9900;
  --surface-200: #F3F4F6;
  --text-dim: #666666;
  --heading-deep: #00334E;

  /* Grid system defaults */
  --bp-xs: 360px;      /* extra-small breakpoint (phones <= 360px) */
  --bp-md: 768px;      /* tablet breakpoint */
  --bp-lg: 1024px;     /* desktop breakpoint */
  --bp-xl: 1200px;     /* xl desktop breakpoint */
  --bp-xxl: 1440px;    /* xxl desktop breakpoint */
  --grid-gap: 16px;    /* default grid gap */

  /* Typography: Base families */
  --font-sans: "Helvetica Neue", Inter, Arial, sans-serif;

  /* Typography: Base weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Typography: Base sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 48px;

  /* Typography: Line heights (unitless) */
  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* Typography: Semantic aliases */
  --h1-size: var(--font-size-4xl);
  --h1-line: 1;
  --h1-weight: var(--weight-medium);

  --h2-size: var(--font-size-2xl);
  --h2-line: var(--line-tight);
  --h2-weight: var(--weight-medium);

  --h3-size: var(--font-size-xl);
  --h3-line: var(--line-tight);
  --h3-weight: var(--weight-medium);

  --h4-size: var(--font-size-lg);
  --h4-line: var(--line-normal);
  --h4-weight: var(--weight-medium);

  --h5-size: var(--font-size-md);
  --h5-line: var(--line-normal);
  --h5-weight: var(--weight-medium);

  /* Typography: Responsive heading sizes (>= md) */
  --h1-size-lg: 48px;  --h1-line-lg: 48px;
  --h2-size-lg: 32px;  --h2-line-lg: 46px;
  --h3-size-lg: 28px;  --h3-line-lg: 42px;
  --h4-size-lg: 24px;  --h4-line-lg: 36px;
  --h5-size-lg: 22px;  --h5-line-lg: 32px;
  --h6-size-lg: 20px;  --h6-line-lg: 28px;

  /* Typography: Fluid heading sizes */
  --h1-size-fluid: clamp(24px, 6vw, 48px);
  --h2-size-fluid: clamp(20px, 4.5vw, 32px);
  --h3-size-fluid: clamp(18px, 4vw, 28px);
  --h4-size-fluid: clamp(16px, 3vw, 24px);
  --h5-size-fluid: clamp(16px, 2.5vw, 22px);
  --h6-size-fluid: clamp(16px, 2vw, 20px);

  --body-size: var(--font-size-md);
  --body-line: var(--line-normal);
  --body-weight: var(--weight-regular);

  --body-sm-size: var(--font-size-sm);
  --body-sm-line: var(--line-normal);
  --body-sm-weight: var(--weight-regular);

  --label-size: var(--font-size-sm);
  --label-weight: var(--weight-semibold);
}

strong { 
  font-weight: bold;
}

/* === Responsive Grid System ===
   Usage examples:
   <div class="grid grid-1 grid-md-2 grid-lg-3"> ...cards... </div>
   Optionally override gap with inline style: style="--grid-gap:24px" */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

/* Base columns */
.grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Responsive column utilities */
@media (min-width: 768px) {
  .grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Large screens helper: 5 equal columns */
  .grid-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Helpers */
.grid-center { justify-items: center; }
.grid-stretch { align-items: stretch; }

/* === 12-Column Grid (Bootstrap-like) ===
   Container: use `.row` (grid) with 12 equal columns.
   Columns: apply `.col-#` to children (1–12). Override per breakpoint with `.col-md-#`, `.col-lg-#`.
   Example:
     <div class="row" style="--grid-gap: 16px">
       <div class="col-12 col-md-6 col-lg-4">Card</div>
       ...
     </div>
*/

/* Visibility helpers (use styleguide breakpoints) */
.hidden { display: none !important; }
.visible-xs, .visible-md, .visible-lg, .visible-xl { display: none !important; }

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  grid-auto-flow: row dense; /* backfill gaps across breakpoints */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Base column spans (mobile-first default). */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }


/* Offsets (mobile-first default): set starting column; offset-N = start at column N+1 */
.col-offset-0  { grid-column-start: auto; }
.col-offset-1  { grid-column-start: 2; }
.col-offset-2  { grid-column-start: 3; }
.col-offset-3  { grid-column-start: 4; }
.col-offset-4  { grid-column-start: 5; }
.col-offset-5  { grid-column-start: 6; }
.col-offset-6  { grid-column-start: 7; }
.col-offset-7  { grid-column-start: 8; }
.col-offset-8  { grid-column-start: 9; }
.col-offset-9  { grid-column-start: 10; }
.col-offset-10 { grid-column-start: 11; }
.col-offset-11 { grid-column-start: 12; }
.col-offset-12 { grid-column-start: 13; }

/* Extra-small overrides (<= xs breakpoint): apply only on very small screens */
@media (max-width: 360px) {
  .col-xs-1  { grid-column-end: span 1; }
  .col-xs-2  { grid-column-end: span 2; }
  .col-xs-3  { grid-column-end: span 3; }
  .col-xs-4  { grid-column-end: span 4; }
  .col-xs-5  { grid-column-end: span 5; }
  .col-xs-6  { grid-column-end: span 6; }
  .col-xs-7  { grid-column-end: span 7; }
  .col-xs-8  { grid-column-end: span 8; }
  .col-xs-9  { grid-column-end: span 9; }
  .col-xs-10 { grid-column-end: span 10; }
  .col-xs-11 { grid-column-end: span 11; }
  .col-xs-12 { grid-column-end: span 12; }

  .col-xs-offset-0  { grid-column-start: auto; }
  .col-xs-offset-1  { grid-column-start: 2; }
  .col-xs-offset-2  { grid-column-start: 3; }
  .col-xs-offset-3  { grid-column-start: 4; }
  .col-xs-offset-4  { grid-column-start: 5; }
  .col-xs-offset-5  { grid-column-start: 6; }
  .col-xs-offset-6  { grid-column-start: 7; }
  .col-xs-offset-7  { grid-column-start: 8; }
  .col-xs-offset-8  { grid-column-start: 9; }
  .col-xs-offset-9  { grid-column-start: 10; }
  .col-xs-offset-10 { grid-column-start: 11; }
  .col-xs-offset-11 { grid-column-start: 12; }
  .col-xs-offset-12 { grid-column-start: 13; }
}

/* Small breakpoint (sm) */
:root { --bp-sm: 576px; }
@media (min-width: 576px) {
  .col-sm-1  { grid-column-end: span 1; }
  .col-sm-2  { grid-column-end: span 2; }
  .col-sm-3  { grid-column-end: span 3; }
  .col-sm-4  { grid-column-end: span 4; }
  .col-sm-5  { grid-column-end: span 5; }
  .col-sm-6  { grid-column-end: span 6; }
  .col-sm-7  { grid-column-end: span 7; }
  .col-sm-8  { grid-column-end: span 8; }
  .col-sm-9  { grid-column-end: span 9; }
  .col-sm-10 { grid-column-end: span 10; }
  .col-sm-11 { grid-column-end: span 11; }
  .col-sm-12 { grid-column-end: span 12; }

  .col-sm-offset-0  { grid-column-start: auto; }
  .col-sm-offset-1  { grid-column-start: 2; }
  .col-sm-offset-2  { grid-column-start: 3; }
  .col-sm-offset-3  { grid-column-start: 4; }
  .col-sm-offset-4  { grid-column-start: 5; }
  .col-sm-offset-5  { grid-column-start: 6; }
  .col-sm-offset-6  { grid-column-start: 7; }
  .col-sm-offset-7  { grid-column-start: 8; }
  .col-sm-offset-8  { grid-column-start: 9; }
  .col-sm-offset-9  { grid-column-start: 10; }
  .col-sm-offset-10 { grid-column-start: 11; }
  .col-sm-offset-11 { grid-column-start: 12; }
  .col-sm-offset-12 { grid-column-start: 13; }
}

/* Tablet overrides */
@media (min-width: 768px) {
  .col-md-1  { grid-column-end: span 1; }
  .col-md-2  { grid-column-end: span 2; }
  .col-md-3  { grid-column-end: span 3; }
  .col-md-4  { grid-column-end: span 4; }
  .col-md-5  { grid-column-end: span 5; }
  .col-md-6  { grid-column-end: span 6; }
  .col-md-7  { grid-column-end: span 7; }
  .col-md-8  { grid-column-end: span 8; }
  .col-md-9  { grid-column-end: span 9; }
  .col-md-10 { grid-column-end: span 10; }
  .col-md-11 { grid-column-end: span 11; }
  .col-md-12 { grid-column-end: span 12; }

  .col-md-offset-0  { grid-column-start: auto; }
  .col-md-offset-1  { grid-column-start: 2; }
  .col-md-offset-2  { grid-column-start: 3; }
  .col-md-offset-3  { grid-column-start: 4; }
  .col-md-offset-4  { grid-column-start: 5; }
  .col-md-offset-5  { grid-column-start: 6; }
  .col-md-offset-6  { grid-column-start: 7; }
  .col-md-offset-7  { grid-column-start: 8; }
  .col-md-offset-8  { grid-column-start: 9; }
  .col-md-offset-9  { grid-column-start: 10; }
  .col-md-offset-10 { grid-column-start: 11; }
  .col-md-offset-11 { grid-column-start: 12; }
  .col-md-offset-12 { grid-column-start: 13; }
}

/* Desktop overrides */
@media (min-width: 1024px) {
  .col-lg-1  { grid-column-end: span 1; }
  .col-lg-2  { grid-column-end: span 2; }
  .col-lg-3  { grid-column-end: span 3; }
  .col-lg-4  { grid-column-end: span 4; }
  .col-lg-5  { grid-column-end: span 5; }
  .col-lg-6  { grid-column-end: span 6; }
  .col-lg-7  { grid-column-end: span 7; }
  .col-lg-8  { grid-column-end: span 8; }
  .col-lg-9  { grid-column-end: span 9; }
  .col-lg-10 { grid-column-end: span 10; }
  .col-lg-11 { grid-column-end: span 11; }
  .col-lg-12 { grid-column-end: span 12; }

  .col-lg-offset-0  { grid-column-start: auto; }
  .col-lg-offset-1  { grid-column-start: 2; }
  .col-lg-offset-2  { grid-column-start: 3; }
  .col-lg-offset-3  { grid-column-start: 4; }
  .col-lg-offset-4  { grid-column-start: 5; }
  .col-lg-offset-5  { grid-column-start: 6; }
  .col-lg-offset-6  { grid-column-start: 7; }
  .col-lg-offset-7  { grid-column-start: 8; }
  .col-lg-offset-8  { grid-column-start: 9; }
  .col-lg-offset-9  { grid-column-start: 10; }
  .col-lg-offset-10 { grid-column-start: 11; }
  .col-lg-offset-11 { grid-column-start: 12; }
  .col-lg-offset-12 { grid-column-start: 13; }
}

/* XL Desktop overrides */
@media (min-width: 1200px) {
  .col-xl-1  { grid-column-end: span 1; }
  .col-xl-2  { grid-column-end: span 2; }
  .col-xl-3  { grid-column-end: span 3; }
  .col-xl-4  { grid-column-end: span 4; }
  .col-xl-5  { grid-column-end: span 5; }
  .col-xl-6  { grid-column-end: span 6; }
  .col-xl-7  { grid-column-end: span 7; }
  .col-xl-8  { grid-column-end: span 8; }
  .col-xl-9  { grid-column-end: span 9; }
  .col-xl-10 { grid-column-end: span 10; }
  .col-xl-11 { grid-column-end: span 11; }
  .col-xl-12 { grid-column-end: span 12; }

  .col-xl-offset-0  { grid-column-start: auto; }
  .col-xl-offset-1  { grid-column-start: 2; }
  .col-xl-offset-2  { grid-column-start: 3; }
  .col-xl-offset-3  { grid-column-start: 4; }
  .col-xl-offset-4  { grid-column-start: 5; }
  .col-xl-offset-5  { grid-column-start: 6; }
  .col-xl-offset-6  { grid-column-start: 7; }
  .col-xl-offset-7  { grid-column-start: 8; }
  .col-xl-offset-8  { grid-column-start: 9; }
  .col-xl-offset-9  { grid-column-start: 10; }
  .col-xl-offset-10 { grid-column-start: 11; }
  .col-xl-offset-11 { grid-column-start: 12; }
  .col-xl-offset-12 { grid-column-start: 13; }
}

/* Row alignment helpers */
.row-center  { justify-items: center; }
.row-stretch { align-items: stretch; }

/* Responsive visibility helpers (exact ranges) */
/* Hidden by default: opt-in per breakpoint */
.visible-xs, .visible-sm, .visible-md, .visible-lg, .visible-xl { display: none !important; }

/* XS: up to and including 360px */
@media (max-width: 360px) {
  .visible-xs { display: flex !important; }
  .hidden-xs  { display: none !important; }
}

/* SM: between 361px and 767px */
@media (min-width: 361px) and (max-width: 767px) {
  .visible-sm { display: flex !important; }
  .hidden-sm  { display: none !important; }
}

/* MD: between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .visible-md { display: flex !important; }
  .hidden-md  { display: none !important; }
}

/* LG: 1024px and above */
@media (min-width: 1024px) {
  .visible-lg { display: flex !important; }
  .hidden-lg  { display: none !important; }
}

/* XL: 1200px and above */
@media (min-width: 1200px) {
  .visible-xl { display: flex !important; }
  .hidden-xl  { display: none !important; }
}