updates on the ui changes and changed into doormile

src/index.css

@@ -1,12 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
 
-/* Astryx component styles, pre-compiled by the package (`@layer astryx-base`).
-   Only the component layer is imported: Tailwind's preflight is already the
-   app's reset, and Astryx's own reset would be a second, global one. The theme
-   package is likewise left out — Astryx components in KROW wear KROW's tokens,
-   which the `.krow-astryx` scope below supplies. */
-@import '@astryxdesign/core/astryx.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -26,7 +19,7 @@
     --krow-bg: #F8F8F8;
     --krow-bg-blue: #E8F0F8;
     --krow-bg-warm: #F8F8E8;
-    --krow-primary: #0838E0;
+    --krow-primary: #C8102E;
     --krow-text: #101820;
     --krow-text-secondary: #687386;
     --krow-text-muted: #8B94A5;
@@ -36,9 +29,9 @@
     --krow-warning: #E7B900;
     --krow-error: #D64545;
 
-    /* KROW Official Brand Colors */
-    /* Primary: KROW Blue #0838E0 */
-    /* Accent: KROW Yellow #F9E547 (Pantone 106CP) */
+    /* Doormile brand colours */
+    /* Primary: Doormile Red #C8102E — the mark's own crimson */
+    /* Accent: Yellow #F9E547 (Pantone 106CP) */
     /* Pale Yellow: #F8E08E (Pantone 1205CP) */
     /* Dark Navy: #333F48 (Pantone 432CP) */
     /* Mint: #D1E0D7 (Pantone 621CP) */
@@ -49,20 +42,20 @@
     --card-foreground: 210 33% 9%;
     --popover: 0 0% 100%;
     --popover-foreground: 210 33% 9%;
-    --primary: 227 93% 45%;          /* #0838E0 */
+    --primary: 350 85% 42%;          /* #C8102E */
     --primary-foreground: 0 0% 100%;
-    --secondary: 227 89% 96%;
-    --secondary-foreground: 227 89% 30%;
+    --secondary: 350 85% 96%;
+    --secondary-foreground: 350 85% 30%;
     --muted: 210 16% 95%;
     --muted-foreground: 218 13% 47%; /* #687386 */
-    --accent: 227 89% 94%;
-    --accent-foreground: 227 89% 25%;
+    --accent: 350 85% 94%;
+    --accent-foreground: 350 85% 25%;
     --destructive: 0 64% 55%;        /* #D64545 */
     --destructive-foreground: 0 0% 100%;
     --border: 216 19% 90%;           /* #E0E4EA */
     --input: 215 21% 89%;            /* #DDE2E9 */
-    --ring: 227 93% 45%;
-    --chart-1: 227 93% 45%;
+    --ring: 350 85% 42%;
+    --chart-1: 350 85% 42%;
     --chart-2: 52 91% 63%;
     --chart-3: 210 17% 24%;
     --chart-4: 42 73% 74%;
@@ -224,12 +217,11 @@
     pointer-events: none;
     background: linear-gradient(
       90deg,
-      var(--krow-bg-blue) 0%,
-      #F1F4F7 28%,
-      #F5F6F7 45%,
-      var(--krow-bg) 65%,
-      #F8F8F1 86%,
-      var(--krow-bg-warm) 100%
+      #FDF2F4 0%,
+      #FBF4F5 28%,
+      #FAF9FA 50%,
+      #FAF8F5 72%,
+      #FEF7EE 100%
     );
   }
 
