diff --git a/src/docs-main.tsx b/src/docs-main.tsx
index 36252c1..7ca1a98 100644
--- a/src/docs-main.tsx
+++ b/src/docs-main.tsx
@@ -1,21 +1,19 @@
-import { RouterProvider, createRouter } from '@tanstack/react-router'
-import { routeTree } from './docs/routeTree.gen'
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './docs/routeTree.gen';
 
+const basepath = import.meta.env.MODE === 'github-pages' ? '/sci-comp-ui' : '';
 
-const basepath =
-  import.meta.env.MODE === 'github-pages' ? '/sci-comp-ui' : ''
-
-
-const router = createRouter({ routeTree, basepath })
+const router = createRouter({ routeTree, basepath });
 
 declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router
-  }
+    interface Register {
+        router: typeof router;
+    }
 }
 
-import './styles/globals.css'
+import './styles/index.css';
+import './styles/theme.css';
 
 export default function DocsApp() {
-  return <RouterProvider router={router} />
+    return <RouterProvider router={router} />;
 }
diff --git a/src/index.ts b/src/index.ts
index 0645b42..0254480 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
-import './styles/globals.css'
-
-export * from './ui'
-export { cn } from './lib/utils'
+import './styles/index.css';
+import './styles/theme.css';
 
+export * from './ui';
+export { cn } from './lib/utils';
diff --git a/src/main.tsx b/src/main.tsx
index ba1ac2f..6dfac5f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,27 +1,27 @@
-import { StrictMode } from 'react'
-import ReactDOM from 'react-dom/client'
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
 
 // Only import router-related code when building docs
