@hotosm/ui 2.1.2 → 3.0.0

package/dist/themes/hot-font-face.css

@@ -0,0 +1,354 @@
+/* HOT web fonts - Archivo (sans), Barlow (sans-variant), Barlow Condensed
+   (sans-variant-condensed). See https://docs.hotosm.org/decisions/0014-ui-fonts
+
+   Files are self-hosted woff2 subsets (latin, latin-ext, vietnamese) from
+   Fontsource, split with unicode-range so the browser only downloads the
+   subsets a page actually renders. Scripts these fonts do not cover (Arabic,
+   Devanagari, Ethiopic, CJK, Cyrillic...) fall through to the script-aware
+   system stacks in hot.css. */
+
+/* Archivo (SIL OFL 1.1, see ../assets/fonts/archivo-OFL.txt) */
+
+@font-face {
+  font-family: "Archivo";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("../assets/fonts/archivo-vietnamese-wght-normal.woff2") format("woff2-variations");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Archivo";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("../assets/fonts/archivo-latin-ext-wght-normal.woff2") format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Archivo";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("../assets/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Archivo";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("../assets/fonts/archivo-vietnamese-wght-italic.woff2") format("woff2-variations");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Archivo";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("../assets/fonts/archivo-latin-ext-wght-italic.woff2") format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Archivo";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("../assets/fonts/archivo-latin-wght-italic.woff2") format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Barlow (SIL OFL 1.1, see ../assets/fonts/barlow-OFL.txt) */
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-vietnamese-300-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-latin-ext-300-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-latin-300-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-vietnamese-400-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-latin-ext-400-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-latin-400-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-vietnamese-500-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-latin-ext-500-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-latin-500-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-vietnamese-700-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-latin-ext-700-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-latin-700-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Barlow Condensed (SIL OFL 1.1, see ../assets/fonts/barlow-condensed-OFL.txt) */
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-vietnamese-300-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-latin-ext-300-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-latin-300-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-vietnamese-400-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-latin-ext-400-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-latin-400-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-vietnamese-500-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-latin-ext-500-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-vietnamese-700-normal.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Barlow Condensed";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/themes/hot-wa.css

@@ -111,21 +111,6 @@
     --wa-color-gray: var(--wa-color-gray-40);
     --wa-color-gray-key: 40;
 
-    /* Brand → HOT primary (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 → HOT gray */
     --wa-color-neutral-95: var(--hot-color-neutral-50);
     --wa-color-neutral-90: var(--hot-color-neutral-100);
@@ -247,6 +232,31 @@
   }
 }
 
