Add Heliotrope font and site accents

sites/art/src/styles/global.css

@@ -5,10 +5,45 @@
 
 @variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 @theme {
+  --font-heliotrope:
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-inter:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen;
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-sans:
     "Hubot Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -162,28 +197,28 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 4%;
 
-    --primary: 240 77% 25%;
-    --primary-900: 240 70% 16%;
+    --primary: 212 45% 49%;
+    --primary-900: 214 45% 32%;
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 96%;
-    --secondary-foreground: 240 100% 31%;
+    --secondary-foreground: 212 42% 38%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 49%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 240 26% 46%;
+    --accent: 212 58% 94%;
+    --accent-foreground: 212 42% 38%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
     --border: 0 0% 0% / 0.09;
     --input: 240 6% 23%;
-    --ring: 240 10% 4%;
+    --ring: 212 45% 49%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 227 81% 67%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 66%;
+    --primary-gradient: 212 54% 65%;
+    --secondary-gradient: 230 44% 76%;
+    --tertiary-gradient: 190 42% 72%;
   }
 
   .dark {
@@ -194,28 +229,28 @@
     --popover: 240 10% 4%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 227 81% 67%;
-    --primary-900: 227 81% 75%;
+    --primary: 212 60% 74%;
+    --primary-900: 212 62% 84%;
     --primary-foreground: 240 10% 4%;
     --secondary: 240 6% 10%;
-    --secondary-foreground: 227 81% 67%;
+    --secondary-foreground: 212 60% 74%;
     --muted: 240 6% 10%;
     --muted-foreground: 0 0% 63%;
     --accent: 240 6% 10%;
-    --accent-foreground: 227 81% 67%;
+    --accent-foreground: 212 60% 74%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 100% / 0.1;
     --input: 0 0% 98%;
-    --ring: 227 81% 67%;
+    --ring: 212 60% 74%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 76%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 240 77% 25%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 33%;
+    --primary-gradient: 212 45% 49%;
+    --secondary-gradient: 230 36% 48%;
+    --tertiary-gradient: 190 36% 44%;
   }
 }
 

sites/poetry/src/styles/global.css

@@ -5,10 +5,45 @@
 
 @variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 @theme {
+  --font-heliotrope:
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-inter:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen;
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-sans:
     "Hubot Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -162,28 +197,28 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 4%;
 
-    --primary: 240 77% 25%;
-    --primary-900: 240 70% 16%;
+    --primary: 188 46% 39%;
+    --primary-900: 188 47% 26%;
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 96%;
-    --secondary-foreground: 240 100% 31%;
+    --secondary-foreground: 188 44% 34%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 49%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 240 26% 46%;
+    --accent: 187 50% 93%;
+    --accent-foreground: 188 44% 34%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
     --border: 0 0% 0% / 0.09;
     --input: 240 6% 23%;
-    --ring: 240 10% 4%;
+    --ring: 188 46% 39%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 227 81% 67%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 66%;
+    --primary-gradient: 188 50% 55%;
+    --secondary-gradient: 202 42% 68%;
+    --tertiary-gradient: 174 41% 70%;
   }
 
   .dark {
@@ -194,28 +229,28 @@
     --popover: 240 10% 4%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 227 81% 67%;
-    --primary-900: 227 81% 75%;
+    --primary: 188 55% 68%;
+    --primary-900: 188 58% 78%;
     --primary-foreground: 240 10% 4%;
     --secondary: 240 6% 10%;
-    --secondary-foreground: 227 81% 67%;
+    --secondary-foreground: 188 55% 68%;
     --muted: 240 6% 10%;
     --muted-foreground: 0 0% 63%;
     --accent: 240 6% 10%;
-    --accent-foreground: 227 81% 67%;
+    --accent-foreground: 188 55% 68%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 100% / 0.1;
     --input: 0 0% 98%;
-    --ring: 227 81% 67%;
+    --ring: 188 55% 68%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 76%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 240 77% 25%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 33%;
+    --primary-gradient: 188 46% 39%;
+    --secondary-gradient: 202 36% 44%;
+    --tertiary-gradient: 174 36% 40%;
   }
 }
 

sites/puzzles/src/styles/global.css