-const isDocs = import.meta.env.MODE === 'docs' || import.meta.env.MODE === 'github-pages'
+const isDocs = import.meta.env.MODE === 'docs' || import.meta.env.MODE === 'github-pages';
 
 if (isDocs) {
-  // Docs build - include router
-  import('./docs-main').then(({ default: DocsApp }) => {
-    const rootElement = document.getElementById('root')!
-    if (!rootElement.innerHTML) {
-      const root = ReactDOM.createRoot(rootElement)
-      root.render(
-        <StrictMode>
-          <DocsApp />
-        </StrictMode>,
-      )
-    }
-  })
+    // Docs build - include router
+    import('./docs-main').then(({ default: DocsApp }) => {
+        const rootElement = document.getElementById('root')!;
+        if (!rootElement.innerHTML) {
+            const root = ReactDOM.createRoot(rootElement);
+            root.render(
+                <StrictMode>
+                    <DocsApp />
+                </StrictMode>
+            );
+        }
+    });
 } else {
-  // Library build - simple entry point
-  import('./styles/globals.css')
-  
-  // For library builds, we just need to ensure styles are loaded
-  // The actual components are exported from src/index.ts
-  console.log('SciComp UI Library loaded')
-}
\ No newline at end of file
+    // Library build - simple entry point
+    import('./styles/theme.css');
+
+    // For library builds, we just need to ensure styles are loaded
+    // The actual components are exported from src/index.ts
+    console.log('SciComp UI Library loaded');
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
deleted file mode 100644
index cc700ad..0000000
--- a/src/styles/globals.css
+++ /dev/null
@@ -1,138 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "./src/**/*.{js,ts,jsx,tsx}";
-@source "./index.html";
-
-@custom-variant dark (&:is(.dark *));
- 
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.623 0.214 259.815);
-  --primary-foreground: oklch(0.97 0.014 254.604);
-  --warning:  oklch(0.795 0.184 86.047);
-  --warning-foreground: oklch(0.421 0.095 57.708);
-  --success: oklch(0.723 0.219 149.579);
-  --success-foreground: oklch(0.982 0.018 155.826);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.97 0.0187 8.55);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
- 
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.623 0.214 259.815);
-  --primary-foreground: oklch(0.97 0.014 254.604);
-  --warning: oklch(0.795 0.184 86.047);
-  --warning-foreground: oklch(0.421 0.095 57.708);
-  --success: oklch(0.723 0.219 149.579);
-  --success-foreground: oklch(0.982 0.018 155.826);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
- 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
- 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..e455c4e
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,250 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@source "./src/**/*.{js,ts,jsx,tsx}";
+@source "./index.html";
+
+@custom-variant dark (&:is(.dark *));
+
+/* TAILWINDCSS VARIABLES */
+@theme {
+    /* BREAKPOINTS */
+    --breakpoint-sm: 37.5rem; /* ≥ 600px */
+    --breakpoint-md: 47.5rem; /* ≥ 760px */
+    --breakpoint-lg: 60rem; /* ≥ 960px */
+    --breakpoint-xl: 80rem; /* ≥ 1280px */
+    --breakpoint-2xl: 90rem; /* ≥ 1440px */
+    --breakpoint-3xl: 120rem; /* ≥ 1920px */
+    --breakpoint-4xl: 160rem; /* ≥ 2560px */
+    --breakpoint-5xl: 200rem; /* ≥ 3200px */
+
+    /* ANSTO PALETTE */
+    --color-ansto-grey: oklch(0.4638 0.0035 264.53);
+    --color-ansto-flag: oklch(0.3462 0.0929 259.73);
+    --color-ansto-blue: oklch(0.5501 0.1441 246.83);
+    --color-ansto-seafoam: oklch(0.7399 0.1088 195.06);
+    --color-ansto-yellow: oklch(0.8132 0.1516 73.51);
+    --color-ansto-purple: oklch(0.4633 0.0987 312.91);
+    --color-ansto-green: oklch(0.5077 0.1328 152.26);
+
+    /* GLOBAL PALETTE */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0.2178 0 0);
+    --color-grey: var(--color-ansto-grey);
+    --color-text: oklch(0.4017 0 0);
+    --color-dev: oklch(0.6565 0.2349 13.34);
+
+    /* USER PALETTE */
+    --color-gradient: var(--color-ansto-blue);
+    --color-gradient-light: var(--color-ansto-seafoam);
+    --color-gradient-medium: var(--color-ansto-blue);
+    --color-gradient-dark: var(--color-ansto-flag);
+
+    /* ADMIN PALETTE */
+    --color-admin: var(--color-ansto-purple);
+    --color-admin-light: oklch(0.5135 0.1856 321.59);
+    --color-admin-medium: var(--color-ansto-purple);
+    --color-admin-dark: oklch(0.3258 0.0773 298.83);
+
+    /* DISABLED PALETTE */
+    --color-disabled: var(--color-disabled-medium);
+    --color-disabled-light: color-mix(in oklch, var(--color-grey) 30%, #fff);
+    --color-disabled-medium: color-mix(in oklch, var(--color-grey) 70%, #fff);
+    --color-disabled-dark: var(--color-grey);
+
+    /* ALERT PALETTE */
+    --color-alert: oklch(0.6083 0.209 27.03);
+    --color-alert-light: color-mix(in oklch, var(--color-alert) 15%, #fff);
+    --color-alert-medium: var(--color-alert);
+    --color-alert-dark: oklch(0.5016 0.1887 27.48);
+
+    /* WARNING PALETTE */
+    --color-warning: var(--color-ansto-yellow);
+    --color-warning-light: color-mix(in oklch, var(--color-warning) 15%, #fff);
+    --color-warning-medium: var(--color-ansto-yellow);
+    --color-warning-dark: oklch(0.7244 0.1603 66.17);
+
+    /* SUCCESS PALETTE */
+    --color-success: var(--color-ansto-green);
+    --color-success-medium: var(--color-ansto-green);
+
+    /* FONTS */
+    --font-fira-sans: 'Fira Sans', 'Tahoma', 'sans-serif', ui-sans-serif, system-ui, sans-serif;
+    --font-poppins: 'Poppins', 'Tahoma', ui-sans-serif, system-ui, sans-serif;
+    --font-sans: var(--font-fira-sans);
+
+    /* TYPOGRAPHY */
+    --text-xs: 0.75rem; /* 12px */
+    --text-xs--line-height: 1.834em; /* 22/12 */
+    --text-sm: 0.875rem; /* 14px */
+    --text-sm--line-height: 1.572em; /* 22/14 */
+    --text-base: 1rem; /* 16px */
+    --text-base--line-height: 1.5em; /* 24/16 */
+    --text-base--font-weight: var(--font-weight-light);
+    --text-lg: 1.125rem; /* 18px */
+    --text-lg--line-height: 1.444em; /* 26/18*/
+    --text-lg--font-weight: var(--font-weight-light);
+
+    /* TRANSITION DURATIONS */
+    --duration-shorter: 80ms;
+    --duration-short: 160ms;
+    --duration-default: 240ms;
+    --duration-long: 320ms;
+    --duration-longer: 400ms;
+
+    /* SHADOWS */
+    --shadow-box:
+        0 0 4px 0 --alpha(var(--color-gradient-light) / 0.2), 0 0 2px 0 --alpha(var(--color-disabled-medium) / 0.3);
+    --shadow-button:
+        0 1px 1px 0 --alpha(var(--color-disabled-medium) / 0.3), 0 0 2px 0 --alpha(var(--color-disabled-medium) / 0.3);
+    --shadow-button-focus:
+        0 1px 1px 0 --alpha(var(--color-disabled-medium) / 0.3), 0 0 2px 0 --alpha(var(--color-disabled-medium) / 0.3),
+        0 0 2px 0 --alpha(var(--color-disabled-medium) / 0.3);
+
+    /* Z INDEX */
+    --z-input: 2;
+    --z-menu: 100;
+    --z-tooltip: 200;
+    --z-overlay: 300;
+}
+
+/* RADIX UI VARIABLES */
+@theme {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.623 0.214 259.815);
+    --primary-foreground: oklch(0.97 0.014 254.604);
+    --warning: oklch(0.795 0.184 86.047);
+    --warning-foreground: oklch(0.421 0.095 57.708);
+    --success: oklch(0.723 0.219 149.579);
+    --success-foreground: oklch(0.982 0.018 155.826);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.97 0.0187 8.55);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+/* RADIX UI VARIABLES */
+@variant dark {
+    @theme {
+        --background: oklch(0.145 0 0);
+        --foreground: oklch(0.985 0 0);
+        --card: oklch(0.145 0 0);
+        --card-foreground: oklch(0.985 0 0);
+        --popover: oklch(0.145 0 0);
+        --popover-foreground: oklch(0.985 0 0);
+        --primary: oklch(0.623 0.214 259.815);
+        --primary-foreground: oklch(0.97 0.014 254.604);
+        --warning: oklch(0.795 0.184 86.047);
+        --warning-foreground: oklch(0.421 0.095 57.708);
+        --success: oklch(0.723 0.219 149.579);
+        --success-foreground: oklch(0.982 0.018 155.826);
+        --secondary: oklch(0.269 0 0);
+        --secondary-foreground: oklch(0.985 0 0);
+        --muted: oklch(0.269 0 0);
+        --muted-foreground: oklch(0.708 0 0);
+        --accent: oklch(0.269 0 0);
+        --accent-foreground: oklch(0.985 0 0);
+        --destructive: oklch(0.396 0.141 25.723);
+        --destructive-foreground: oklch(0.637 0.237 25.331);
+        --border: oklch(0.269 0 0);
+        --input: oklch(0.269 0 0);
+        --ring: oklch(0.439 0 0);
+        --chart-1: oklch(0.488 0.243 264.376);
+        --chart-2: oklch(0.696 0.17 162.48);
+        --chart-3: oklch(0.769 0.188 70.08);
+        --chart-4: oklch(0.627 0.265 303.9);
+        --chart-5: oklch(0.645 0.246 16.439);
+        --sidebar: oklch(0.205 0 0);
+        --sidebar-foreground: oklch(0.985 0 0);
+        --sidebar-primary: oklch(0.488 0.243 264.376);
+        --sidebar-primary-foreground: oklch(0.985 0 0);
+        --sidebar-accent: oklch(0.269 0 0);
+        --sidebar-accent-foreground: oklch(0.985 0 0);
+        --sidebar-border: oklch(0.269 0 0);
+        --sidebar-ring: oklch(0.439 0 0);
+    }
+}
+
+/* RADIX UI VARIABLES */
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+    /* Font Kern */
+    :root {
+        -moz-font-feature-settings: 'kern', 'mgrk';
+        -moz-font-feature-settings: 'kern=1', 'mgrk=1';
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-feature-settings: 'kern', 'mgrk';
+        -webkit-font-smoothing: antialiased;
+        color-scheme: light dark;
+        font-feature-settings: 'kern', 'mgrk';
+        text-rendering: optimizeLegibility;
+    }
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..e455c4e
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,250 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@source "./src/**/*.{js,ts,jsx,tsx}";
+@source "./index.html";
+
+@custom-variant dark (&:is(.dark *));
+
+/* TAILWINDCSS VARIABLES */
+@theme {
+    /* BREAKPOINTS */
+    --breakpoint-sm: 37.5rem; /* ≥ 600px */
+    --breakpoint-md: 47.5rem; /* ≥ 760px */
+    --breakpoint-lg: 60rem; /* ≥ 960px */
+    --breakpoint-xl: 80rem; /* ≥ 1280px */
+    --breakpoint-2xl: 90rem; /* ≥ 1440px */
+    --breakpoint-3xl: 120rem; /* ≥ 1920px */
+    --breakpoint-4xl: 160rem; /* ≥ 2560px */
+    --breakpoint-5xl: 200rem; /* ≥ 3200px */
+
+    /* ANSTO PALETTE */
+    --color-ansto-grey: oklch(0.4638 0.0035 264.53);
+    --color-ansto-flag: oklch(0.3462 0.0929 259.73);
+    --color-ansto-blue: oklch(0.5501 0.1441 246.83);
+    --color-ansto-seafoam: oklch(0.7399 0.1088 195.06);
+    --color-ansto-yellow: oklch(0.8132 0.1516 73.51);
+    --color-ansto-purple: oklch(0.4633 0.0987 312.91);
+    --color-ansto-green: oklch(0.5077 0.1328 152.26);
+
+    /* GLOBAL PALETTE */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0.2178 0 0);
+    --color-grey: var(--color-ansto-grey);
+    --color-text: oklch(0.4017 0 0);
+    --color-dev: oklch(0.6565 0.2349 13.34);
+
+    /* USER PALETTE */
+    --color-gradient: var(--color-ansto-blue);
+    --color-gradient-light: var(--color-ansto-seafoam);
+    --color-gradient-medium: var(--color-ansto-blue);
+    --color-gradient-dark: var(--color-ansto-flag);
+
+    /* ADMIN PALETTE */
+    --color-admin: var(--color-ansto-purple);
+    --color-admin-light: oklch(0.5135 0.1856 321.59);
+    --color-admin-medium: var(--color-ansto-purple);
+    --color-admin-dark: oklch(0.3258 0.0773 298.83);
+
+    /* DISABLED PALETTE */
+    --color-disabled: var(--color-disabled-medium);
+    --color-disabled-light: color-mix(in oklch, var(--color-grey) 30%, #fff);
+    --color-disabled-medium: color-mix(in oklch, var(--color-grey) 70%, #fff);
+    --color-disabled-dark: var(--color-grey);
+
+    /* ALERT PALETTE */
+    --color-alert: oklch(0.6083 0.209 27.03);
+    --color-alert-light: color-mix(in oklch, var(--color-alert) 15%, #fff);
+    --color-alert-medium: var(--color-alert);
+    --color-alert-dark: oklch(0.5016 0.1887 27.48);
+
+    /* WARNING PALETTE */
+    --color-warning: var(--color-ansto-yellow);
+    --color-warning-light: color-mix(in oklch, var(--color-warning) 15%, #fff);
+    --color-warning-medium: var(--color-ansto-yellow);
+    --color-warning-dark: oklch(0.7244 0.1603 66.17);
+
+    /* SUCCESS PALETTE */
+    --color-success: var(--color-ansto-green);
+    --color-success-medium: var(--color-ansto-green);
+
+    /* FONTS */
+    --font-fira-sans: 'Fira Sans', 'Tahoma', 'sans-serif', ui-sans-serif, system-ui, sans-serif;
+    --font-poppins: 'Poppins', 'Tahoma', ui-sans-serif, system-ui, sans-serif;
+    --font-sans: var(--font-fira-sans);
+
+    /* TYPOGRAPHY */
+    --text-xs: 0.75rem; /* 12px */
+    --text-xs--line-height: 1.834em; /* 22/12 */
+    --text-sm: 0.875rem; /* 14px */
+    --text-sm--line-height: 1.572em; /* 22/14 */
+    --text-base: 1rem; /* 16px */
+    --text-base--line-height: 1.5em; /* 24/16 */
+    --text-base--font-weight: var(--font-weight-light);
+    --text-lg: 1.125rem; /* 18px */
+    --text-lg--line-height: 1.444em; /* 26/18*/
+    --text-lg--font-weight: var(--font-weight-light);
+
+    /* TRANSITION DURATIONS */
+    --duration-shorter: 80ms;
+    --duration-short: 160ms;
+    --duration-default: 240ms;
+    --duration-long: 320ms;
+    --duration-longer: 400ms;
+
+    /* SHADOWS */
+    --shadow-box:
+        0 0 4px 0 --alpha(var(--color-gradient-light) / 0.2), 0 0 2px 0 --alpha(var(--color-disabled-medium) / 0.3);
+    --shadow-button:
+        0 1px 1px 0 --alpha(var(--color-disabled-medium) / 0.3), 0 0 2px 0 --alpha(var(--color-disabled-medium) / 0.3);
+    --shadow-button-focus:
+        0 1px 1px 0 --alpha(var(--color-disabled-medium) / 0.3), 0 0 2px 0 --alpha(var(--color-disabled-medium) / 0.3),
+        0 0 2px 0 --alpha(var(--color-disabled-medium) / 0.3);
+
+    /* Z INDEX */
+    --z-input: 2;
+    --z-menu: 100;
+    --z-tooltip: 200;
+    --z-overlay: 300;
+}
+
+/* RADIX UI VARIABLES */
+@theme {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.623 0.214 259.815);
+    --primary-foreground: oklch(0.97 0.014 254.604);
+    --warning: oklch(0.795 0.184 86.047);
+    --warning-foreground: oklch(0.421 0.095 57.708);
+    --success: oklch(0.723 0.219 149.579);
+    --success-foreground: oklch(0.982 0.018 155.826);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.97 0.0187 8.55);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+/* RADIX UI VARIABLES */
+@variant dark {
+    @theme {
+        --background: oklch(0.145 0 0);
+        --foreground: oklch(0.985 0 0);
+        --card: oklch(0.145 0 0);
+        --card-foreground: oklch(0.985 0 0);
+        --popover: oklch(0.145 0 0);
+        --popover-foreground: oklch(0.985 0 0);
+        --primary: oklch(0.623 0.214 259.815);
+        --primary-foreground: oklch(0.97 0.014 254.604);
+        --warning: oklch(0.795 0.184 86.047);
+        --warning-foreground: oklch(0.421 0.095 57.708);
+        --success: oklch(0.723 0.219 149.579);
+        --success-foreground: oklch(0.982 0.018 155.826);
+        --secondary: oklch(0.269 0 0);
+        --secondary-foreground: oklch(0.985 0 0);
+        --muted: oklch(0.269 0 0);
+        --muted-foreground: oklch(0.708 0 0);
+        --accent: oklch(0.269 0 0);
+        --accent-foreground: oklch(0.985 0 0);
+        --destructive: oklch(0.396 0.141 25.723);
+        --destructive-foreground: oklch(0.637 0.237 25.331);
+        --border: oklch(0.269 0 0);
+        --input: oklch(0.269 0 0);
+        --ring: oklch(0.439 0 0);
+        --chart-1: oklch(0.488 0.243 264.376);
+        --chart-2: oklch(0.696 0.17 162.48);
+        --chart-3: oklch(0.769 0.188 70.08);
+        --chart-4: oklch(0.627 0.265 303.9);
+        --chart-5: oklch(0.645 0.246 16.439);
+        --sidebar: oklch(0.205 0 0);
+        --sidebar-foreground: oklch(0.985 0 0);
+        --sidebar-primary: oklch(0.488 0.243 264.376);
+        --sidebar-primary-foreground: oklch(0.985 0 0);
+        --sidebar-accent: oklch(0.269 0 0);
+        --sidebar-accent-foreground: oklch(0.985 0 0);
+        --sidebar-border: oklch(0.269 0 0);
+        --sidebar-ring: oklch(0.439 0 0);
+    }
+}
+
+/* RADIX UI VARIABLES */
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+    /* Font Kern */
+    :root {
+        -moz-font-feature-settings: 'kern', 'mgrk';
+        -moz-font-feature-settings: 'kern=1', 'mgrk=1';
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-feature-settings: 'kern', 'mgrk';
+        -webkit-font-smoothing: antialiased;
+        color-scheme: light dark;
+        font-feature-settings: 'kern', 'mgrk';
+        text-rendering: optimizeLegibility;
+    }
+}