/* HOT theme for WebAwesome

1. First import WebAwesome base styles
@import url("https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/webawesome.css");

2. Then import our HOT theme variables
https://cdn.jsdelivr.net/npm/hotosm-ui-design@latest/dist/hot.css
https://cdn.jsdelivr.net/npm/hotosm-ui-design@latest/dist/hot-font-face.css

3. Then HOT WebAwesome overrides
https://cdn.jsdelivr.net/npm/hotosm-ui-design@latest/dist/hot-wa.css
*/

@layer wa-color-palette {
  :where(:root),
  .wa-palette-hotosm {
    /* NOTE: for some reason WA decided to swap the ordering 05 --> 95 to be dark to light... */
    /* Material design and WebAwesome convention is the inverse, so we map to that */
    --wa-color-red-95: var(--hot-color-red-50);
    --wa-color-red-90: var(--hot-color-red-100);
    --wa-color-red-80: var(--hot-color-red-200);
    --wa-color-red-70: var(--hot-color-red-300);
    --wa-color-red-60: var(--hot-color-red-400);
    --wa-color-red-50: var(--hot-color-red-500);
    --wa-color-red-40: var(--hot-color-red-600);
    --wa-color-red-30: var(--hot-color-red-700);
    --wa-color-red-20: var(--hot-color-red-800);
    --wa-color-red-10: var(--hot-color-red-900);
    --wa-color-red-05: var(--hot-color-red-950);
    --wa-color-red: var(--wa-color-red-50);
    --wa-color-red-key: 50;

    --wa-color-orange-95: var(--hot-color-rose-50);
    --wa-color-orange-90: var(--hot-color-rose-100);
    --wa-color-orange-80: var(--hot-color-rose-200);
    --wa-color-orange-70: var(--hot-color-rose-300);
    --wa-color-orange-60: var(--hot-color-rose-400);
    --wa-color-orange-50: var(--hot-color-rose-500);
    --wa-color-orange-40: var(--hot-color-rose-600);
    --wa-color-orange-30: var(--hot-color-rose-700);
    --wa-color-orange-20: var(--hot-color-rose-800);
    --wa-color-orange-10: var(--hot-color-rose-900);
    --wa-color-orange-05: var(--hot-color-rose-950);
    --wa-color-orange: var(--wa-color-orange-60);
    --wa-color-orange-key: 60;

    --wa-color-yellow-95: var(--hot-color-yellow-50);
    --wa-color-yellow-90: var(--hot-color-yellow-100);
    --wa-color-yellow-80: var(--hot-color-yellow-200);
    --wa-color-yellow-70: var(--hot-color-yellow-300);
    --wa-color-yellow-60: var(--hot-color-yellow-400);
    --wa-color-yellow-50: var(--hot-color-yellow-500);
    --wa-color-yellow-40: var(--hot-color-yellow-600);
    --wa-color-yellow-30: var(--hot-color-yellow-700);
    --wa-color-yellow-20: var(--hot-color-yellow-800);
    --wa-color-yellow-10: var(--hot-color-yellow-900);
    --wa-color-yellow-05: var(--hot-color-yellow-950);
    --wa-color-yellow: var(--wa-color-yellow-80);
    --wa-color-yellow-key: 80;

    --wa-color-cyan-95: var(--hot-color-cyan-50);
    --wa-color-cyan-90: var(--hot-color-cyan-100);
    --wa-color-cyan-80: var(--hot-color-cyan-200);
    --wa-color-cyan-70: var(--hot-color-cyan-300);
    --wa-color-cyan-60: var(--hot-color-cyan-400);
    --wa-color-cyan-50: var(--hot-color-cyan-500);
    --wa-color-cyan-40: var(--hot-color-cyan-600);
    --wa-color-cyan-30: var(--hot-color-cyan-700);
    --wa-color-cyan-20: var(--hot-color-cyan-800);
    --wa-color-cyan-10: var(--hot-color-cyan-900);
    --wa-color-cyan-05: var(--hot-color-cyan-950);
    --wa-color-cyan: var(--wa-color-cyan-70);
    --wa-color-cyan-key: 70;

    --wa-color-blue-95: var(--hot-color-blue-50);
    --wa-color-blue-90: var(--hot-color-blue-100);
    --wa-color-blue-80: var(--hot-color-blue-200);
    --wa-color-blue-70: var(--hot-color-blue-300);
    --wa-color-blue-60: var(--hot-color-blue-400);
    --wa-color-blue-50: var(--hot-color-blue-500);
    --wa-color-blue-40: var(--hot-color-blue-600);
    --wa-color-blue-30: var(--hot-color-blue-700);
    --wa-color-blue-20: var(--hot-color-blue-800);
    --wa-color-blue-10: var(--hot-color-blue-900);
    --wa-color-blue-05: var(--hot-color-blue-950);
    --wa-color-blue: var(--wa-color-blue-50);
    --wa-color-blue-key: 50;

    --wa-color-gray-95: var(--hot-color-gray-50);
    --wa-color-gray-90: var(--hot-color-gray-100);
    --wa-color-gray-80: var(--hot-color-gray-200);
    --wa-color-gray-70: var(--hot-color-gray-300);
    --wa-color-gray-60: var(--hot-color-gray-400);
    --wa-color-gray-50: var(--hot-color-gray-500);
    --wa-color-gray-40: var(--hot-color-gray-600);
    --wa-color-gray-30: var(--hot-color-gray-700);
    --wa-color-gray-20: var(--hot-color-gray-800);
    --wa-color-gray-10: var(--hot-color-gray-900);
    --wa-color-gray-05: var(--hot-color-gray-950);
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;

    /* Brand colors - Map to HOT primary colors (red) */
    --wa-color-brand-95: var(--hot-color-primary-50);
    --wa-color-brand-90: var(--hot-color-primary-100);
    --wa-color-brand-80: var(--hot-color-primary-200);
    --wa-color-brand-70: var(--hot-color-primary-300);
    --wa-color-brand-60: var(--hot-color-primary-400);
    --wa-color-brand-50: var(--hot-color-primary-500);
    --wa-color-brand-40: var(--hot-color-primary-600);
    --wa-color-brand-30: var(--hot-color-primary-700);
    --wa-color-brand-20: var(--hot-color-primary-800);
    --wa-color-brand-10: var(--hot-color-primary-900);
    --wa-color-brand-05: var(--hot-color-primary-950);
    --wa-color-brand: var(--wa-color-brand-50);
    --wa-color-brand-key: 50;

    /* Neutral colors - Map to HOT neutral colors (gray) */
    --wa-color-neutral-95: var(--hot-color-neutral-50);
    --wa-color-neutral-90: var(--hot-color-neutral-100);
    --wa-color-neutral-80: var(--hot-color-neutral-200);
    --wa-color-neutral-70: var(--hot-color-neutral-300);
    --wa-color-neutral-60: var(--hot-color-neutral-400);
    --wa-color-neutral-50: var(--hot-color-neutral-500);
    --wa-color-neutral-40: var(--hot-color-neutral-600);
    --wa-color-neutral-30: var(--hot-color-neutral-700);
    --wa-color-neutral-20: var(--hot-color-neutral-800);
    --wa-color-neutral-10: var(--hot-color-neutral-900);
    --wa-color-neutral-05: var(--hot-color-neutral-950);
    --wa-color-neutral: var(--wa-color-neutral-40);
    --wa-color-neutral-key: 40;

    /* Success colors - Map to HOT success colors */
    --wa-color-success-95: var(--hot-color-success-50);
    --wa-color-success-90: var(--hot-color-success-100);
    --wa-color-success-80: var(--hot-color-success-200);
    --wa-color-success-70: var(--hot-color-success-300);
    --wa-color-success-60: var(--hot-color-success-400);
    --wa-color-success-50: var(--hot-color-success-500);
    --wa-color-success-40: var(--hot-color-success-600);
    --wa-color-success-30: var(--hot-color-success-700);
    --wa-color-success-20: var(--hot-color-success-800);
    --wa-color-success-10: var(--hot-color-success-900);
    --wa-color-success-05: var(--hot-color-success-950);
    --wa-color-success: var(--wa-color-success-60);
    --wa-color-success-key: 60;

    /* Warning colors - Map to HOT warning colors */
    --wa-color-warning-95: var(--hot-color-warning-50);
    --wa-color-warning-90: var(--hot-color-warning-100);
    --wa-color-warning-80: var(--hot-color-warning-200);
    --wa-color-warning-70: var(--hot-color-warning-300);
    --wa-color-warning-60: var(--hot-color-warning-400);
    --wa-color-warning-50: var(--hot-color-warning-500);
    --wa-color-warning-40: var(--hot-color-warning-600);
    --wa-color-warning-30: var(--hot-color-warning-700);
    --wa-color-warning-20: var(--hot-color-warning-800);
    --wa-color-warning-10: var(--hot-color-warning-900);
    --wa-color-warning-05: var(--hot-color-warning-950);
    --wa-color-warning: var(--wa-color-warning-80);
    --wa-color-warning-key: 80;

    /* Danger colors - Map to HOT danger colors */
    --wa-color-danger-95: var(--hot-color-danger-50);
    --wa-color-danger-90: var(--hot-color-danger-100);
    --wa-color-danger-80: var(--hot-color-danger-200);
    --wa-color-danger-70: var(--hot-color-danger-300);
    --wa-color-danger-60: var(--hot-color-danger-400);
    --wa-color-danger-50: var(--hot-color-danger-500);
    --wa-color-danger-40: var(--hot-color-danger-600);
    --wa-color-danger-30: var(--hot-color-danger-700);
    --wa-color-danger-20: var(--hot-color-danger-800);
    --wa-color-danger-10: var(--hot-color-danger-900);
    --wa-color-danger-05: var(--hot-color-danger-950);
    --wa-color-danger: var(--wa-color-danger-50);
    --wa-color-danger-key: 50;

    /* Check the defaults at https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/color/palettes/default.css */
    /* No change made to: purple, indigo, pink, green */

    --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
    --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
    --wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
    --wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
    --wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
    --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
    --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
    --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
    --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
    --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
    --wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
    --wa-color-green: var(--wa-color-green-60);
    --wa-color-green-key: 60;

    --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
    --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
    --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
    --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
    --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
    --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
    --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
    --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
    --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
    --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
    --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
    --wa-color-indigo: var(--wa-color-indigo-50);
    --wa-color-indigo-key: 50;

    --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
    --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
    --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
    --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
    --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
    --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
    --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
    --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
    --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
    --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
    --wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
    --wa-color-purple: var(--wa-color-purple-50);
    --wa-color-purple-key: 50;

    --wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
    --wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
    --wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
    --wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
    --wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
    --wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
    --wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
    --wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
    --wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
    --wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
    --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
    --wa-color-pink: var(--wa-color-pink-50);
    --wa-color-pink-key: 50;

    /* Fonts */
    --wa-font-family-body: var(--hot-font-sans);
    --wa-font-family-heading: var(--hot-font-sans-variant);
    --wa-font-family-code: var(--hot-font-mono);
    --wa-font-family-longform: var(--hot-font-sefif);

    /* Font sizes */
    --wa-font-size-2xs: var(--hot-font-size-2x-small); /* 10px */
    --wa-font-size-xs: var(--hot-font-size-x-small); /* 12px */
    --wa-font-size-s: var(--hot-font-size-small); /* 14px */
    --wa-font-size-m: var(--hot-font-size-medium); /* 16px */
    --wa-font-size-l: var(--hot-font-size-large); /* 20px */
    --wa-font-size-xl: var(--hot-font-size-x-large); /* 24px */
    --wa-font-size-2xl: var(--hot-font-size-2x-large); /* 36px */
    --wa-font-size-3xl: var(--hot-font-size-3x-large); /* 48px */
    --wa-font-size-4xl: var(--hot-font-size-4x-large); /* 72px */
    /* Note: `wa-font-size-scale` and `wa-font-size-smaller` / `larger` have no direct `hot-` match.
      They depend on calc() so we set no overrides here. */

    /* Font weights */
    --wa-font-weight-light: var(--hot-font-weight-light);
    --wa-font-weight-normal: var(--hot-font-weight-normal);
    --wa-font-weight-semibold: var(--hot-font-weight-semibold);
    --wa-font-weight-bold: var(--hot-font-weight-bold);

    /* Functional font weights */
    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);

    /* Line heights */
    --wa-line-height-condensed: var(--hot-line-height-denser);
    --wa-line-height-normal: var(--hot-line-height-normal);
    --wa-line-height-expanded: var(--hot-line-height-looser);

    /*
    * Spacing, rounding, etc
    *
    * See https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/themes/default.css for all options
    */
    /*  */

    --wa-space-3xs: var(--hot-spacing-3x-small); /* 2px */
    --wa-space-2xs: var(--hot-spacing-2x-small); /* 4px */
    --wa-space-xs: var(--hot-spacing-x-small); /* 8px */
    --wa-space-s: var(--hot-spacing-small); /* 12px */
    --wa-space-m: var(--hot-spacing-medium); /* 16px */
    --wa-space-l: var(--hot-spacing-large); /* 20px */
    --wa-space-xl: var(--hot-spacing-x-large); /* 28px */
    --wa-space-2xl: var(--hot-spacing-2x-large); /* 36px */
    --wa-space-3xl: var(--hot-spacing-3x-large); /* 48px */
    --wa-space-4xl: var(--hot-spacing-4x-large); /* 72px */

    --wa-border-radius-s: var(--hot-border-radius-small); /* 3px */
    --wa-border-radius-m: var(--hot-border-radius-medium); /* 4px */
    --wa-border-radius-l: var(--hot-border-radius-large); /* 8px */
    --wa-border-radius-pill: var(--hot-border-radius-pill); /* 9999px */
    --wa-border-radius-circle: var(--hot-border-radius-circle); /* 50% */
  }
}