@@ -266,13 +258,13 @@
   }
   .gradient-mesh {
     background-image:
-      radial-gradient(at 15% 15%, rgba(10, 57, 223, 0.07) 0px, transparent 50%),
-      radial-gradient(at 85% 5%, rgba(249, 229, 71, 0.12) 0px, transparent 50%),
-      radial-gradient(at 75% 85%, rgba(10, 57, 223, 0.05) 0px, transparent 50%),
-      radial-gradient(at 10% 90%, rgba(209, 224, 215, 0.20) 0px, transparent 50%);
+      radial-gradient(at 15% 15%, rgba(200, 16, 46, 0.05) 0px, transparent 50%),
+      radial-gradient(at 85% 5%, rgba(249, 115, 22, 0.06) 0px, transparent 50%),
+      radial-gradient(at 75% 85%, rgba(200, 16, 46, 0.04) 0px, transparent 50%),
+      radial-gradient(at 10% 90%, rgba(254, 215, 170, 0.12) 0px, transparent 50%);
   }
   .gradient-text {
-    color: #0838E0;
+    color: #C8102E;
   }
   .glow-blue {
     box-shadow: 0 0 40px rgba(10, 57, 223, 0.15);
@@ -306,10 +298,10 @@
      identical everywhere and never relies on the browser default. */
   .focus-ring {
     @apply outline-none ring-offset-2 ring-offset-background
-           focus-visible:ring-2 focus-visible:ring-[#0838E0]/60;
+           focus-visible:ring-2 focus-visible:ring-[#C8102E]/60;
   }
   .focus-ring-inset {
-    @apply outline-none focus-visible:ring-2 focus-visible:ring-[#0838E0]/60;
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-[#C8102E]/60;
   }
 
   /* Skeleton shimmer — a moving highlight reads as loading far better than a
@@ -335,91 +327,6 @@
   }
 }
 
-/**
- * Astryx components, wearing KROW.
- *
- * Astryx reads its own CSS custom properties, so dressing it in the KROW
- * language is a matter of re-pointing those tokens at the ones the rest of the
- * app already uses — not of overriding component rules. Scoped to `.krow-astryx`
- * so nothing outside an Astryx island is touched, and unlayered so it wins over
- * the package's `@layer astryx-base` defaults.
- *
- * Only the tokens Tab and TabList actually read are declared. Anything else
- * keeps the package default, which is the point of restating as little as
- * possible.
- */
-.krow-astryx {
-  /* The selected indicator rule. KROW blue is the active state. */
-  --color-accent: #0838E0;
-  /* Tab labels: selected picks up brand, the rest the app's secondary ink. */
-  --color-text-primary: #0838E0;
-  --color-text-secondary: hsl(var(--ink-3));
-  --color-border: hsl(var(--border));
-  /* The hover wash sits *over* the label, so it has to stay translucent — an
-     opaque surface token here paints the tab's own text out. */
-  --color-overlay-hover: rgba(10, 57, 223, 0.06);
-  --color-overlay-pressed: rgba(10, 57, 223, 0.11);
-  --font-family-body: var(--font-body);
-}
-
-.dark .krow-astryx {
-  --color-accent: #5B8DEF;
-  --color-text-primary: #93B4FF;
-  --color-overlay-hover: rgba(147, 180, 255, 0.10);
-  --color-overlay-pressed: rgba(147, 180, 255, 0.16);
-}
-
-/**
- * Give Astryx's own button styling back.
- *
- * Astryx ships its component CSS inside `@layer astryx-base`, while Tailwind
- * emits its preflight unlayered — and unlayered always beats a layer, whatever
- * the selectors. So Tailwind's `button { font-size: 100%; padding: 0; color:
- * inherit }` reset silently flattened every Astryx tab: no size, no padding, no
- * label colour, leaving five words run together under a stray indicator.
- *
- * `revert-layer` rolls each property back to the previous layer's value, which
- * is Astryx's own. Nothing is re-specified here — the design system keeps
- * authorship of its sizing, and this only stops the reset from reaching it.
- */
-/* Same story for `hasDivider`: preflight's `*{border-width:0}` zeroed the rail
-   under the strip, so the tabs floated over the content with nothing separating
-   them from it. */
-.krow-astryx .astryx-tab-list {
-  border-bottom-width: revert-layer;
-}
-
-.krow-astryx .astryx-tab {
-  font-family: revert-layer;
-  font-size: revert-layer;
-  font-weight: revert-layer;
-  line-height: revert-layer;
-  color: revert-layer;
-  padding-inline: revert-layer;
-}
-
-/**
- * Tab strips scroll rather than wrap.
- *
- * A tab row that wraps to a second line stops reading as one control, and on a
- * phone there is never room for five section names. The strip takes the
- * overflow so the page itself never gains a horizontal scrollbar.
- */
-.krow-astryx-scroll {
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-}
-
-.krow-astryx-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.krow-astryx-scroll > nav {
-  flex-wrap: nowrap;
-  min-width: max-content;
-}
-
 @layer base {
   /* Respect reduced-motion globally rather than per component. */
   @media (prefers-reduced-motion: reduce) {