@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:GRAD,ROND,opsz,slnt,wdth,wght@0..100,0..100,6..144,-10..0,25..151,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ========================================
 * Base CSS Variables
 * Generated from OmniDesign JSON
 * Auto-generated - do not edit manually
 * ======================================== */

/* ========================================
 * Root Button Colors
 * Global button color variables
 * ======================================== */

:root {
  --Surface: var(--Primary-Background-9-Surface);
  --Surface-Dim: var(--Primary-Background-9-Surface-Dim);
  --Surface-Bright: var(--Primary-Background-9-Surface-Bright);
  --Container: var(--Primary-Background-9-Container);
  --Container-Lowest: var(--Primary-Background-9-Container-Lowest);
  --Container-Low: var(--Primary-Background-9-Container-Low);
  --Container-High: var(--Primary-Background-9-Container-High);
  --Container-Highest: var(--Primary-Background-9-Container-Highest);
  /* Default Theme */
  --Background: var(--Primary-Background-9-Surface);
  --Surface-Dim: var(--Primary-Background-9-Surface-Dim);
  --Surface-Bright: var(--Primary-Background-9-Surface-Bright);
  --Header: var(--Header-Surfaces-Primary-Color-9);
  --Text: var(--Text-Surfaces-Primary-Color-9);
  --Quiet: var(--Quiet-Surfaces-Primary-Color-9);
  --Border: var(--Border-Surfaces-Primary-Color-9);
  --Border-Variant: var(--Border-Variant-Surfaces-Primary-Color-9);
  --Hotlink: var(--Text-Surfaces-Info-Color-9);
  --Hotlink-Visited: var(--Text-Surfaces-Hotlink-Visited-Color-9);
  --Hover: var(--Hover-Primary-Color-9);
  --Pressed: var(--Pressed-Primary-Color-9);
  --Focus-Visible: var(--Focus-Visible-Surfaces-Color-9);
  --Buttons-Primary-Hover: #e9ecd7;
  --Buttons-Primary-Pressed: #f0f2e2;
  --Buttons-Primary-Light-Button: var(--Primary-Color-12);
  --Buttons-Primary-Light-Text: var(--Text-Surfaces-Primary-Color-12);
  --Buttons-Primary-Light-Border: var(--Border-Surfaces-Primary-Color-12);
  --Buttons-Primary-Light-Hover: #fbfcf3;
  --Buttons-Primary-Light-Pressed: #f9faef;
  --Buttons-Secondary-Button: var(--Secondary-Color-9);
  --Buttons-Secondary-Text: var(--Text-Surfaces-Secondary-Color-9);
  --Buttons-Secondary-Border: var(--Border-Surfaces-Secondary-Color-9);
  --Buttons-Secondary-Hover: #ffe1e0;
  --Buttons-Secondary-Pressed: #ffeae9;
  --Buttons-Secondary-Light-Button: var(--Secondary-Color-12);
  --Buttons-Secondary-Light-Text: var(--Text-Surfaces-Secondary-Color-12);
  --Buttons-Secondary-Light-Border: var(--Border-Surfaces-Secondary-Color-9);
  --Buttons-Secondary-Light-Hover: #fff7f7;
  --Buttons-Secondary-Light-Pressed: #fff5f4;
  --Buttons-Tertiary-Button: var(--Tertiary-Color-9);
  --Buttons-Tertiary-Text: var(--Text-Surfaces-Tertiary-Color-9);
  --Buttons-Tertiary-Border: var(--Border-Surfaces-Tertiary-Color-9);
  --Buttons-Tertiary-Hover: #ffe4cd;
  --Buttons-Tertiary-Pressed: #ffecdc;
  --Buttons-Tertiary-Light-Button: var(--Tertiary-Color-12);
  --Buttons-Tertiary-Light-Text: var(--Text-Surfaces-Tertiary-Color-12);
  --Buttons-Tertiary-Light-Border: var(--Border-Surfaces-Tertiary-Color-9);
  --Buttons-Tertiary-Light-Hover: #fff9f1;
  --Buttons-Tertiary-Light-Pressed: #fff7ed;
  --Buttons-Primary-Button: var(--Primary-Button-Containers-Background-9-Button);
  --Buttons-Primary-Text: var(--Primary-Button-Containers-Background-9-Text);
  --Buttons-Primary-Border: var(--Border-Containers-Primary-Color-9);
  --Buttons-Primary-Hover: #e9ecd7;
  --Buttons-Primary-Pressed: #f0f2e2;
  --Buttons-Primary-Light-Border: var(--Border-Containers-Primary-Color-12);
  --Buttons-Secondary-Border: var(--Border-Containers-Secondary-Color-9);
  --Buttons-Secondary-Light-Border: var(--Border-Containers-Secondary-Color-9);
  --Buttons-Tertiary-Border: var(--Border-Containers-Tertiary-Color-9);
  --Buttons-Tertiary-Light-Border: var(--Border-Containers-Tertiary-Color-9);
  --Buttons-Neutral-Button: var(--Neutral-Color-6);
  --Buttons-Neutral-Text: var(--Text-Surfaces-Neutral-Color-6);
  --Buttons-Neutral-Border: var(--Border-Containers-Neutral-Color-9);
  --Buttons-Neutral-Hover: #9d9d9d;
  --Buttons-Neutral-Pressed: #aeaeae;
  --Buttons-Neutral-Light-Button: var(--Neutral-Color-12);
  --Buttons-Neutral-Light-Text: var(--Text-Surfaces-Neutral-Color-12);
  --Buttons-Neutral-Light-Border: var(--Border-Containers-Neutral-Color-9);
  --Buttons-Neutral-Light-Hover: #fbfbfb;
  --Buttons-Neutral-Light-Pressed: #f9f9f9;
  --Buttons-Info-Button: var(--Info-Color-6);
  --Buttons-Info-Text: var(--Text-Surfaces-Info-Color-6);
  --Buttons-Info-Border: var(--Border-Containers-Info-Color-9);
  --Buttons-Info-Hover: #7496ff;
  --Buttons-Info-Pressed: #90a7ff;
  --Buttons-Info-Light-Button: var(--Info-Color-12);
  --Buttons-Info-Light-Text: var(--Text-Surfaces-Info-Color-12);
  --Buttons-Info-Light-Border: var(--Border-Containers-Info-Color-9);
  --Buttons-Info-Light-Hover: #f9faff;
  --Buttons-Info-Light-Pressed: #f7f8ff;
  --Buttons-Success-Button: var(--Success-Color-6);
  --Buttons-Success-Text: var(--Text-Surfaces-Success-Color-6);
  --Buttons-Success-Border: var(--Border-Containers-Success-Color-9);
  --Buttons-Success-Hover: #4daf6f;
  --Buttons-Success-Pressed: #6abf84;
  --Buttons-Success-Light-Button: var(--Success-Color-12);
  --Buttons-Success-Light-Text: var(--Text-Surfaces-Success-Color-12);
  --Buttons-Success-Light-Border: var(--Border-Containers-Success-Color-9);
  --Buttons-Success-Light-Hover: #f0fff4;
  --Buttons-Success-Light-Pressed: #ecfef0;
  --Buttons-Warning-Button: var(--Warning-Color-6);
  --Buttons-Warning-Text: var(--Text-Surfaces-Warning-Color-6);
  --Buttons-Warning-Border: var(--Border-Containers-Warning-Color-9);
  --Buttons-Warning-Hover: #ce911e;
  --Buttons-Warning-Pressed: #e3a12b;
  --Buttons-Warning-Light-Button: var(--Warning-Color-12);
  --Buttons-Warning-Light-Text: var(--Text-Surfaces-Warning-Color-12);
  --Buttons-Warning-Light-Border: var(--Border-Containers-Warning-Color-9);
  --Buttons-Warning-Light-Hover: #fff9ec;
  --Buttons-Warning-Light-Pressed: #fff7e7;
  --Buttons-Error-Button: var(--Error-Color-6);
  --Buttons-Error-Text: var(--Text-Surfaces-Error-Color-6);
  --Buttons-Error-Border: var(--Border-Containers-Error-Color-9);
  --Buttons-Error-Hover: #f77069;
  --Buttons-Error-Pressed: #ff877d;
  --Buttons-Error-Light-Button: var(--Error-Color-12);
  --Buttons-Error-Light-Text: var(--Text-Surfaces-Error-Color-12);
  --Buttons-Error-Light-Border: var(--Border-Containers-Error-Color-9);
  --Buttons-Error-Light-Hover: #fff6f3;
  --Buttons-Error-Light-Pressed: #fff3ef;
  --Buttons-White-Button: var(--White);
  --Buttons-White-Text: var(--Text-Surfaces-BW-Button-Color-1);
  --Buttons-White-Hover: #fbfbfb;
  --Buttons-White-Pressed: #f9f9f9;
  --Buttons-Black-Button: var(--Neutral-Color-1);
  --Buttons-Black-Text: var(--Text-Surfaces-BW-Button-Color-12);
  --Buttons-Black-Hover: #0a0a0a;
  --Buttons-Black-Pressed: #101010;
  --Buttons-Default-Button: var(--Default-Button-Default-Medium-Button);
  --Buttons-Default-Text: var(--Default-Button-Default-Medium-Text);
  --Buttons-Default-Border: var(--Buttons-Secondary-Border);
  --Buttons-Default-Highlight: var(--Buttons-Secondary-Highlight);
  --Buttons-Default-Lowlight: var(--Buttons-Secondary-Lowlight);
  --Buttons-Default-Hover: #efa5a4;
  --Buttons-Default-Pressed: #efa5a4;
  --Icons-Default: var(--Icon-Surfaces-Neutral-Color-9);
  --Icons-Default-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-9);
  --Icons-Primary: var(--Icon-Surfaces-Primary-Color-9);
  --Icons-Primary-Variant: var(--Icon-Variant-Surfaces-Primary-Color-9);
  --Icons-Secondary: var(--Icon-Surfaces-Secondary-Color-9);
  --Icons-Secondary-Variant: var(--Icon-Variant-Surfaces-Secondary-Color-9);
  --Icons-Tertiary: var(--Icon-Surfaces-Tertiary-Color-9);
  --Icons-Tertiary-Variant: var(--Icon-Variant-Surfaces-Tertiary-Color-9);
  --Icons-Neutral: var(--Icon-Surfaces-Neutral-Color-9);
  --Icons-Neutral-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-9);
  --Icons-Info: var(--Icon-Surfaces-Info-Color-9);
  --Icons-Info-Variant: var(--Icon-Variant-Surfaces-Info-Color-9);
  --Icons-Success: var(--Icon-Surfaces-Success-Color-9);
  --Icons-Success-Variant: var(--Icon-Variant-Surfaces-Success-Color-9);
  --Icons-Warning: var(--Icon-Surfaces-Warning-Color-9);
  --Icons-Warning-Variant: var(--Icon-Variant-Surfaces-Warning-Color-9);
  --Icons-Error: var(--Icon-Surfaces-Error-Color-9);
  --Icons-Error-Variant: var(--Icon-Variant-Surfaces-Error-Color-9);
}

