setup admin connection

sop-front/src/assets/main.css

@@ -1,37 +1,84 @@
 @import 'tailwindcss';
-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700&display=swap');
 
 /* ============================================================
    Smash or Pass — design tokens
-   Palette source: provided reference image.
+   Graded scales (50 = lightest, 900/950 = darkest).
+   The 500 step is the canonical brand value for each hue.
+   Semantic aliases (primary, smash, pass, bg, surface…) live
+   at the bottom and point at scale values — change once here
+   to retheme the whole app.
    ============================================================ */
 @theme {
-  /* Brand palette */
-  --color-tongue: #b9d532; /* smash / accent green */
-  --color-iris: #ff453b; /* pass / red */
-  --color-paws: #63586e; /* muted */
-  --color-fur: #fbf9fd; /* off-white */
-  --color-rayures: #f0d9ff; /* soft lilac */
-  --color-body: #bfa2db; /* light purple */
-  --color-body2: #8363a2; /* mid purple */
-  --color-clothes: #8324de; /* primary purple */
+  /* Purple — primary brand hue (anchored on #8324DE = 500) */
+  --color-purple-50: #faf3ff;
+  --color-purple-100: #f0d9ff;
+  --color-purple-200: #dcb3ff;
+  --color-purple-300: #c189f5;
+  --color-purple-400: #a256ec;
+  --color-purple-500: #8324de;
+  --color-purple-600: #6e1cc2;
+  --color-purple-700: #57169a;
+  --color-purple-800: #3d1070;
+  --color-purple-900: #270a4a;
 
-  /* Semantic roles */
-  --color-bg: #16141a; /* dark grey background */
-  --color-surface: #1f1c24; /* card surface */
-  --color-surface-2: #2a2630; /* elevated surface */
-  --color-border: #3a3340;
-  --color-text: #fbf9fd;
-  --color-text-muted: #b9b1c2;
+  /* Red — pass (anchored on #FF453B = 500) */
+  --color-red-50: #fff1f0;
+  --color-red-100: #ffd9d6;
+  --color-red-200: #ffb3ad;
+  --color-red-300: #ff8b82;
+  --color-red-400: #ff6961;
+  --color-red-500: #ff453b;
+  --color-red-600: #e0291f;
+  --color-red-700: #b81f17;
+  --color-red-800: #8a1611;
+  --color-red-900: #5c0e0a;
 
-  --color-primary: #8324de;
-  --color-primary-hover: #9442e8;
-  --color-smash: #b9d532;
-  --color-pass: #ff453b;
+  /* Lime — smash (anchored on #B9D532 = 500) */
+  --color-lime-50: #f6fae3;
+  --color-lime-100: #eaf3b8;
+  --color-lime-200: #d9e886;
+  --color-lime-300: #c8de5f;
+  --color-lime-400: #c1d948;
+  --color-lime-500: #b9d532;
+  --color-lime-600: #94ab26;
+  --color-lime-700: #6f811d;
+  --color-lime-800: #4d5914;
+  --color-lime-900: #2c330b;
+
+  /* Neutral — dark-mode greys with a slight purple tint
+     (50 = #FBF9FD off-white, 950 = #16141A dark grey background) */
+  --color-neutral-50: #fbf9fd;
+  --color-neutral-100: #ebe8ef;
+  --color-neutral-200: #d2cdda;
+  --color-neutral-300: #b9b1c2;
+  --color-neutral-400: #8e8499;
+  --color-neutral-500: #63586e;
+  --color-neutral-600: #4f4659;
+  --color-neutral-700: #3a3340;
+  --color-neutral-800: #2a2630;
+  --color-neutral-900: #1f1c24;
+  --color-neutral-950: #16141a;
+
+  /* ----------------------------------------------------------
+     Semantic aliases — reference these in components, not the
+     scale values directly, so the theme stays repaintable.
+     ---------------------------------------------------------- */
+  --color-primary: var(--color-purple-500);
+  --color-primary-hover: var(--color-purple-400);
+  --color-smash: var(--color-lime-500);
+  --color-pass: var(--color-red-500);
+
+  --color-bg: var(--color-neutral-950);
+  --color-surface: var(--color-neutral-900);
+  --color-surface-2: var(--color-neutral-800);
+  --color-border: var(--color-neutral-700);
+  --color-text: var(--color-neutral-100);
+  --color-text-muted: var(--color-neutral-300);
 
   /* Typography */
-  --font-sans: 'Inter', system-ui, sans-serif;
-  --font-display: 'Bebas Neue', 'Inter', sans-serif;
+  --font-sans: 'Roboto', system-ui, sans-serif;
+  --font-display: 'Bebas Neue', 'Roboto', sans-serif;
 
   /* Radii */
   --radius-card: 1.25rem;