@@ -5,10 +5,45 @@
 
 @variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 @theme {
+  --font-heliotrope:
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-inter:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen;
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-sans:
     "Hubot Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -162,28 +197,28 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 4%;
 
-    --primary: 240 77% 25%;
-    --primary-900: 240 70% 16%;
+    --primary: 0 53% 58%;
+    --primary-900: 0 40% 38%;
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 96%;
-    --secondary-foreground: 240 100% 31%;
+    --secondary-foreground: 0 43% 46%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 49%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 240 26% 46%;
+    --accent: 0 47% 94%;
+    --accent-foreground: 0 43% 46%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
     --border: 0 0% 0% / 0.09;
     --input: 240 6% 23%;
-    --ring: 240 10% 4%;
+    --ring: 0 53% 58%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 227 81% 67%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 66%;
+    --primary-gradient: 0 46% 62%;
+    --secondary-gradient: 18 42% 70%;
+    --tertiary-gradient: 348 36% 72%;
   }
 
   .dark {
@@ -194,28 +229,28 @@
     --popover: 240 10% 4%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 227 81% 67%;
-    --primary-900: 227 81% 75%;
+    --primary: 0 58% 72%;
+    --primary-900: 0 60% 82%;
     --primary-foreground: 240 10% 4%;
     --secondary: 240 6% 10%;
-    --secondary-foreground: 227 81% 67%;
+    --secondary-foreground: 0 58% 72%;
     --muted: 240 6% 10%;
     --muted-foreground: 0 0% 63%;
     --accent: 240 6% 10%;
-    --accent-foreground: 227 81% 67%;
+    --accent-foreground: 0 58% 72%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 100% / 0.1;
     --input: 0 0% 98%;
-    --ring: 227 81% 67%;
+    --ring: 0 58% 72%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 76%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 240 77% 25%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 33%;
+    --primary-gradient: 0 53% 58%;
+    --secondary-gradient: 18 36% 44%;
+    --tertiary-gradient: 348 34% 42%;
   }
 }
 

sites/reflections/src/styles/global.css

@@ -5,10 +5,45 @@
 
 @variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 @theme {
+  --font-heliotrope:
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-inter:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen;
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-sans:
     "Hubot Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -162,28 +197,28 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 4%;
 
-    --primary: 240 77% 25%;
-    --primary-900: 240 70% 16%;
+    --primary: 146 38% 34%;
+    --primary-900: 146 37% 22%;
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 96%;
-    --secondary-foreground: 240 100% 31%;
+    --secondary-foreground: 146 34% 32%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 49%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 240 26% 46%;
+    --accent: 146 31% 92%;
+    --accent-foreground: 146 34% 32%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
     --border: 0 0% 0% / 0.09;
     --input: 240 6% 23%;
-    --ring: 240 10% 4%;
+    --ring: 146 38% 34%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 227 81% 67%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 66%;
+    --primary-gradient: 146 36% 49%;
+    --secondary-gradient: 166 31% 63%;
+    --tertiary-gradient: 126 30% 70%;
   }
 
   .dark {
@@ -194,28 +229,28 @@
     --popover: 240 10% 4%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 227 81% 67%;
-    --primary-900: 227 81% 75%;
+    --primary: 146 42% 66%;
+    --primary-900: 146 43% 76%;
     --primary-foreground: 240 10% 4%;
     --secondary: 240 6% 10%;
-    --secondary-foreground: 227 81% 67%;
+    --secondary-foreground: 146 42% 66%;
     --muted: 240 6% 10%;
     --muted-foreground: 0 0% 63%;
     --accent: 240 6% 10%;
-    --accent-foreground: 227 81% 67%;
+    --accent-foreground: 146 42% 66%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 100% / 0.1;
     --input: 0 0% 98%;
-    --ring: 227 81% 67%;
+    --ring: 146 42% 66%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 76%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 240 77% 25%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 33%;
+    --primary-gradient: 146 38% 34%;
+    --secondary-gradient: 166 31% 40%;
+    --tertiary-gradient: 126 30% 35%;
   }
 }
 

sites/research/src/styles/global.css

@@ -5,10 +5,45 @@
 
 @variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 @theme {
+  --font-heliotrope:
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-inter:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen;
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-sans:
     "Hubot Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -162,28 +197,28 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 4%;
 
-    --primary: 240 77% 25%;
-    --primary-900: 240 70% 16%;
+    --primary: 268 38% 34%;
+    --primary-900: 268 37% 22%;
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 96%;
-    --secondary-foreground: 240 100% 31%;
+    --secondary-foreground: 268 34% 35%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 49%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 240 26% 46%;
+    --accent: 268 38% 94%;
+    --accent-foreground: 268 34% 35%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
     --border: 0 0% 0% / 0.09;
     --input: 240 6% 23%;
-    --ring: 240 10% 4%;
+    --ring: 268 38% 34%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 227 81% 67%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 66%;
+    --primary-gradient: 268 38% 52%;
+    --secondary-gradient: 284 32% 66%;
+    --tertiary-gradient: 252 36% 72%;
   }
 
   .dark {
@@ -194,28 +229,28 @@
     --popover: 240 10% 4%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 227 81% 67%;
-    --primary-900: 227 81% 75%;
+    --primary: 268 48% 72%;
+    --primary-900: 268 48% 82%;
     --primary-foreground: 240 10% 4%;
     --secondary: 240 6% 10%;
-    --secondary-foreground: 227 81% 67%;
+    --secondary-foreground: 268 48% 72%;
     --muted: 240 6% 10%;
     --muted-foreground: 0 0% 63%;
     --accent: 240 6% 10%;
-    --accent-foreground: 227 81% 67%;
+    --accent-foreground: 268 48% 72%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 100% / 0.1;
     --input: 0 0% 98%;
-    --ring: 227 81% 67%;
+    --ring: 268 48% 72%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 76%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 240 77% 25%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 33%;
+    --primary-gradient: 268 38% 34%;
+    --secondary-gradient: 284 32% 42%;
+    --tertiary-gradient: 252 36% 36%;
   }
 }
 

