diff --git a/DESIGN_TOKENS.md b/DESIGN_TOKENS.md
deleted file mode 100644
index 63627dd6..00000000
--- a/DESIGN_TOKENS.md
+++ /dev/null
@@ -1,267 +0,0 @@
-# Gnosis Design Tokens
-
-Shared design tokens from the Gnosis design system, aligned with Figma. These tokens are **framework-agnostic** and can be used in any project — React, Vue, Svelte, Angular, or vanilla JS/CSS.
-
-## Installation
-
-```bash
-npm install @epignosis_llc/gnosis
-```
-
-> **Note:** If your project does not use React, you can safely ignore the `react` and `react-dom` peer dependency warnings. The tokens entry point has zero React dependencies.
-
-## Usage
-
-### JavaScript / TypeScript
-
-Import tokens directly as JS objects. Works with any bundler (Vite, Webpack, Rollup, esbuild, etc.).
-
-```js
-import {
-  colors,
-  colorBase,
-  typography,
-  spacing,
-  borderRadius,
-  shadows,
-  breakpoints,
-  mediaQueries,
-  zIndex,
-  transitions,
-} from "@epignosis_llc/gnosis/tokens";
-```
-
-CommonJS is also supported:
-
-```js
-const { colors, spacing } = require("@epignosis_llc/gnosis/tokens");
-```
-
-TypeScript types are included automatically.
-
-### CSS Custom Properties
-
-Import the CSS file to get all tokens as CSS variables on `:root`.
-
-```js
-// In your app entry point
-import "@epignosis_llc/gnosis/tokens.css";
-```
-
-Or in CSS/SCSS:
-
-```css
-@import "@epignosis_llc/gnosis/tokens.css";
-```
-
-Then use the variables anywhere in your stylesheets:
-
-```css
-.my-button {
-  background-color: var(--color-primary-base);
-  border-radius: var(--border-radius-sm);
-  padding: var(--spacing-xs) var(--spacing-md);
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  transition: background-color var(--transition-fast);
-}
-```
-
-## Available Tokens
-
-### Colors
-
-Base colors and full palettes with 7 shades each (lightest, lighter, light, base, dark, darker, darkest).
-
-| Token | CSS Variable | Value |
-| --- | --- | --- |
-| `colorBase.primary` | `--color-base-primary` | `#0046AB` |
-| `colorBase.secondary` | `--color-base-secondary` | `#9EA5A9` |
-| `colorBase.green` | `--color-base-green` | `#1B7855` |
-| `colorBase.orange` | `--color-base-orange` | `#FF9C28` |
-| `colorBase.red` | `--color-base-red` | `#D12525` |
-| `colorBase.black` | `--color-base-black` | `#000000` |
-| `colorBase.white` | `--color-base-white` | `#FFFFFF` |
-
-Each palette color (primary, secondary, green, orange, red) has shades accessible as:
-
-```js
-colors.primary.lightest; // #247DFF
-colors.primary.base;     // #0046AB
-colors.primary.darkest;  // #001C44
-```
-
-```css
-var(--color-primary-lightest)  /* #247DFF */
-var(--color-primary-base)      /* #0046AB */
-var(--color-primary-darkest)   /* #001C44 */
-```
-
-### Typography
-
-| Token | CSS Variable | Value |
-| --- | --- | --- |
-| `typography.fontFamily.body` | `--font-family-body` | `"Mulish", Arial, sans-serif` |
-| `typography.fontSize.xxs` | `--font-size-xxs` | `0.5rem` (8px) |
-| `typography.fontSize.xs` | `--font-size-xs` | `0.75rem` (12px) |
-| `typography.fontSize.sm` | `--font-size-sm` | `0.875rem` (14px) |
-| `typography.fontSize.md` | `--font-size-md` | `1rem` (16px) |
-| `typography.fontSize.lg` | `--font-size-lg` | `1.125rem` (18px) |
-| `typography.fontSize.xl` | `--font-size-xl` | `1.375rem` (22px) |
-| `typography.fontSize["2xl"]` | `--font-size-2xl` | `1.75rem` (28px) |
-| `typography.fontSize["3xl"]` | `--font-size-3xl` | `2.125rem` (34px) |
-| `typography.fontWeight.regular` | `--font-weight-regular` | `400` |
-| `typography.fontWeight.semibold` | `--font-weight-semibold` | `600` |
-| `typography.fontWeight.bold` | `--font-weight-bold` | `700` |
-| `typography.fontWeight.extrabold` | `--font-weight-extrabold` | `800` |
-| `typography.lineHeight.base` | `--line-height-base` | `1.5715` |
-
-### Spacing
-
-| Token | CSS Variable | Value |
-| --- | --- | --- |
-| `spacing.none` | `--spacing-none` | `0` |
-| `spacing.xxs` | `--spacing-xxs` | `0.25rem` (4px) |
-| `spacing.xs` | `--spacing-xs` | `0.5rem` (8px) |
-| `spacing.sm` | `--spacing-sm` | `0.75rem` (12px) |
-| `spacing.md` | `--spacing-md` | `1rem` (16px) |
-| `spacing.lg` | `--spacing-lg` | `1.5rem` (24px) |
-| `spacing.xl` | `--spacing-xl` | `2rem` (32px) |
-
-### Border Radius
-
-| Token | CSS Variable | Value |
-| --- | --- | --- |
-| `borderRadius.none` | `--border-radius-none` | `0` |
-| `borderRadius.sm` | `--border-radius-sm` | `5px` |
-| `borderRadius.xl` | `--border-radius-xl` | `30px` |
-| `borderRadius.full` | `--border-radius-full` | `50%` |
-
-### Shadows
-
-| Token | CSS Variable | Value |
-| --- | --- | --- |
-| `shadows.sm` | `--shadow-sm` | `0 3px 6px #C1C5C8` |
-| `shadows.checkbox` | `--shadow-checkbox` | `0px 0px 0px 9px rgba(36, 125, 255, 0.25)` |
-
-### Breakpoints
-
-| Token | CSS Variable | Value |
-| --- | --- | --- |
-| `breakpoints.xs` | `--breakpoint-xs` | `320px` |
-| `breakpoints.sm` | `--breakpoint-sm` | `576px` |
-| `breakpoints.md` | `--breakpoint-md` | `768px` |
-| `breakpoints.lg` | `--breakpoint-lg` | `992px` |
-| `breakpoints.xl` | `--breakpoint-xl` | `1200px` |
-| `breakpoints.xxl` | `--breakpoint-xxl` | `1600px` |
-| `breakpoints["3xl"]` | `--breakpoint-3xl` | `1920px` |
-
-### Z-Index
-
-| Token | CSS Variable | Value |
-| --- | --- | --- |
-| `zIndex.base` | `--z-index-base` | `0` |
-| `zIndex.raised` | `--z-index-raised` | `1` |
-| `zIndex.overlay` | `--z-index-overlay` | `2` |
-| `zIndex.drawer` | `--z-index-drawer` | `3` |
-| `zIndex.dropdown` | `--z-index-dropdown` | `100` |
-| `zIndex.sidebar` | `--z-index-sidebar` | `1001` |
-| `zIndex.modal` | `--z-index-modal` | `1001` |
-
-### Transitions
-
-| Token | CSS Variable | Value |
-| --- | --- | --- |
-| `transitions.fast` | `--transition-fast` | `0.2s` |
-| `transitions.base` | `--transition-base` | `0.3s` |
-| `transitions.easeIn` | `--transition-ease-in` | `0.2s ease-in` |
-| `transitions.easeInOut` | `--transition-ease-in-out` | `0.3s ease-in-out` |
-| `transitions.easeOut` | `--transition-ease-out` | `0.2s ease` |
-
-## Framework Examples
-
-### Vue.js
-
-```vue
-<script setup>
-import { colors, spacing } from "@epignosis_llc/gnosis/tokens";
-</script>
-
-<template>
-  <button :style="{ backgroundColor: colors.primary.base, padding: spacing.md }">
-    Click me
-  </button>
-</template>
-```
-
-Or with CSS variables:
-
-```vue
-<style>
-@import "@epignosis_llc/gnosis/tokens.css";
-
-.btn {
-  background-color: var(--color-primary-base);
-  padding: var(--spacing-xs) var(--spacing-md);
-  border-radius: var(--border-radius-sm);
-  color: var(--color-white);
-}
-</style>
-```
-
-### Svelte
-
-```svelte
-<script>
-  import { colors } from "@epignosis_llc/gnosis/tokens";
-  import "@epignosis_llc/gnosis/tokens.css";
-</script>
-
-<button style="background-color: {colors.primary.base}">Click me</button>
-
-<style>
-  button {
-    padding: var(--spacing-xs) var(--spacing-md);
-    border-radius: var(--border-radius-sm);
-  }
-</style>
-```
-
-### Angular
-
-```typescript
-// styles.css (global)
-@import "@epignosis_llc/gnosis/tokens.css";
-```
-
-```typescript
-// component.ts
-import { colors, spacing } from "@epignosis_llc/gnosis/tokens";
-
-@Component({
-  template: `<button class="btn">Click me</button>`,
-  styles: [`
-    .btn {
-      background-color: var(--color-primary-base);
-      padding: var(--spacing-xs) var(--spacing-md);
-      border-radius: var(--border-radius-sm);
-    }
-  `],
-})
-export class MyComponent {}
-```
-
-### Vanilla HTML/CSS
-
-```html
-<link rel="stylesheet" href="node_modules/@epignosis_llc/gnosis/dist/tokens/tokens.css" />
-
-<style>
-  body {
-    font-family: var(--font-family-body);
-    font-size: var(--font-size-md);
-    line-height: var(--line-height-base);
-  }
-</style>
-```
diff --git a/package.json b/package.json
index 02cce586..4ec311e3 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,6 @@
       "import": "./dist/esm/src/index.js",
       "require": "./dist/cjs/index.cjs"
     },