/* Theme layer - semantic color mappings (must be in wa-theme layer, not wa-color-palette) */
@layer wa-theme {
  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark .wa-invert,
  .wa-light .wa-theme-default,
  .wa-dark .wa-theme-default.wa-invert,
  .wa-dark .wa-theme-default .wa-invert {
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--hot-color-neutral-0);
    --wa-color-surface-default: var(--hot-color-neutral-0);
    --wa-color-surface-lowered: var(--hot-color-neutral-50);
    --wa-color-surface-border: var(--hot-color-neutral-100);

    --wa-color-text-normal: var(--hot-color-neutral-900);
    --wa-color-text-quiet: var(--hot-color-neutral-600);
    --wa-color-text-link: var(--hot-color-primary-600);

    --wa-color-overlay-modal: color-mix(
      in oklab,
      var(--hot-color-neutral-950) 50%,
      transparent
    );
    --wa-color-overlay-inline: color-mix(
      in oklab,
      var(--hot-color-neutral-200) 25%,
      transparent
    );

    --wa-color-shadow: color-mix(
      in oklab,
      var(--hot-color-neutral-950) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
      transparent
    );
    --wa-color-focus: var(--hot-color-primary-950);
    --wa-color-mix-hover: var(--hot-color-neutral-0) 10%;
    --wa-color-mix-active: var(--hot-color-neutral-0) 20%;

    --wa-color-brand-fill-quiet: var(--hot-color-primary-50);
    --wa-color-brand-fill-normal: var(--hot-color-primary-950);
    --wa-color-brand-fill-loud: var(--hot-color-primary-1000);

    --wa-color-brand-border-quiet: var(--hot-color-primary-900);
    --wa-color-brand-border-normal: var(--hot-color-primary-950);
    --wa-color-brand-border-loud: var(--hot-color-primary-1000);

    --wa-color-brand-on-quiet: var(--hot-color-primary-950);
    --wa-color-brand-on-normal: var(--hot-color-neutral-0);
    --wa-color-brand-on-loud: var(--hot-color-neutral-0);

    --wa-color-success-fill-quiet: var(--hot-color-success-50);
    --wa-color-success-fill-normal: var(--hot-color-success-100);
    --wa-color-success-fill-loud: var(--hot-color-success-700);
    --wa-color-success-border-quiet: var(--hot-color-success-100);
    --wa-color-success-border-normal: var(--hot-color-success-800);
    --wa-color-success-border-loud: var(--hot-color-success-700);
    --wa-color-success-on-quiet: var(--hot-color-success-800);
    --wa-color-success-on-normal: var(--hot-color-success-800);
    --wa-color-success-on-loud: var(--hot-color-neutral-0);

    --wa-color-warning-fill-quiet: var(--hot-color-warning-50);
    --wa-color-warning-fill-normal: var(--hot-color-warning-100);
    --wa-color-warning-fill-loud: var(--hot-color-warning-700);
    --wa-color-warning-border-quiet: var(--hot-color-warning-100);
    --wa-color-warning-border-normal: var(--hot-color-warning-700);
    --wa-color-warning-border-loud: var(--hot-color-warning-700);
    --wa-color-warning-on-quiet: var(--hot-color-warning-950);
    --wa-color-warning-on-normal: var(--hot-color-warning-950);
    --wa-color-warning-on-loud: var(--hot-color-neutral-0);

    --wa-color-danger-fill-quiet: var(--hot-color-danger-100);
    --wa-color-danger-fill-normal: var(--hot-color-danger-100);
    --wa-color-danger-fill-loud: var(--hot-color-danger-700);
    --wa-color-danger-border-quiet: var(--hot-color-danger-100);
    --wa-color-danger-border-normal: var(--hot-color-danger-100);
    --wa-color-danger-border-loud: var(--hot-color-danger-700);
    --wa-color-danger-on-quiet: var(--hot-color-danger-700);
    --wa-color-danger-on-normal: var(--hot-color-danger-700);
    --wa-color-danger-on-loud: var(--hot-color-neutral-0);

    --wa-color-neutral-fill-quiet: var(--hot-color-neutral-50);
    --wa-color-neutral-fill-normal: var(--hot-color-neutral-100);
    --wa-color-neutral-fill-loud: var(--hot-color-neutral-950);
    --wa-color-neutral-border-quiet: var(--hot-color-neutral-950);
    --wa-color-neutral-border-normal: var(--hot-color-neutral-200);
    --wa-color-neutral-border-loud: var(--hot-color-neutral-400);
    --wa-color-neutral-on-quiet: var(--hot-color-neutral-950);
    --wa-color-neutral-on-normal: var(--hot-color-neutral-950);
    --wa-color-neutral-on-loud: var(--hot-color-neutral-0);
  }
}