update interviewer sass @use statement to be at the top of the file;d…

…elete duplicate stylesheets

lib/interviewer/styles/main.scss

@@ -1,3 +1,4 @@
+@use '~~/lib/ui/styles/global/core/units';
 @import '~~/lib/ui/styles/_all';
 @import 'helpers/all';
 @import 'components/all';
@@ -7,7 +8,6 @@
 $font-path: '~~/lib/ui/assets/fonts';
 $image-path: '~~/lib/ui/assets/images';
 
-@use '~~/lib/ui/styles/global/core/units';
 
 // Remove touch and focus outlines
 * {

styles/globals.scss → styles/globals.css

@@ -1,11 +1,215 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/aspect-ratio';
+@plugin '@tailwindcss/container-queries';
+@plugin 'tailwindcss-animate';
+@plugin '@tailwindcss/typography';
+
+@theme {
+  --color-*: initial;
+  --color-neon-coral: hsl(var(--neon-coral));
+  --color-neon-coral-dark: hsl(var(--neon-coral--dark));
+
+  --color-sea-green: hsl(var(--sea-green));
+  --color-sea-green-dark: hsl(var(--sea-green--dark));
+
+  --color-slate-blue: hsl(var(--slate-blue));
+  --color-slate-blue-dark: hsl(var(--slate-blue--dark));
+
+  --color-navy-taupe: hsl(var(--navy-taupe));
+  --color-navy-taupe-dark: hsl(var(--navy-taupe--dark));
+
+  --color-cyber-grape: hsl(var(--cyber-grape));
+  --color-cyber-grape-dark: hsl(var(--cyber-grape--dark));
+
+  --color-mustard: hsl(var(--mustard));
+  --color-mustard-dark: hsl(var(--mustard--dark));
+
+  --color-rich-black: hsl(var(--rich-black));
+  --color-rich-black-dark: hsl(var(--rich-black--dark));
+
+  --color-charcoal: hsl(var(--charcoal));
+  --color-charcoal-dark: hsl(var(--charcoal--dark));
+
+  --color-platinum: hsl(var(--platinum));
+  --color-platinum-dark: hsl(var(--platinum--dark));
+
+  --color-sea-serpent: hsl(var(--sea-serpent));
+  --color-sea-serpent-dark: hsl(var(--sea-serpent--dark));
+
+  --color-purple-pizazz: hsl(var(--purple-pizazz));
+  --color-purple-pizazz-dark: hsl(var(--purple-pizazz--dark));
+
+  --color-paradise-pink: hsl(var(--paradise-pink));
+  --color-paradise-pink-dark: hsl(var(--paradise-pink--dark));
+
+  --color-cerulean-blue: hsl(var(--cerulean-blue));
+  --color-cerulean-blue-dark: hsl(var(--cerulean-blue--dark));
+
+  --color-kiwi: hsl(var(--kiwi));
+  --color-kiwi-dark: hsl(var(--kiwi--dark));
+
+  --color-neon-carrot: hsl(var(--neon-carrot));
+  --color-neon-carrot-dark: hsl(var(--neon-carrot--dark));
+
+  --color-barbie-pink: hsl(var(--barbie-pink));
+  --color-barbie-pink-dark: hsl(var(--barbie-pink--dark));
+
+  --color-tomato: hsl(var(--tomato));
+  --color-tomato-dark: hsl(var(--tomato--dark));
+
+  --color-transparent: transparent;
+  --color-white: hsl(var(--white));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-panel: hsl(var(--panel));
+  --color-panel-foreground: hsl(var(--foreground));
+
+  --color-input: hsl(var(--input));
+  --color-input-foreground: hsl(var(--input-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-link: hsl(var(--link));
+
+  --radius-*: initial;
+  --radius-none: 0px;
+  --radius-sm: 0.125rem;
+  --radius: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+  --radius-input: 0.75rem;
+
+  --animate-wiggle: wiggle 1s ease-in-out infinite;
+  --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-indeterminate-progress-bar: indeterminate-progress-bar 1s infinite
+    linear;
+  --animate-background-gradient: background-gradient 5s infinite ease-in-out;
+
+  --transform-origin-left-right: 0% 50%;
+
+  @keyframes wiggle {
+    0%,
+    100% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(3deg);
+    }
+  }
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes indeterminate-progress-bar {
+    0% {
+      transform: translateX(0) scaleX(0);
+    }
+    40% {
+      transform: translateX(0) scaleX(0.4);
+    }
+    100% {
+      transform: translateX(100%) scaleX(0.5);
+    }
+  }
+  @keyframes background-gradient {
+    0%,
+    50% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+  @keyframes shake {
+    10%,
+    90% {
+      transform: translate3d(-1px, 0, 0);
+    }
+    20%,
+    80% {
+      transform: translate3d(2px, 0, 0);
+    }
+    30%,
+    50%,
+    70% {
+      transform: translate3d(-4px, 0, 0);
+    }
+    40%,
+    60% {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-platinum-dark, currentColor);
+  }
+}
 
 @layer base {
   :root {
     /* UI Colors */
-    // To generate dark color variants, subtract 5% from the lightness.
+    /* To generate dark color variants, subtract 5% from the lightness. */
     --dark-mod: 5%;
     --neon-coral-hue: 342;
     --neon-coral-saturation: 76.9%;
@@ -142,7 +346,7 @@
 
     --white: 0 0% 100%;
 
-    // Semantic slots
+    /* Semantic slots */
     --background: var(--platinum);
     --foreground: var(--cyber-grape);
 
@@ -190,16 +394,12 @@
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
   body {
     @apply bg-background text-foreground;
     font-family: 'Open Sans', sans-serif;
   }
 
-  // These two tags are semantic, so I think its okay to apply styles to them
-  // directly in the global styles.
+  /* These two tags are semantic, so I think its okay to apply styles to them directly in the global styles. */
   strong {
     @apply font-extrabold;
   }

styles/interview.scss

@@ -1,10 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-// Interview specific stylesheet?
-
-// $font-path: '~~/lib/ui/assets/fonts';
-// $image-path: '~~/lib/ui/assets/images';
-
 @import '../lib/interviewer/styles/main.scss';