-    "./tokens": {
-      "types": "./dist/types/theme/tokens.d.ts",
-      "import": "./dist/tokens/index.js",
-      "require": "./dist/tokens/index.cjs"
-    },
-    "./tokens.css": "./dist/tokens/tokens.css",
     "./icons": {
       "import": "./icons/index.js",
       "require": "./icons/index.cjs"
diff --git a/rollup.config.js b/rollup.config.js
index bc40091c..b83cd17a 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -67,41 +67,6 @@ export default [
     external: Object.keys(pkg.devDependencies),
     plugins,
   },
-  // Standalone design tokens bundle (framework-agnostic, no React dependency)
-  {
-    input: "src/theme/tokens.ts",
-    output: [
-      {
-        file: "dist/tokens/index.js",
-        format: "es",
-        sourcemap: true,
-        banner,
-      },
-      {
-        file: "dist/tokens/index.cjs",
-        format: "cjs",
-        sourcemap: true,
-        banner,
-      },
-    ],
-    plugins: [
-      resolve({ extensions, browser: true }),
-      babel({
-        extensions,
-        babelHelpers: "bundled",
-        exclude: ["node_modules/**"],
-        configFile: path.resolve(__dirname, "babel.config.json"),
-      }),
-    ],
-  },
-  // Copy tokens.css into dist
-  {
-    input: "src/theme/tokens.css",
-    output: {
-      file: "dist/tokens/tokens.css",
-    },
-    plugins: [postcss({ extract: true, minimize: false })],
-  },
   {
     input: "src/icons/index.ts",
     output: [
diff --git a/src/index.ts b/src/index.ts
index 0b6e8c51..3eab9b9f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,20 +30,6 @@ export { default as Text } from "./components/Text/Text";
 // Typography configurations
 export { typeScale } from "./theme/utils/typography";
 
-// Design Tokens
-export {
-  colorBase,
-  colors,
-  typography,
-  spacing,
-  borderRadius,
-  shadows,
-  breakpoints,
-  mediaQueries,
-  zIndex,
-  transitions,
-} from "./theme/tokens";
-
 //  Form elements
 export { default as Label } from "./components/FormElements/Label/Label";
 export { default as Input } from "./components/FormElements/Input/Input";
diff --git a/src/theme/tokens.css b/src/theme/tokens.css
deleted file mode 100644
index 9f7266fa..00000000
--- a/src/theme/tokens.css
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * Gnosis Design Tokens — CSS Custom Properties
- *
- * All design tokens exported as CSS variables for use in CSS/SCSS.
- * These mirror the tokens defined in src/theme/tokens.ts
- */
-
-:root {
-  /* ---------------------------------------------------------------------------
-   * COLORS - Base
-   * ---------------------------------------------------------------------------*/
-  --color-base-primary: #0046ab;
-  --color-base-secondary: #9ea5a9;
-  --color-base-green: #1b7855;
-  --color-base-orange: #ff9c28;
-  --color-base-red: #d12525;
-  --color-base-black: #000000;
-  --color-base-white: #ffffff;
-  --color-base-blue: #0046ab;
-
-  /* ---------------------------------------------------------------------------
-   * COLORS - Primary Palette
-   * ---------------------------------------------------------------------------*/
-  --color-primary-lightest25: rgba(36, 125, 255, 0.25);
-  --color-primary-lightest50: rgba(36, 125, 255, 0.5);
-  --color-primary-lightest: #247dff;
-  --color-primary-lighter: #0169ff;
-  --color-primary-light: #0054cd;
-  --color-primary-base: #0046ab;
-  --color-primary-dark: #003889;
-  --color-primary-darker50: rgba(0, 42, 103, 0.5);
-  --color-primary-darker: #002a67;
-  --color-primary-darkest: #001c44;
-
-  /* ---------------------------------------------------------------------------
-   * COLORS - Secondary Palette
-   * ---------------------------------------------------------------------------*/
-  --color-secondary-lightest: #ffffff;
-  --color-secondary-lighter: #f5f5f6;
-  --color-secondary-light: #c1c5c8;
-  --color-secondary-base: #9ea5a9;
-  --color-secondary-dark: #7b858a;
-  --color-secondary-darker: #5c6468;
-  --color-secondary-darkest: #3d4245;
-
-  /* ---------------------------------------------------------------------------
-   * COLORS - Green Palette
-   * ---------------------------------------------------------------------------*/
-  --color-green-lightest: #2ecc90;
-  --color-green-lighter: #29b47f;
-  --color-green-light50: rgba(32, 144, 102, 0.5);
-  --color-green-light: #209066;
-  --color-green-base: #1b7855;
-  --color-green-dark: #166044;
-  --color-green-darker: #104833;
-  --color-green-darkest: #0b3022;
-
-  /* ---------------------------------------------------------------------------
-   * COLORS - Orange Palette
-   * ---------------------------------------------------------------------------*/
-  --color-orange-lightest: #fffbf6;
-  --color-orange-lighter: #ffe0bb;
-  --color-orange-light: #ffb763;
-  --color-orange-base50: rgba(255, 156, 40, 0.5);
-  --color-orange-base: #ff9c28;
-  --color-orange-dark: #ec7f00;
-  --color-orange-darker: #b15f00;
-  --color-orange-darkest: #764000;
-
-  /* ---------------------------------------------------------------------------
-   * COLORS - Red Palette
-   * ---------------------------------------------------------------------------*/
-  --color-red-lightest: #f1b1b1;
-  --color-red-lighter: #ea8787;
-  --color-red-light50: rgba(223, 73, 73, 0.5);
-  --color-red-light: #df4949;
-  --color-red-base: #d12525;
-  --color-red-dark: #a71e1e;
-  --color-red-darker: #7d1616;
-  --color-red-darkest: #540f0f;
-
-  /* ---------------------------------------------------------------------------
-   * COLORS - Named
-   * ---------------------------------------------------------------------------*/
-  --color-black: #000000;
-  --color-white: #ffffff;
-  --color-blue: #0046ab;
-
-  /* ---------------------------------------------------------------------------
-   * TYPOGRAPHY - Font Family
-   * ---------------------------------------------------------------------------*/
-  --font-family-body: "Mulish", Arial, sans-serif;
-
-  /* ---------------------------------------------------------------------------
-   * TYPOGRAPHY - Font Size (aligned with Figma)
-   * ---------------------------------------------------------------------------*/
-  --font-size-xxs: 0.5rem; /* 8px */
-  --font-size-xs: 0.75rem; /* 12px */
-  --font-size-sm: 0.875rem; /* 14px */
-  --font-size-md: 1rem; /* 16px - base */
-  --font-size-lg: 1.125rem; /* 18px */
-  --font-size-xl: 1.375rem; /* 22px */
-  --font-size-2xl: 1.75rem; /* 28px */
-  --font-size-3xl: 2.125rem; /* 34px */
-
-  /* ---------------------------------------------------------------------------
-   * TYPOGRAPHY - Line Height
-   * ---------------------------------------------------------------------------*/
-  --line-height-base: 1.5715;
-
-  /* ---------------------------------------------------------------------------
-   * TYPOGRAPHY - Font Weight
-   * ---------------------------------------------------------------------------*/
-  --font-weight-regular: 400;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-
-  /* ---------------------------------------------------------------------------
-   * SPACING (aligned with Figma)
-   * ---------------------------------------------------------------------------*/
-  --spacing-none: 0; /* 0px */
-  --spacing-xxs: 0.25rem; /* 4px */
-  --spacing-xs: 0.5rem; /* 8px */
-  --spacing-sm: 0.75rem; /* 12px */
-  --spacing-md: 1rem; /* 16px */
-  --spacing-lg: 1.5rem; /* 24px */
-  --spacing-xl: 2rem; /* 32px */
-
-  /* ---------------------------------------------------------------------------
-   * BORDER RADIUS (aligned with Figma)
-   * ---------------------------------------------------------------------------*/
-  --border-radius-none: 0;
-  --border-radius-sm: 5px;
-  --border-radius-xl: 30px;
-  --border-radius-full: 50%;
-
-  /* ---------------------------------------------------------------------------
-   * SHADOWS
-   * ---------------------------------------------------------------------------*/
-  --shadow-sm: 0 3px 6px #c1c5c8;
-  --shadow-checkbox: 0px 0px 0px 9px rgba(36, 125, 255, 0.25);
-
-  /* ---------------------------------------------------------------------------
-   * BREAKPOINTS (px values)
-   * ---------------------------------------------------------------------------*/
-  --breakpoint-xs: 320px;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --breakpoint-xxl: 1600px;
-  --breakpoint-3xl: 1920px;
-
-  /* ---------------------------------------------------------------------------
-   * Z-INDEX
-   * ---------------------------------------------------------------------------*/
-  --z-index-base: 0;
-  --z-index-raised: 1;
-  --z-index-overlay: 2;
-  --z-index-drawer: 3;
-  --z-index-dropdown: 100;
-  --z-index-sidebar: 1001;
-  --z-index-modal: 1001;
-
-  /* ---------------------------------------------------------------------------
-   * TRANSITIONS
-   * ---------------------------------------------------------------------------*/
-  --transition-fast: 0.2s;
-  --transition-base: 0.3s;
-  --transition-ease-in: 0.2s ease-in;
-  --transition-ease-in-out: 0.3s ease-in-out;
-  --transition-ease-out: 0.2s ease;
-}
diff --git a/src/theme/tokens.ts b/src/theme/tokens.ts
deleted file mode 100644
index 924ae330..00000000
--- a/src/theme/tokens.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-/**
- * Gnosis Design Tokens
- *
- * This file is a single source of truth for all design tokens in the Gnosis design system.
- * Tokens are aligned with Figma design tokens.
- */
-
-// ---------------------------------------------------------------------------
-// COLORS
-// ---------------------------------------------------------------------------
-// Base hex values
-export const colorBase = {
-  primary: "#0046AB",
-  secondary: "#9EA5A9",
-  green: "#1B7855",
-  orange: "#FF9C28",
-  red: "#D12525",
-  black: "#000000",
-  white: "#FFFFFF",
-  blue: "#0046AB",
-} as const;
-
-// Full palette — each color generated with palletGenerator (color lib lighten/darken)
-export const colors = {
-  primary: {
-    lightest25: "rgba(36, 125, 255, 0.25)",
-    lightest50: "rgba(36, 125, 255, 0.5)",
-    lightest: "#247DFF",
-    lighter: "#0169FF",
-    light: "#0054CD",
-    base: "#0046AB",
-    dark: "#003889",
-    darker50: "rgba(0, 42, 103, 0.5)",
-    darker: "#002A67",
-    darkest: "#001C44",
-  },
-  secondary: {
-    lightest: "#FFFFFF",
-    lighter: "#F5F5F6",
-    light: "#C1C5C8",
-    base: "#9EA5A9",
-    dark: "#7B858A",
-    darker: "#5C6468",
-    darkest: "#3D4245",
-  },
-  green: {
-    lightest: "#2ECC90",
-    lighter: "#29B47F",
-    light50: "rgba(32, 144, 102, 0.5)",
-    light: "#209066",
-    base: "#1B7855",
-    dark: "#166044",
-    darker: "#104833",
-    darkest: "#0B3022",
-  },
-  orange: {
-    lightest: "#FFFBF6",
-    lighter: "#FFE0BB",
-    light: "#FFB763",
-    base50: "rgba(255, 156, 40, 0.5)",
-    base: "#FF9C28",
-    dark: "#EC7F00",
-    darker: "#B15F00",
-    darkest: "#764000",
-  },
-  red: {
-    lightest: "#F1B1B1",
-    lighter: "#EA8787",
-    light50: "rgba(223, 73, 73, 0.5)",
-    light: "#DF4949",
-    base: "#D12525",
-    dark: "#A71E1E",
-    darker: "#7D1616",
-    darkest: "#540F0F",
-  },
-  black: "#000000",
-  white: "#FFFFFF",
-  blue: "#0046AB",
-} as const;
-
-// ---------------------------------------------------------------------------
-// TYPOGRAPHY
-// ---------------------------------------------------------------------------
-export const typography = {
-  // Font families
-  fontFamily: {
-    body: '"Mulish", Arial, sans-serif',
-  },
-
-  // Type scale (aligned with Figma design tokens)
-  fontSize: {
-    xxs: "0.5rem", //  8px
-    xs: "0.75rem", //  12px
-    sm: "0.875rem", //  14px
-    md: "1rem", //  16px  ← base
-    lg: "1.125rem", //  18px
-    xl: "1.375rem", //  22px
-    "2xl": "1.75rem", //  28px
-    "3xl": "2.125rem", //  34px
-  },
-
-  // Global line height
-  lineHeight: {
-    base: 1.5715,
-  },
-
-  // Font weights (browser defaults relied upon; explicit values used in components)
-  fontWeight: {
-    regular: 400,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-  },
-} as const;
-
-// ---------------------------------------------------------------------------
-// SPACING
-// ---------------------------------------------------------------------------
-// Aligned with Figma design tokens
-export const spacing = {
-  none: "0", //  0px
-  xxs: "0.25rem", //  4px
-  xs: "0.5rem", //  8px
-  sm: "0.75rem", //  12px
-  md: "1rem", //  16px
-  lg: "1.5rem", //  24px
-  xl: "2rem", //  32px
-} as const;
-
-// ---------------------------------------------------------------------------
-// BORDER RADIUS
-// ---------------------------------------------------------------------------
-// Aligned with Figma design tokens
-export const borderRadius = {
-  none: "0", // 0px
-  sm: "5px", // 5px - buttons, cards, alerts, chips, dropdowns, tooltips, pagination
-  xl: "30px", // 30px - rounded elements
-  full: "50%", // circular elements
-} as const;
-
-// ---------------------------------------------------------------------------
-// SHADOWS
-// ---------------------------------------------------------------------------
-// Shadow color = colors.secondary.light (#C1C5C8)
-export const shadows = {
-  sm: "0 3px 6px #C1C5C8", // dropdown, pagination, result card
-  checkbox: "0px 0px 0px 9px rgba(36, 125, 255, 0.25)", // focus ring on checkboxes
-} as const;
-
-// ---------------------------------------------------------------------------
-// BREAKPOINTS
-// ---------------------------------------------------------------------------
-// From src/theme/utils/breakpoints.ts
-export const breakpoints = {
-  xs: 320,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-  xxl: 1600,
-  "3xl": 1920,
-} as const;
-
-// Corresponding media queries (min-width)
-export const mediaQueries = {
-  xs: "@media screen and (min-width: 320px)",
-  sm: "@media screen and (min-width: 576px)",
-  md: "@media screen and (min-width: 768px)",
-  lg: "@media screen and (min-width: 992px)",
-  xl: "@media screen and (min-width: 1200px)",
-  xxl: "@media screen and (min-width: 1600px)",
-  "3xl": "@media screen and (min-width: 1920px)",
-} as const;
-
-// ---------------------------------------------------------------------------
-// Z-INDEX
-// ---------------------------------------------------------------------------
-export const zIndex = {
-  base: 0,
-  raised: 1,
-  overlay: 2,
-  drawer: 3,
-  dropdown: 100,
-  sidebar: 1001,
-  modal: 1001,
-} as const;
-
-// ---------------------------------------------------------------------------
-// TRANSITIONS
-// ---------------------------------------------------------------------------
-export const transitions = {
-  fast: "0.2s",
-  base: "0.3s",
-  easeIn: "0.2s ease-in",
-  easeInOut: "0.3s ease-in-out",
-  easeOut: "0.2s ease",
-} as const;