:root {
  /* ========================================
   * Chart Colors
   * Direct hex values for data visualization
   * ======================================== */

  --Chart-BG: #ffffff;
  --Chart-Lines: #e2e2e2;

  /* Solid Chart Colors */
  --Chart-1: #f0f2e2;
  --Chart-2: #ffeae9;
  --Chart-3: #ffecdc;
  --Chart-4: #edeeff;
  --Chart-5: #dff7e4;
  --Chart-6: #ffedd1;
  --Chart-7: #ffe7e1;
  --Chart-8: #f1f1f1;
  --Chart-9: #e1e5cc;
  --Chart-10: #ffd8d7;

  /* Opaque Chart Colors (50% opacity) */
  --Chart-1-Opaque: rgba(240, 242, 226, 0.5);
  --Chart-2-Opaque: rgba(255, 234, 233, 0.5);
  --Chart-3-Opaque: rgba(255, 236, 220, 0.5);
  --Chart-4-Opaque: rgba(237, 238, 255, 0.5);
  --Chart-5-Opaque: rgba(223, 247, 228, 0.5);
  --Chart-6-Opaque: rgba(255, 237, 209, 0.5);
  --Chart-7-Opaque: rgba(255, 231, 225, 0.5);
  --Chart-8-Opaque: rgba(241, 241, 241, 0.5);
  --Chart-9-Opaque: rgba(225, 229, 204, 0.5);
  --Chart-10-Opaque: rgba(255, 216, 215, 0.5);

  /* ========================================
   * Effect Levels (Box Shadows)
   * ======================================== */

  --Effect-Level-0: none;
  --Effect-Level-1: 0 1px 2px rgba(var(--Dropshadow-Color), 0.28);
  --Effect-Level-2: 0 2px 4px rgba(var(--Dropshadow-Color), 0.22), 0 1px 2px rgba(var(--Dropshadow-Color), 0.28);
  --Effect-Level-3: 0 4px 8px rgba(var(--Dropshadow-Color), 0.17), 0 2px 4px rgba(var(--Dropshadow-Color), 0.22);
  --Effect-Level-4: 0 8px 16px rgba(var(--Dropshadow-Color), 0.13), 0 4px 8px rgba(var(--Dropshadow-Color), 0.17);
  --Effect-Level-5: 0 16px 32px rgba(var(--Dropshadow-Color), 0.1), 0 8px 16px rgba(var(--Dropshadow-Color), 0.13);

 --Set-Font-Family-Header: "Google Sans Flex", sans-serif;
 --Set-Font-Family-Header-Weight: 300;
 --Set-Font-Family-Body: "Poppins", sans-serif;
 --Set-Font-Family-Body-Weight: 400;
 --Set-Font-Family-Body-Semibold-Weight: 600;
 --Set-Font-Family-Body-Bold-Weight: 700;
 --Set-Font-Family-Decorative: "Raleway", sans-serif;
 --Set-Font-Family-Decorative-Weight: 400;
}