sites/reviews/src/styles/global.css

@@ -5,10 +5,45 @@
 
 @variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 @theme {
+  --font-heliotrope:
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-inter:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen;
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-sans:
     "Hubot Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -162,28 +197,28 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 4%;
 
-    --primary: 240 77% 25%;
-    --primary-900: 240 70% 16%;
+    --primary: 24 68% 43%;
+    --primary-900: 24 66% 27%;
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 96%;
-    --secondary-foreground: 240 100% 31%;
+    --secondary-foreground: 24 54% 36%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 49%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 240 26% 46%;
+    --accent: 32 58% 93%;
+    --accent-foreground: 24 54% 36%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
     --border: 0 0% 0% / 0.09;
     --input: 240 6% 23%;
-    --ring: 240 10% 4%;
+    --ring: 24 68% 43%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 227 81% 67%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 66%;
+    --primary-gradient: 24 68% 54%;
+    --secondary-gradient: 38 52% 68%;
+    --tertiary-gradient: 14 45% 66%;
   }
 
   .dark {
@@ -194,28 +229,28 @@
     --popover: 240 10% 4%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 227 81% 67%;
-    --primary-900: 227 81% 75%;
+    --primary: 24 70% 68%;
+    --primary-900: 24 72% 78%;
     --primary-foreground: 240 10% 4%;
     --secondary: 240 6% 10%;
-    --secondary-foreground: 227 81% 67%;
+    --secondary-foreground: 24 70% 68%;
     --muted: 240 6% 10%;
     --muted-foreground: 0 0% 63%;
     --accent: 240 6% 10%;
-    --accent-foreground: 227 81% 67%;
+    --accent-foreground: 24 70% 68%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 100% / 0.1;
     --input: 0 0% 98%;
-    --ring: 227 81% 67%;
+    --ring: 24 70% 68%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 76%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 240 77% 25%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 33%;
+    --primary-gradient: 24 68% 43%;
+    --secondary-gradient: 38 42% 42%;
+    --tertiary-gradient: 14 38% 38%;
   }
 }
 

sites/vibes/src/styles/global.css

@@ -5,10 +5,45 @@
 
 @variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Heliotrope";
+  src: url("/webfonts/heliotrope_3_bold_italic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
 @theme {
+  --font-heliotrope:
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-inter:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen;
+    "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen;
   --font-sans:
     "Hubot Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -162,28 +197,28 @@
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 4%;
 
-    --primary: 240 77% 25%;
-    --primary-900: 240 70% 16%;
+    --primary: 294 42% 48%;
+    --primary-900: 294 42% 30%;
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 96%;
-    --secondary-foreground: 240 100% 31%;
+    --secondary-foreground: 294 36% 40%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 49%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 240 26% 46%;
+    --accent: 294 45% 94%;
+    --accent-foreground: 294 36% 40%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
     --border: 0 0% 0% / 0.09;
     --input: 240 6% 23%;
-    --ring: 240 10% 4%;
+    --ring: 294 42% 48%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 227 81% 67%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 66%;
+    --primary-gradient: 294 45% 62%;
+    --secondary-gradient: 322 44% 70%;
+    --tertiary-gradient: 266 42% 72%;
   }
 
   .dark {
@@ -194,28 +229,28 @@
     --popover: 240 10% 4%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 227 81% 67%;
-    --primary-900: 227 81% 75%;
+    --primary: 294 52% 72%;
+    --primary-900: 294 55% 82%;
     --primary-foreground: 240 10% 4%;
     --secondary: 240 6% 10%;
-    --secondary-foreground: 227 81% 67%;
+    --secondary-foreground: 294 52% 72%;
     --muted: 240 6% 10%;
     --muted-foreground: 0 0% 63%;
     --accent: 240 6% 10%;
-    --accent-foreground: 227 81% 67%;
+    --accent-foreground: 294 52% 72%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 100% / 0.1;
     --input: 0 0% 98%;
-    --ring: 227 81% 67%;
+    --ring: 294 52% 72%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 76%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --primary-gradient: 240 77% 25%;
-    --secondary-gradient: 125 51% 53%;
-    --tertiary-gradient: 318 58% 33%;
+    --primary-gradient: 294 42% 48%;
+    --secondary-gradient: 322 36% 46%;
+    --tertiary-gradient: 266 36% 42%;
   }
 }