@sesamehr/react-design-system 0.1.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sesamehr/react-design-system",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Sesame HR React design system — components and design tokens",
   "license": "MIT",
   "type": "module",
@@ -24,6 +24,21 @@
     "dist",
     "src/assets/styles"
   ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b --noEmit && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit"
+  },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -54,10 +69,8 @@
     "react-dom": "^18.3.0 || ^19.0.0",
     "tailwindcss": "^4.1.7"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "devDependencies": {
+    "@sesame/orxata-config": "workspace:*",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.6.1",
@@ -65,7 +78,7 @@
     "@types/react-dom": "^19.0.0",
     "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^8.57.1",
+    "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",
@@ -77,18 +90,6 @@
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18",
-    "@orxata/config": "1.0.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b --noEmit && vite build",
-    "preview": "vite preview",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "type-check": "tsc --noEmit"
+    "vitest": "^4.0.18"
   }
-}
+}

package/src/assets/styles/mainTheme.css

@@ -1 +1 @@
-@import './theme-v2.css';
+@import './theme-v3.css';

package/src/assets/styles/primitives-v3.css

@@ -0,0 +1,589 @@
+/* ===========================================
+   PRIMITIVES V3 - Base values as CSS custom properties
+   Source of truth: Figma "v3 Design System" -> collection "Primitive-colors".
+   These are defined in :root / @theme so they can be referenced
+   anywhere, including in @theme inline blocks.
+
+   Colors are dual-declared: #hex (fallback) then oklch() (override),
+   mirroring primitives.css (v2) and Tailwind v4. oklch is converted
+   from the sRGB values in the Figma export.
+
+   Changes vs v2:
+   - Brand ramp is the new blue (#415BFF = brand-500), replaces indigo.
+   - Neutral scale is now `zinc` (was `slate`).
+   - Full Tailwind v4 palette exported (22 hues), plus custom `brand`.
+   - Global font: Inter Tight (was Figtree).
+   =========================================== */
+
+:root {
+  /* ===== RADIUS (custom scale, differs from Tailwind) ===== */
+  --radius-xs: 0.125rem; /* 2px */
+  --radius-sm: 0.375rem; /* 6px */
+  --radius-md: 0.5rem; /* 8px */
+  --radius-lg: 0.625rem; /* 10px */
+  --radius-xl: 0.875rem; /* 14px */
+  --radius-2xl: 1rem; /* 16px */
+  --radius-3xl: 1.5rem; /* 24px */
+  --radius-4xl: 2rem; /* 32px */
+
+  /* Default radius for `rounded` class */
+  --radius-DEFAULT: var(--radius-md);
+
+  /* ===== FONTS (custom families) ===== */
+  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
+}
+
+@theme static {
+  /* ===== BASE ===== */
+  --color-white: #ffffff;
+  --color-white: oklch(1 0 0);
+  --color-black: #000000;
+  --color-black: oklch(0 0 0);
+
+  /* White overlays (alpha). Figma: base/alpha-* */
+  --color-alpha-5: rgb(255 255 255 / 0.95);
+  --color-alpha-10: rgb(255 255 255 / 0.9);
+  --color-alpha-20: rgb(255 255 255 / 0.8);
+  --color-alpha-30: rgb(255 255 255 / 0.7);
+  --color-alpha-40: rgb(255 255 255 / 0.6);
+  --color-alpha-50: rgb(255 255 255 / 0.5);
+  --color-alpha-60: rgb(255 255 255 / 0.4);
+  --color-alpha-70: rgb(255 255 255 / 0.3);
+  --color-alpha-80: rgb(255 255 255 / 0.2);
+  --color-alpha-90: rgb(255 255 255 / 0.1);
+
+  /* ===== BRAND (custom blue ramp) ===== */
+  --color-brand-50: #ecefff;
+  --color-brand-50: oklch(0.955 0.022 277.49);
+  --color-brand-100: #d9deff;
+  --color-brand-100: oklch(0.907 0.045 278.64);
+  --color-brand-200: #b3bdff;
+  --color-brand-200: oklch(0.814 0.094 277.437);
+  --color-brand-300: #8d9dff;
+  --color-brand-300: oklch(0.725 0.143 275.228);
+  --color-brand-400: #677cff;
+  --color-brand-400: oklch(0.638 0.194 272.813);
+  --color-brand-500: #415bff;
+  --color-brand-500: oklch(0.559 0.243 269.468);
+  --color-brand-600: #3449cc;
+  --color-brand-600: oklch(0.477 0.202 269.672);
+  --color-brand-700: #273799;
+  --color-brand-700: oklch(0.391 0.16 269.988);
+  --color-brand-800: #1a2466;
+  --color-brand-800: oklch(0.298 0.116 270.947);
+  --color-brand-900: #0d1233;
+  --color-brand-900: oklch(0.2 0.065 272.646);
+
+  /* ===== FULL PALETTE (Tailwind v4) ===== */
+  /* amber */
+  --color-amber-50: #fffbeb;
+  --color-amber-50: oklch(0.987 0.021 95.277);
+  --color-amber-100: #fef3c6;
+  --color-amber-100: oklch(0.962 0.059 95.617);
+  --color-amber-200: #fee685;
+  --color-amber-200: oklch(0.924 0.12 95.746);
+  --color-amber-300: #ffd230;
+  --color-amber-300: oklch(0.878 0.169 91.905);
+  --color-amber-400: #ffb900;
+  --color-amber-400: oklch(0.83 0.171 81.268);
+  --color-amber-500: #fe9a00;
+  --color-amber-500: oklch(0.771 0.173 65.277);
+  --color-amber-600: #e17100;
+  --color-amber-600: oklch(0.668 0.169 53.316);
+  --color-amber-700: #bb4d00;
+  --color-amber-700: oklch(0.556 0.158 45.332);
+  --color-amber-800: #973c00;
+  --color-amber-800: oklch(0.473 0.136 44.883);
+  --color-amber-900: #7b3306;
+  --color-amber-900: oklch(0.414 0.112 45.904);
+  --color-amber-950: #461901;
+  --color-amber-950: oklch(0.279 0.077 45.635);
+  /* blue */
+  --color-blue-50: #eff6ff;
+  --color-blue-50: oklch(0.97 0.014 254.604);
+  --color-blue-100: #dbeafe;
+  --color-blue-100: oklch(0.932 0.032 255.585);
+  --color-blue-200: #bedbff;
+  --color-blue-200: oklch(0.882 0.059 254.029);
+  --color-blue-300: #8ec5ff;
+  --color-blue-300: oklch(0.807 0.101 250.282);
+  --color-blue-400: #51a2ff;
+  --color-blue-400: oklch(0.704 0.158 253.493);
+  --color-blue-500: #2b7fff;
+  --color-blue-500: oklch(0.619 0.207 259.253);
+  --color-blue-600: #155dfc;
+  --color-blue-600: oklch(0.546 0.245 262.881);
+  --color-blue-700: #1447e6;
+  --color-blue-700: oklch(0.488 0.243 264.376);
+  --color-blue-800: #193cb8;
+  --color-blue-800: oklch(0.424 0.199 265.638);
+  --color-blue-900: #1c398e;
+  --color-blue-900: oklch(0.379 0.146 265.522);
+  --color-blue-950: #162456;
+  --color-blue-950: oklch(0.282 0.091 267.935);
+  /* cyan */
+  --color-cyan-50: #ecfeff;
+  --color-cyan-50: oklch(0.984 0.019 200.873);
+  --color-cyan-100: #cefafe;
+  --color-cyan-100: oklch(0.956 0.045 203.388);
+  --color-cyan-200: #a2f4fd;
+  --color-cyan-200: oklch(0.917 0.08 205.041);
+  --color-cyan-300: #53eafd;
+  --color-cyan-300: oklch(0.865 0.127 207.078);
+  --color-cyan-400: #00d3f2;
+  --color-cyan-400: oklch(0.797 0.14 213.516);
+  --color-cyan-500: #00b8db;
+  --color-cyan-500: oklch(0.722 0.13 217.676);
+  --color-cyan-600: #0092b8;
+  --color-cyan-600: oklch(0.615 0.116 224.466);
+  --color-cyan-700: #007595;
+  --color-cyan-700: oklch(0.523 0.099 225.063);
+  --color-cyan-800: #005f78;
+  --color-cyan-800: oklch(0.45 0.085 224.363);
+  --color-cyan-900: #104e64;
+  --color-cyan-900: oklch(0.398 0.07 227.392);
+  --color-cyan-950: #053345;
+  --color-cyan-950: oklch(0.302 0.056 229.695);
+  /* emerald */
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-50: oklch(0.979 0.021 166.113);
+  --color-emerald-100: #d0fae5;
+  --color-emerald-100: oklch(0.95 0.052 163.051);
+  --color-emerald-200: #a4f4cf;
+  --color-emerald-200: oklch(0.905 0.093 164.15);
+  --color-emerald-300: #5ee9b5;
+  --color-emerald-300: oklch(0.845 0.143 164.978);
+  --color-emerald-400: #00d492;
+  --color-emerald-400: oklch(0.77 0.169 161.854);
+  --color-emerald-500: #00bc7d;
+  --color-emerald-500: oklch(0.703 0.158 160.255);
+  --color-emerald-600: #009966;
+  --color-emerald-600: oklch(0.602 0.134 160.89);
+  --color-emerald-700: #007a55;
+  --color-emerald-700: oklch(0.513 0.11 163.622);
+  --color-emerald-800: #006045;
+  --color-emerald-800: oklch(0.435 0.091 165.667);
+  --color-emerald-900: #004f3b;
+  --color-emerald-900: oklch(0.379 0.076 168.654);
+  --color-emerald-950: #002c22;
+  --color-emerald-950: oklch(0.262 0.051 172.411);
+  /* fuchsia */
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-50: oklch(0.977 0.017 320.058);
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-100: oklch(0.952 0.037 319.366);
+  --color-fuchsia-200: #f6cfff;
+  --color-fuchsia-200: oklch(0.903 0.076 319.714);
+  --color-fuchsia-300: #f4a8ff;
+  --color-fuchsia-300: oklch(0.832 0.143 322.099);
+  --color-fuchsia-400: #ed6aff;
+  --color-fuchsia-400: oklch(0.739 0.236 322.7);
+  --color-fuchsia-500: #e12afb;
+  --color-fuchsia-500: oklch(0.667 0.295 322.15);
+  --color-fuchsia-600: #c800de;
+  --color-fuchsia-600: oklch(0.598 0.283 322.651);
+  --color-fuchsia-700: #a800b7;
+  --color-fuchsia-700: oklch(0.523 0.246 323.774);
+  --color-fuchsia-800: #8a0194;
+  --color-fuchsia-800: oklch(0.452 0.211 324.591);
+  --color-fuchsia-900: #721378;
+  --color-fuchsia-900: oklch(0.401 0.17 325.612);
+  --color-fuchsia-950: #4b004f;
+  --color-fuchsia-950: oklch(0.293 0.136 325.661);
+  /* gray */
+  --color-gray-50: #f9fafb;
+  --color-gray-50: oklch(0.985 0.002 247.838);
+  --color-gray-100: #f3f4f6;
+  --color-gray-100: oklch(0.967 0.003 264.542);
+  --color-gray-200: #e5e7eb;
+  --color-gray-200: oklch(0.928 0.006 264.531);
+  --color-gray-300: #d1d5dc;
+  --color-gray-300: oklch(0.872 0.01 258.338);
+  --color-gray-400: #99a1af;
+  --color-gray-400: oklch(0.707 0.022 261.325);
+  --color-gray-500: #6a7282;
+  --color-gray-500: oklch(0.551 0.027 264.364);
+  --color-gray-600: #4a5565;
+  --color-gray-600: oklch(0.446 0.03 256.802);
+  --color-gray-700: #364153;
+  --color-gray-700: oklch(0.373 0.034 259.733);
+  --color-gray-800: #1e2939;
+  --color-gray-800: oklch(0.278 0.033 256.848);
+  --color-gray-900: #101828;
+  --color-gray-900: oklch(0.21 0.034 264.665);
+  --color-gray-950: #030712;
+  --color-gray-950: oklch(0.13 0.028 261.692);
+  /* green */
+  --color-green-50: #f0fdf4;
+  --color-green-50: oklch(0.982 0.018 155.826);
+  --color-green-100: #dcfce7;
+  --color-green-100: oklch(0.962 0.044 156.743);
+  --color-green-200: #b9f8cf;
+  --color-green-200: oklch(0.925 0.084 155.995);
+  --color-green-300: #7bf1a8;
+  --color-green-300: oklch(0.871 0.15 154.449);
+  --color-green-400: #05df72;
+  --color-green-400: oklch(0.792 0.209 151.711);
+  --color-green-500: #00c950;
+  --color-green-500: oklch(0.728 0.211 147.91);
+  --color-green-600: #00a63e;
+  --color-green-600: oklch(0.632 0.186 147.316);
+  --color-green-700: #008236;
+  --color-green-700: oklch(0.53 0.15 148.862);
+  --color-green-800: #016630;
+  --color-green-800: oklch(0.448 0.119 151.328);
+  --color-green-900: #0d542b;
+  --color-green-900: oklch(0.393 0.095 152.535);
+  --color-green-950: #032e15;
+  --color-green-950: oklch(0.266 0.065 152.934);
+  /* indigo */
+  --color-indigo-50: #eef2ff;
+  --color-indigo-50: oklch(0.962 0.018 272.314);
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-100: oklch(0.93 0.033 272.788);
+  --color-indigo-200: #c6d2ff;
+  --color-indigo-200: oklch(0.87 0.064 273.858);
+  --color-indigo-300: #a3b3ff;
+  --color-indigo-300: oklch(0.783 0.11 274.435);
+  --color-indigo-400: #7c86ff;
+  --color-indigo-400: oklch(0.67 0.176 277.014);
+  --color-indigo-500: #615fff;
+  --color-indigo-500: oklch(0.583 0.231 277.23);
+  --color-indigo-600: #4f39f6;
+  --color-indigo-600: oklch(0.511 0.262 276.966);
+  --color-indigo-700: #432dd7;
+  --color-indigo-700: oklch(0.457 0.24 277.023);
+  --color-indigo-800: #372aac;
+  --color-indigo-800: oklch(0.398 0.195 277.366);
+  --color-indigo-900: #312c85;
+  --color-indigo-900: oklch(0.359 0.144 278.697);
+  --color-indigo-950: #1e1a4d;
+  --color-indigo-950: oklch(0.257 0.09 281.288);
+  /* lime */
+  --color-lime-50: #f7fee7;
+  --color-lime-50: oklch(0.986 0.031 120.757);
+  --color-lime-100: #ecfcca;
+  --color-lime-100: oklch(0.967 0.067 122.328);
+  --color-lime-200: #d8f999;
+  --color-lime-200: oklch(0.938 0.127 124.321);
+  --color-lime-300: #bbf451;
+  --color-lime-300: oklch(0.897 0.196 126.665);
+  --color-lime-400: #9ae600;
+  --color-lime-400: oklch(0.842 0.226 129.712);
+  --color-lime-500: #7ccf00;
+  --color-lime-500: oklch(0.77 0.215 132.349);
+  --color-lime-600: #5ea500;
+  --color-lime-600: oklch(0.65 0.184 133.289);
+  --color-lime-700: #497d00;
+  --color-lime-700: oklch(0.533 0.149 132.559);
+  --color-lime-800: #3c6300;
+  --color-lime-800: oklch(0.453 0.124 130.971);
+  --color-lime-900: #35530e;
+  --color-lime-900: oklch(0.405 0.101 131.063);
+  --color-lime-950: #192e03;
+  --color-lime-950: oklch(0.274 0.072 132.109);
+  /* neutral */
+  --color-neutral-50: #fafafa;
+  --color-neutral-50: oklch(0.985 0 0);
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-100: oklch(0.97 0 0);
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-200: oklch(0.922 0 0);
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-300: oklch(0.87 0 0);
+  --color-neutral-400: #a1a1a1;
+  --color-neutral-400: oklch(0.708 0 0);
+  --color-neutral-500: #737373;
+  --color-neutral-500: oklch(0.556 0 0);
+  --color-neutral-600: #525252;
+  --color-neutral-600: oklch(0.439 0 0);
+  --color-neutral-700: #404040;
+  --color-neutral-700: oklch(0.371 0 0);
+  --color-neutral-800: #262626;
+  --color-neutral-800: oklch(0.269 0 0);
+  --color-neutral-900: #171717;
+  --color-neutral-900: oklch(0.205 0 0);
+  --color-neutral-950: #0a0a0a;
+  --color-neutral-950: oklch(0.145 0 0);
+  /* orange */
+  --color-orange-50: #fff7ed;
+  --color-orange-50: oklch(0.98 0.016 74.415);
+  --color-orange-100: #ffedd4;
+  --color-orange-100: oklch(0.954 0.038 75.551);
+  --color-orange-200: #ffd6a7;
+  --color-orange-200: oklch(0.901 0.076 70.776);
+  --color-orange-300: #ffb86a;
+  --color-orange-300: oklch(0.834 0.126 67.467);
+  --color-orange-400: #ff8904;
+  --color-orange-400: oklch(0.746 0.18 56.726);
+  --color-orange-500: #ff6900;
+  --color-orange-500: oklch(0.699 0.202 44.357);
+  --color-orange-600: #f54900;
+  --color-orange-600: oklch(0.648 0.217 36.96);
+  --color-orange-700: #ca3500;
+  --color-orange-700: oklch(0.554 0.192 35.456);
+  --color-orange-800: #9f2d00;
+  --color-orange-800: oklch(0.47 0.157 37.132);
+  --color-orange-900: #7e2a0c;
+  --color-orange-900: oklch(0.408 0.123 38.172);
+  --color-orange-950: #441306;
+  --color-orange-950: oklch(0.266 0.079 36.259);
+  /* pink */
+  --color-pink-50: #fdf2f8;
+  --color-pink-50: oklch(0.971 0.014 343.198);
+  --color-pink-100: #fce7f3;
+  --color-pink-100: oklch(0.948 0.028 342.258);
+  --color-pink-200: #fccee8;
+  --color-pink-200: oklch(0.899 0.061 343.231);
+  --color-pink-300: #fda5d5;
+  --color-pink-300: oklch(0.823 0.12 346.018);
+  --color-pink-400: #fb64b6;
+  --color-pink-400: oklch(0.718 0.202 349.761);
+  --color-pink-500: #f6339a;
+  --color-pink-500: oklch(0.656 0.241 354.308);
+  --color-pink-600: #e60076;
+  --color-pink-600: oklch(0.598 0.242 1.282);
+  --color-pink-700: #c6005c;
+  --color-pink-700: oklch(0.532 0.214 5.064);
+  --color-pink-800: #a3004c;
+  --color-pink-800: oklch(0.46 0.185 4.061);
+  --color-pink-900: #861043;
+  --color-pink-900: oklch(0.408 0.153 2.432);
+  --color-pink-950: #510424;
+  --color-pink-950: oklch(0.284 0.109 3.907);
+  /* purple */
+  --color-purple-50: #faf5ff;
+  --color-purple-50: oklch(0.977 0.014 308.299);
+  --color-purple-100: #f3e8ff;
+  --color-purple-100: oklch(0.946 0.033 307.174);
+  --color-purple-200: #e9d4ff;
+  --color-purple-200: oklch(0.902 0.061 307.315);
+  --color-purple-300: #dab2ff;
+  --color-purple-300: oklch(0.825 0.114 307.729);
+  --color-purple-400: #c27aff;
+  --color-purple-400: oklch(0.71 0.195 306.944);
+  --color-purple-500: #ad46ff;
+  --color-purple-500: oklch(0.622 0.258 305.239);
+  --color-purple-600: #9810fa;
+  --color-purple-600: oklch(0.558 0.288 302.321);
+  --color-purple-700: #8200db;
+  --color-purple-700: oklch(0.498 0.263 301.778);
+  --color-purple-800: #6e11b0;
+  --color-purple-800: oklch(0.438 0.218 303.724);
+  --color-purple-900: #59168b;
+  --color-purple-900: oklch(0.381 0.176 304.987);
+  --color-purple-950: #3c0366;
+  --color-purple-950: oklch(0.291 0.149 302.717);
+  /* red */
+  --color-red-50: #fef2f2;
+  --color-red-50: oklch(0.971 0.013 17.38);
+  --color-red-100: #ffe2e2;
+  --color-red-100: oklch(0.936 0.032 17.717);
+  --color-red-200: #ffc9c9;
+  --color-red-200: oklch(0.884 0.061 18.316);
+  --color-red-300: #ffa2a2;
+  --color-red-300: oklch(0.805 0.111 19.493);
+  --color-red-400: #ff6467;
+  --color-red-400: oklch(0.702 0.19 22.16);
+  --color-red-500: #fb2c36;
+  --color-red-500: oklch(0.637 0.237 25.331);
+  --color-red-600: #e7000b;
+  --color-red-600: oklch(0.583 0.239 28.494);
+  --color-red-700: #c10007;
+  --color-red-700: oklch(0.51 0.209 28.479);
+  --color-red-800: #9f0712;
+  --color-red-800: oklch(0.444 0.177 26.899);
+  --color-red-900: #82181a;
+  --color-red-900: oklch(0.396 0.141 25.723);
+  --color-red-950: #460809;
+  --color-red-950: oklch(0.258 0.092 26.042);
+  /* rose */
+  --color-rose-50: #fff1f2;
+  --color-rose-50: oklch(0.969 0.015 12.422);
+  --color-rose-100: #ffe4e6;
+  --color-rose-100: oklch(0.941 0.03 12.58);
+  --color-rose-200: #ffccd3;
+  --color-rose-200: oklch(0.892 0.058 9.991);
+  --color-rose-300: #ffa1ad;
+  --color-rose-300: oklch(0.806 0.113 11.203);
+  --color-rose-400: #ff637e;
+  --color-rose-400: oklch(0.706 0.19 12.996);
+  --color-rose-500: #ff2056;
+  --color-rose-500: oklch(0.643 0.245 16.358);
+  --color-rose-600: #ec003f;
+  --color-rose-600: oklch(0.598 0.24 19.624);
+  --color-rose-700: #c70036;
+  --color-rose-700: oklch(0.524 0.21 18.982);
+  --color-rose-800: #a50036;
+  --color-rose-800: oklch(0.459 0.183 14.554);
+  --color-rose-900: #8b0836;
+  --color-rose-900: oklch(0.41 0.159 10.272);
+  --color-rose-950: #4d0218;
+  --color-rose-950: oklch(0.271 0.105 12.094);
+  /* sky */
+  --color-sky-50: #f0f9ff;
+  --color-sky-50: oklch(0.977 0.013 235.358);
+  --color-sky-100: #dff2fe;
+  --color-sky-100: oklch(0.951 0.026 236.824);
+  --color-sky-200: #b8e6fe;
+  --color-sky-200: oklch(0.901 0.058 230.902);
+  --color-sky-300: #74d4ff;
+  --color-sky-300: oklch(0.827 0.109 229.044);
+  --color-sky-400: #00bcff;
+  --color-sky-400: oklch(0.748 0.155 233.366);
+  --color-sky-500: #00a6f4;
+  --color-sky-500: oklch(0.691 0.16 240.551);
+  --color-sky-600: #0084d1;
+  --color-sky-600: oklch(0.594 0.15 245.319);
+  --color-sky-700: #0069a8;
+  --color-sky-700: oklch(0.504 0.129 245.624);
+  --color-sky-800: #00598a;
+  --color-sky-800: oklch(0.445 0.107 242.617);
+  --color-sky-900: #024a70;
+  --color-sky-900: oklch(0.391 0.09 240.876);
+  --color-sky-950: #052f4a;
+  --color-sky-950: oklch(0.293 0.066 243.157);
+  /* slate */
+  --color-slate-50: #f8fafc;
+  --color-slate-50: oklch(0.984 0.003 247.858);
+  --color-slate-100: #f1f5f9;
+  --color-slate-100: oklch(0.968 0.007 247.896);
+  --color-slate-200: #e2e8f0;
+  --color-slate-200: oklch(0.929 0.013 255.508);
+  --color-slate-300: #cad5e2;
+  --color-slate-300: oklch(0.869 0.022 252.894);
+  --color-slate-400: #90a1b9;
+  --color-slate-400: oklch(0.704 0.04 256.788);
+  --color-slate-500: #62748e;
+  --color-slate-500: oklch(0.554 0.046 257.417);
+  --color-slate-600: #45556c;
+  --color-slate-600: oklch(0.446 0.043 257.281);
+  --color-slate-700: #314158;
+  --color-slate-700: oklch(0.372 0.044 257.287);
+  --color-slate-800: #1d293d;
+  --color-slate-800: oklch(0.279 0.041 260.031);
+  --color-slate-900: #0f172b;
+  --color-slate-900: oklch(0.208 0.042 265.755);
+  --color-slate-950: #020618;
+  --color-slate-950: oklch(0.129 0.042 264.695);
+  /* stone */
+  --color-stone-50: #fafaf9;
+  --color-stone-50: oklch(0.985 0.001 106.423);
+  --color-stone-100: #f5f5f4;
+  --color-stone-100: oklch(0.97 0.001 106.424);
+  --color-stone-200: #e7e5e4;
+  --color-stone-200: oklch(0.923 0.003 48.717);
+  --color-stone-300: #d6d3d1;
+  --color-stone-300: oklch(0.869 0.005 56.366);
+  --color-stone-400: #a6a09b;
+  --color-stone-400: oklch(0.709 0.01 56.259);
+  --color-stone-500: #79716b;
+  --color-stone-500: oklch(0.553 0.013 58.071);
+  --color-stone-600: #57534d;
+  --color-stone-600: oklch(0.444 0.011 73.639);
+  --color-stone-700: #44403b;
+  --color-stone-700: oklch(0.374 0.01 67.558);
+  --color-stone-800: #292524;
+  --color-stone-800: oklch(0.268 0.007 34.298);
+  --color-stone-900: #1c1917;
+  --color-stone-900: oklch(0.216 0.006 56.043);
+  --color-stone-950: #0c0a09;
+  --color-stone-950: oklch(0.147 0.004 49.25);
+  /* teal */
+  --color-teal-50: #f0fdfa;
+  --color-teal-50: oklch(0.984 0.014 180.72);
+  --color-teal-100: #cbfbf1;
+  --color-teal-100: oklch(0.953 0.051 180.801);
+  --color-teal-200: #96f7e4;
+  --color-teal-200: oklch(0.91 0.096 180.426);
+  --color-teal-300: #46ecd5;
+  --color-teal-300: oklch(0.855 0.138 181.071);
+  --color-teal-400: #00d5be;
+  --color-teal-400: oklch(0.783 0.141 181.132);
+  --color-teal-500: #00bba7;
+  --color-teal-500: oklch(0.71 0.128 181.593);
+  --color-teal-600: #009689;
+  --color-teal-600: oklch(0.606 0.107 183.982);
+  --color-teal-700: #00786f;
+  --color-teal-700: oklch(0.514 0.09 186.023);
+  --color-teal-800: #005f5a;
+  --color-teal-800: oklch(0.438 0.076 188.118);
+  --color-teal-900: #0b4f4a;
+  --color-teal-900: oklch(0.386 0.063 188.416);
+  --color-teal-950: #022f2e;
+  --color-teal-950: oklch(0.277 0.046 192.524);
+  /* violet */
+  --color-violet-50: #f5f3ff;
+  --color-violet-50: oklch(0.969 0.016 293.756);
+  --color-violet-100: #ede9fe;
+  --color-violet-100: oklch(0.943 0.029 294.588);
+  --color-violet-200: #ddd6ff;
+  --color-violet-200: oklch(0.894 0.057 293.326);
+  --color-violet-300: #c4b4ff;
+  --color-violet-300: oklch(0.81 0.106 294.147);
+  --color-violet-400: #a684ff;
+  --color-violet-400: oklch(0.699 0.176 294.329);
+  --color-violet-500: #8e51ff;
+  --color-violet-500: oklch(0.6 0.242 293.791);
+  --color-violet-600: #7f22fe;
+  --color-violet-600: oklch(0.541 0.281 293.009);
+  --color-violet-700: #7008e7;
+  --color-violet-700: oklch(0.491 0.27 292.581);
+  --color-violet-800: #5d0ec0;
+  --color-violet-800: oklch(0.432 0.232 292.759);
+  --color-violet-900: #4d179a;
+  --color-violet-900: oklch(0.38 0.189 293.745);
+  --color-violet-950: #2f0d68;
+  --color-violet-950: oklch(0.283 0.141 291.089);
+  /* yellow */
+  --color-yellow-50: #fefce8;
+  --color-yellow-50: oklch(0.987 0.026 102.212);
+  --color-yellow-100: #fef9c2;
+  --color-yellow-100: oklch(0.973 0.071 103.193);
+  --color-yellow-200: #fff085;
+  --color-yellow-200: oklch(0.945 0.129 101.54);
+  --color-yellow-300: #ffdf20;
+  --color-yellow-300: oklch(0.904 0.182 98.456);
+  --color-yellow-400: #fdc700;
+  --color-yellow-400: oklch(0.854 0.175 88.881);
+  --color-yellow-500: #f0b100;
+  --color-yellow-500: oklch(0.797 0.164 82.528);
+  --color-yellow-600: #d08700;
+  --color-yellow-600: oklch(0.683 0.147 71.307);
+  --color-yellow-700: #a65f00;
+  --color-yellow-700: oklch(0.555 0.127 62.638);
+  --color-yellow-800: #894b00;
+  --color-yellow-800: oklch(0.476 0.111 60.293);
+  --color-yellow-900: #733e0a;
+  --color-yellow-900: oklch(0.421 0.095 57.708);
+  --color-yellow-950: #432004;
+  --color-yellow-950: oklch(0.286 0.066 53.813);
+  /* zinc */
+  --color-zinc-50: #fafafa;
+  --color-zinc-50: oklch(0.985 0 0);
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-100: oklch(0.967 0.001 286.376);
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-200: oklch(0.92 0.004 286.32);
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-300: oklch(0.871 0.005 286.286);
+  --color-zinc-400: #9f9fa9;
+  --color-zinc-400: oklch(0.705 0.015 286.067);
+  --color-zinc-500: #71717a;
+  --color-zinc-500: oklch(0.552 0.014 285.938);
+  --color-zinc-600: #52525c;
+  --color-zinc-600: oklch(0.442 0.017 285.786);
+  --color-zinc-700: #3f3f46;
+  --color-zinc-700: oklch(0.37 0.013 285.805);
+  --color-zinc-800: #27272a;
+  --color-zinc-800: oklch(0.274 0.006 286.033);
+  --color-zinc-900: #18181b;
+  --color-zinc-900: oklch(0.21 0.006 285.885);
+  --color-zinc-950: #09090b;
+  --color-zinc-950: oklch(0.141 0.005 285.823);
+
+  /* ===== ANIMATIONS ===== */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}