:root {
  /* Default Primary / Secondary / Tertiary Tone — the Color-N each brand colour sits at. */
  --DPT: 6;
  --DST: 7;
  --DTT: 8;
  --Style-Border-Radius: 2px;
  --Button-Radius: 2px;
  --Sm-Button-Radius: 1px;
  --Lg-Button-Radius: 3px;
  --Button-Inner-Radius: 1px;
  --Sm-Button-Inner-Radius: 0px;
  --Lg-Button-Inner-Radius: 2px;
  --Button-Focus-Radius: 5px;
  --Sm-Button-Focus-Radius: 4px;
  --Lg-Button-Focus-Radius: 6px;
  --Button-Icon-Radius: 32px;
  --Sm-Button-Icon-Radius: 24px;
  --Lg-Button-Icon-Radius: 56px;
  --Button-Icon-Inner-Radius: 31px;
  --Sm-Button-Icon-Inner-Radius: 23px;
  --Lg-Button-Icon-Inner-Radius: 55px;
  --Button-Icon-Focus-Radius: 35px;
  --Sm-Button-Icon-Focus-Radius: 27px;
  --Lg-Button-Icon-Focus-Radius: 59px;
  --Card-Radius: 18px;
  --Card-Inner-Radius: 17px;
  --Card-Focus-Radius: 21px;
  --Card-Padding: 16px;
  --Modal-Padding: 24px;
  --Modal-Radius: 24px;
  --Modal-Inner-Radius: 23px;
  --Modal-Focus-Radius: 27px;
  --Dropdown-Frame-Radius: 2px;
  --Input-Radius: 2px;
  --Sm-Input-Radius: 1px;
  --Lg-Input-Radius: 3px;
  --Input-Inner-Radius: 1px;
  --Input-Focus-Radius: 5px;
  --Input-Inner-Focus-Visible: 1px;
  --Input-Swatch-Radius: 2px;
  --Sm-Input-Swatch-Radius: 1px;
  --Lg-Input-Swatch-Radius: 3px;
  --Input-Padding: 8px;
  --Button-Border-Width: 1px;
  --Button-Min-Width: 60px;
  --Lg-Button-Min-Width: 100px;
  --Button-Padding: 8px;
  --Sm-Button-Padding: var(--Button-Padding);
  --Lg-Button-Padding: 16px;
  --Large-Button-Padding: var(--Lg-Button-Padding);
  --Button-Bevel: 0;
  --Button-Bevel-Px: 0px;
  --Button-Bevel-Opacity: 0.5;
  --Effect-Level-0: none;
  --Effect-Level-1: 0.5px 1px 1px var(--Dropshadow-Color-1);
  --Effect-Level-2: 1px 2px 2px var(--Dropshadow-Color-1), 2px 4px 4px var(--Dropshadow-Color-2);
  --Effect-Level-3: 1px 2px 2px var(--Dropshadow-Color-1), 2px 4px 4px var(--Dropshadow-Color-2), 3px 6px 6px var(--Dropshadow-Color-3);
  --Effect-Level-4: 1px 2px 2px var(--Dropshadow-Color-1), 2px 4px 4px var(--Dropshadow-Color-2), 4px 8px 8px var(--Dropshadow-Color-3), 8px 16px 16px var(--Dropshadow-Color-4);
  --Effect-Level-5: 1px 2px 2px var(--Dropshadow-Color-1), 2px 4px 4px var(--Dropshadow-Color-2), 4px 8px 8px var(--Dropshadow-Color-3), 8px 16px 16px var(--Dropshadow-Color-4), 16px 32px 32px var(--Dropshadow-Color-5);
}


/* ========================================
 * Surface Background Mapping
 * Maps --Background to surface types
 * ======================================== */

[data-surface="Container"] {
  --Background: var(--Container);
}

[data-surface="Container-Low"] {
  --Background: var(--Container-Low);
}

[data-surface="Container-Lowest"] {
  --Background: var(--Container-Lowest);
}

[data-surface="Container-High"] {
  --Background: var(--Container-High);
}

[data-surface="Container-Highest"] {
  --Background: var(--Container-Highest);
}