+/* ─── Variant layer ─────────────────────────────────────────────────────────
+   Which palette hue each variant uses. Must be here rather than in
+   wa-color-palette, which loses to WA's own brand → blue default in this layer.
+   :where() keeps specificity at zero so apps can still set wa-brand-*.
+─────────────────────────────────────────────────────────────────────────── */
+@layer wa-color-variant {
+  :where(:root),
+  :where(.wa-palette-hotosm) {
+    /* Brand → HOT primary (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;
+  }
+}
+
 /* ─── Theme layer ────────────────────────────────────────────────────────────
    Semantic color tokens + typography + spacing + borders.
    All overrides are in @layer wa-theme so they take precedence over WA's own

package/dist/themes/hot.css

@@ -1,14 +1,11 @@
 /* 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
-  */
+   * Color primitives
+   */
 
   /* red - red */
 
@@ -17,11 +14,11 @@
   --hot-color-red-800: #b83032;
   --hot-color-red-700: #c53639;
   --hot-color-red-600: #d73f3f;
-  --hot-color-red-500: #d43f3f;
+  --hot-color-red-500: #f34d47;
   --hot-color-red-400: #ed5c5e;
   --hot-color-red-300: #e27a7d;
   --hot-color-red-200: #ec9ea1;
-  --hot-color-red-100: #fed1d7;
+  --hot-color-red-100: #fdd0d6;
   --hot-color-red-50: #feecef;
 
   /* rose - persian plum */
@@ -49,7 +46,7 @@
   --hot-color-yellow-400: #fae62e;
   --hot-color-yellow-300: #fdeb51;
   --hot-color-yellow-200: #fff072;
-  --hot-color-yellow-100: #ffebcf;
+  --hot-color-yellow-100: #fff59b;
   --hot-color-yellow-50: #fff9c3;
 
   /* blue - space cadet */
@@ -94,25 +91,28 @@
   --hot-color-gray-100: #e1e0e1;
   --hot-color-gray-50: #f3f3f3;
 
+  /* neutral - black & white */
+
+  --hot-color-neutral-1000: #000;
+  --hot-color-neutral-0: #fff;
+
   /*
-   * Semantic Colors
-   * These map primitive colors to semantic meanings
+   * Color tokens
    */
 
-  /* 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-primary-1000: var(--hot-color-neutral-1000);
+  --hot-color-primary-950: var(--hot-color-neutral-1000);
+  --hot-color-primary-900: var(--hot-color-gray-900);
+  --hot-color-primary-800: var(--hot-color-gray-800);
+  --hot-color-primary-700: var(--hot-color-gray-700);
+  --hot-color-primary-600: var(--hot-color-gray-600);
+  --hot-color-primary-500: var(--hot-color-gray-500);
+  --hot-color-primary-400: var(--hot-color-gray-400);
+  --hot-color-primary-300: var(--hot-color-gray-300);
+  --hot-color-primary-200: var(--hot-color-gray-200);
+  --hot-color-primary-100: var(--hot-color-gray-100);
+  --hot-color-primary-50: var(--hot-color-gray-50);
+
   --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);
@@ -125,7 +125,30 @@
   --hot-color-danger-100: var(--hot-color-red-100);
   --hot-color-danger-50: var(--hot-color-red-50);
 
-  /* Warning colors (yellow) */
+  --hot-color-neutral-950: var(--hot-color-blue-950);
+  --hot-color-neutral-900: var(--hot-color-blue-900);
+  --hot-color-neutral-800: var(--hot-color-blue-800);
+  --hot-color-neutral-700: var(--hot-color-blue-700);
+  --hot-color-neutral-600: var(--hot-color-blue-600);
+  --hot-color-neutral-500: var(--hot-color-blue-500);
+  --hot-color-neutral-400: var(--hot-color-blue-400);
+  --hot-color-neutral-300: var(--hot-color-blue-300);
+  --hot-color-neutral-200: var(--hot-color-blue-200);
+  --hot-color-neutral-100: var(--hot-color-blue-100);
+  --hot-color-neutral-50: var(--hot-color-blue-50);
+
+  --hot-color-success-950: var(--hot-color-cyan-950);
+  --hot-color-success-900: var(--hot-color-cyan-900);
+  --hot-color-success-800: var(--hot-color-cyan-800);
+  --hot-color-success-700: var(--hot-color-cyan-700);
+  --hot-color-success-600: var(--hot-color-cyan-600);
+  --hot-color-success-500: var(--hot-color-cyan-500);
+  --hot-color-success-400: var(--hot-color-cyan-400);
+  --hot-color-success-300: var(--hot-color-cyan-300);
+  --hot-color-success-200: var(--hot-color-cyan-200);
+  --hot-color-success-100: var(--hot-color-cyan-100);
+  --hot-color-success-50: var(--hot-color-cyan-50);
+
   --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);
@@ -138,67 +161,37 @@
   --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 - system sans, no webfonts. See https://docs.hotosm.org/decisions/0014-system-fonts */
+  /* Fonts - Archivo / Barlow (HOT brand) for Latin, then named fallbacks:
+     Helvetica (Apple) and Noto (Android / ChromeOS) cover most other scripts.
+     Add :lang() rules only when a new language needs them, after testing.
+     See https://docs.hotosm.org/decisions/0014-ui-fonts */
   --hot-font-sans:
-    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --hot-font-sans-variant: var(--hot-font-sans);
-  --hot-font-sans-variant-condensed: var(--hot-font-sans);
-  --hot-font-serif: Georgia, "Times New Roman", serif;
+    "Archivo", Helvetica, Noto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    sans-serif, system-ui;
+  --hot-font-sans-variant:
+    "Barlow", Helvetica, Noto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif,
+    system-ui;
+  --hot-font-sans-variant-condensed:
+    "Barlow Condensed", Helvetica, Noto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    sans-serif, system-ui;
+  --hot-font-serif: Georgia, "Times New Roman", "Noto Sans", serif, system-ui;
   --hot-font-mono:
-    Menlo, Monaco, Consolas, "Courier New", monospace, Consolas, "Liberation Mono", Menlo, monospace;
+    Menlo, Monaco, Consolas, "Courier New", monospace, Consolas, "Liberation Mono", Menlo, system-ui;
 
   /* 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 */
+  --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;
@@ -215,49 +208,36 @@
 
   /* 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;
+  --hot-line-height-dense: 1.2;
+  --hot-line-height-normal: 1.4;
+  --hot-line-height-loose: 2;
+  --hot-line-height-looser: 2.4;
 
   /*
    * 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 */
+  --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-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-2x-large: 3rem; /* 48px */
+  --hot-border-radius-circle: 100%;
   --hot-border-radius-pill: 9999px;
 }