/* HOT theme */

/* :root makes them available globally */
:root,
/* :host is for Web Components and shadow DOM scopes */
:host,
/* .hot-theme-light allows scoping if you apply that class conditionally */
.hot-theme-light {
   /*
  * Color primitives
  */

   /* red - red */

   --hot-color-red-950: #A52A28;
   --hot-color-red-900: #B9302D;
   --hot-color-red-800: #B83032;
   --hot-color-red-700: #C53639;
   --hot-color-red-600: #D73F3F;
   --hot-color-red-500: #D43F3F;
   --hot-color-red-400: #ED5C5E;
   --hot-color-red-300: #E27A7D;
   --hot-color-red-200: #EC9EA1;
  --hot-color-red-100: #FED1D7;
   --hot-color-red-50: #FEECEF;

   /* rose - persian plum */

   --hot-color-rose-950: #3E030B;
   --hot-color-rose-900: #4B040E;
   --hot-color-rose-800: #5C1517;
   --hot-color-rose-700: #6B231D;
   --hot-color-rose-600: #7C2E26;
   --hot-color-rose-500: #7D463F;
   --hot-color-rose-400: #9E6960;
   --hot-color-rose-300: #B3837B;
   --hot-color-rose-200: #CFA59E;
   --hot-color-rose-100: #EAC7C0;
   --hot-color-rose-50: #FFE6DE;

   /* yellow - bright yellow */

   --hot-color-yellow-950: #CC6508;
   --hot-color-yellow-900: #E8750C;
   --hot-color-yellow-800: #F77D0F;
   --hot-color-yellow-700: #FAA71E;
   --hot-color-yellow-600: #FCBF26;
   --hot-color-yellow-500: #FED82E;
   --hot-color-yellow-400: #FAE62E;
   --hot-color-yellow-300: #FDEB51;
   --hot-color-yellow-200: #FFF072;
  --hot-color-yellow-100: #FFEBCF;
   --hot-color-yellow-50: #FFF9C3;

   /* blue - space cadet */

   --hot-color-blue-950: #111C31;
   --hot-color-blue-900: #182642;
   --hot-color-blue-800: #20365B;
   --hot-color-blue-700: #263F68;
   --hot-color-blue-600: #2E4873;
   --hot-color-blue-500: #344F7B;
   --hot-color-blue-400: #53688B;
   --hot-color-blue-300: #71829E;
   --hot-color-blue-200: #97A5BA;
   --hot-color-blue-100: #BFC8D6;
   --hot-color-blue-50: #E6E9EE;

   /* cyan - cadet blue */

   --hot-color-cyan-950: #2B514F;
   --hot-color-cyan-900: #366361;
   --hot-color-cyan-800: #408789;
   --hot-color-cyan-700: #459BA0;
   --hot-color-cyan-600: #4BB1B9;
   --hot-color-cyan-500: #50C1CB;
   --hot-color-cyan-400: #58CBD1;
   --hot-color-cyan-300: #6AD4D9;
   --hot-color-cyan-200: #8FE1E3;
   --hot-color-cyan-100: #B9EDED;
   --hot-color-cyan-50: #E3F8F8;

   /* gray - dark slate gray */

   --hot-color-gray-950: #2C3038;
   --hot-color-gray-900: #404248;
   --hot-color-gray-800: #515057;
   --hot-color-gray-700: #615F66;
   --hot-color-gray-600: #716F73;
   --hot-color-gray-500: #828085;
   --hot-color-gray-400: #9A969B;
   --hot-color-gray-300: #B3B0B3;
   --hot-color-gray-200: #C4C3C5;
   --hot-color-gray-100: #E1E0E1;
   --hot-color-gray-50: #F3F3F3;

      /*
   * Semantic Colors
   * These map primitive colors to semantic meanings
   */

   /* Primary colors (HOT brand color - red) */
   --hot-color-primary-950: var(--hot-color-red-950);
   --hot-color-primary-900: var(--hot-color-red-900);
   --hot-color-primary-800: var(--hot-color-red-800);
   --hot-color-primary-700: var(--hot-color-red-700);
   --hot-color-primary-600: var(--hot-color-red-600);
   --hot-color-primary-500: var(--hot-color-red-500);
   --hot-color-primary-400: var(--hot-color-red-400);
   --hot-color-primary-300: var(--hot-color-red-300);
   --hot-color-primary-200: var(--hot-color-red-200);
   --hot-color-primary-100: var(--hot-color-red-100);
   --hot-color-primary-50: var(--hot-color-red-50);

   /* Danger colors (red) */
   --hot-color-danger-950: var(--hot-color-red-950);
   --hot-color-danger-900: var(--hot-color-red-900);
   --hot-color-danger-800: var(--hot-color-red-800);
   --hot-color-danger-700: var(--hot-color-red-700);
   --hot-color-danger-600: var(--hot-color-red-600);
   --hot-color-danger-500: var(--hot-color-red-500);
   --hot-color-danger-400: var(--hot-color-red-400);
   --hot-color-danger-300: var(--hot-color-red-300);
   --hot-color-danger-200: var(--hot-color-red-200);
   --hot-color-danger-100: var(--hot-color-red-100);
   --hot-color-danger-50: var(--hot-color-red-50);

   /* Warning colors (yellow) */
   --hot-color-warning-950: var(--hot-color-yellow-950);
   --hot-color-warning-900: var(--hot-color-yellow-900);
   --hot-color-warning-800: var(--hot-color-yellow-800);
   --hot-color-warning-700: var(--hot-color-yellow-700);
   --hot-color-warning-600: var(--hot-color-yellow-600);
   --hot-color-warning-500: var(--hot-color-yellow-500);
   --hot-color-warning-400: var(--hot-color-yellow-400);
   --hot-color-warning-300: var(--hot-color-yellow-300);
   --hot-color-warning-200: var(--hot-color-yellow-200);
   --hot-color-warning-100: var(--hot-color-yellow-100);
   --hot-color-warning-50: var(--hot-color-yellow-50);

  /* Success colors (green) */
  --hot-color-success-950: #2B514F;
  --hot-color-success-900: #366361;
  --hot-color-success-800: #408789;
  --hot-color-success-700: #459BA0;
  --hot-color-success-600: #4BB1B9;
  --hot-color-success-500: #50C1CB;
  --hot-color-success-400: #58CBD1;
  --hot-color-success-300: #6AD4D9;
  --hot-color-success-200: #8FE1E3;
  --hot-color-success-100: #B9EDED;
  --hot-color-success-50: #E3F8F8;

   /* Neutral colors (gray) */
   --hot-color-neutral-1000: #ffffff;
   --hot-color-neutral-950: var(--hot-color-gray-950);
   --hot-color-neutral-900: var(--hot-color-gray-900);
   --hot-color-neutral-800: var(--hot-color-gray-800);
   --hot-color-neutral-700: var(--hot-color-gray-700);
   --hot-color-neutral-600: var(--hot-color-gray-600);
   --hot-color-neutral-500: var(--hot-color-gray-500);
   --hot-color-neutral-400: var(--hot-color-gray-400);
   --hot-color-neutral-300: var(--hot-color-gray-300);
   --hot-color-neutral-200: var(--hot-color-gray-200);
   --hot-color-neutral-100: var(--hot-color-gray-100);
   --hot-color-neutral-50: var(--hot-color-gray-50);
   --hot-color-neutral-0: #000000;


   /*
   * Typography
   */

   /* Fonts */
   --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --hot-font-sans-variant: 'Barlow';
   --hot-font-sans-variant-condensed: 'Barlow Condensed';
   --hot-font-serif: Georgia, 'Times New Roman', serif;
   --hot-font-mono: Menlo, Monaco, Consolas, 'Courier New', monospace, Consolas, 'Liberation Mono', Menlo, monospace;

   /* Font sizes */
   --hot-font-size-2x-small: 0.625rem;
   /* 10px */
   --hot-font-size-x-small: 0.75rem;
   /* 12px */
   --hot-font-size-small: 0.875rem;
   /* 14px */
   --hot-font-size-medium: 1rem;
   /* 16px */
   --hot-font-size-large: 1.25rem;
   /* 20px */
   --hot-font-size-x-large: 1.5rem;
   /* 24px */
   --hot-font-size-2x-large: 2.25rem;
   /* 36px */
   --hot-font-size-3x-large: 3rem;
   /* 48px */
   --hot-font-size-4x-large: 4.5rem;
   /* 72px */

   /* Font weights */
   --hot-font-weight-light: 300;
   --hot-font-weight-normal: 400;
   --hot-font-weight-semibold: 500;
   --hot-font-weight-bold: 700;

   /* Letter spacings */
   --hot-letter-spacing-denser: -0.03em;
   --hot-letter-spacing-dense: -0.015em;
   --hot-letter-spacing-normal: normal;
   --hot-letter-spacing-loose: 0.075em;
   --hot-letter-spacing-looser: 0.15em;

   /* Line heights */
   --hot-line-height-denser: 1;
   --hot-line-height-dense: 1.4;
   --hot-line-height-normal: 1.8;
   --hot-line-height-loose: 2.2;
   --hot-line-height-looser: 2.6;

   /*
   * Spacings
   */

   --hot-spacing-3x-small: 0.125rem;
   /* 2px */
   --hot-spacing-2x-small: 0.25rem;
   /* 4px */
   --hot-spacing-x-small: 0.5rem;
   /* 8px */
   --hot-spacing-small: 0.75rem;
   /* 12px */
   --hot-spacing-medium: 1rem;
   /* 16px */
   --hot-spacing-large: 1.25rem;
   /* 20px */
   --hot-spacing-x-large: 1.75rem;
   /* 28px */
   --hot-spacing-2x-large: 2.25rem;
   /* 36px */
   --hot-spacing-3x-large: 3rem;
   /* 48px */
   --hot-spacing-4x-large: 4.5rem;
   /* 72px */

   /*
   * Border radius
   */

   --hot-border-radius-small: 0.1875rem;
   /* 3px */
   --hot-border-radius-medium: 0.25rem;
   /* 4px */
   --hot-border-radius-large: 0.5rem;
   /* 8px */
   --hot-border-radius-x-large: 1rem;
   /* 16px */
   --hot-border-radius-circle: 50%;
   --hot-border-radius-pill: 9999px;
}

.gradient-button::part(base) {
   background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
   border: solid 1px var(--wa-color-purple-50);
   transition: transform 100ms, box-shadow 100ms;
 }

 .gradient-button::part(base):hover {
   box-shadow: var(--wa-shadow-m);
   transform: translateY(-3px);
 }

 .gradient-button::part(base):active {
   box-shadow: inset var(--wa-shadow-s);
   transform: translateY(0);
 }

 .gradient-button::part(label) {
   color: white;
   text-shadow: rgb(0 0 0 / 0.3) 0 -1px;
 }