up

frontend/src/style.css

@@ -3,44 +3,43 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-/* ===== Cream & warm-orange palette =====
-   Background : warm cream (subtle beige, less cold than stone)
-   Accent     : burnt orange (signal-lamp vibe, classic radio amateur)
-   Status     : muted emerald / amber / rose
-   The BandSlotGrid cells keep their emerald+indigo independently — that
-   colour code conveys QSO status semantics, not app branding.
+/* ===== Warm taupe & burnt-orange palette =====
+   A step darker than pure cream: the body is a soft taupe so white-ish
+   cards lift off the surface, giving real depth without going dark.
+   Borders are more defined; muted surfaces sit between bg and card so
+   secondary chrome (toolbars, table headers) reads as quietly recessed.
 */
 @theme {
-  --color-background: #faf6ed;        /* warm cream */
+  --color-background: #e8dfc9;        /* warm taupe — deeper than cream */
   --color-foreground: #1c1917;        /* stone-900 */
 
-  --color-card: #ffffff;
+  --color-card: #faf6ea;              /* lifted off-white cream */
   --color-card-foreground: #1c1917;
 
-  --color-popover: #ffffff;
+  --color-popover: #faf6ea;
   --color-popover-foreground: #1c1917;
 
-  --color-primary: #c2410c;           /* orange-700 — burnt orange */
+  --color-primary: #b8410c;           /* burnt orange, slightly deeper */
   --color-primary-foreground: #fff7ed;
 
-  --color-secondary: #f5efe0;         /* warmer secondary surface */
+  --color-secondary: #ddd2b8;         /* a touch under the bg */
   --color-secondary-foreground: #1c1917;
 
-  --color-muted: #f5efe0;
-  --color-muted-foreground: #57534e;  /* stone-600 */
+  --color-muted: #ddd2b8;             /* toolbars / table headers */
+  --color-muted-foreground: #44403c;  /* stone-700 — readable on muted */
 
-  --color-accent: #ffedd5;            /* orange-100 — light cream-orange */
-  --color-accent-foreground: #9a3412; /* orange-800 */
+  --color-accent: #f8d6a9;            /* warm amber-cream */
+  --color-accent-foreground: #7c2d12; /* orange-900 */
 
-  --color-destructive: #b91c1c;       /* red-700, classic brick */
+  --color-destructive: #a51c1c;
   --color-destructive-foreground: #ffffff;
 
-  --color-border: #e7dfd0;            /* warm beige border */
-  --color-input: #e7dfd0;
-  --color-ring: #ea580c;              /* orange-600 — focus ring */
+  --color-border: #c8b994;            /* deeper warm beige border */
+  --color-input: #c8b994;
+  --color-ring: #d97706;              /* amber-600 focus ring */
 
-  --color-ok: #15803d;                /* emerald-700 — slightly deeper */
-  --color-warn: #b45309;              /* amber-700 */
+  --color-ok: #15803d;
+  --color-warn: #b45309;
 
   --radius: 0.5rem;
 
@@ -61,12 +60,19 @@
   }
 }
 
-/* Warm scrollbar */
+/* Subtle elevation on every Card-styled surface so cards visibly sit on
+   top of the taupe background — paper-on-paper feel. */
+.bg-card {
+  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05),
+              0 0 0 1px rgba(28, 25, 23, 0.02);
+}
+
+/* Warm scrollbar tuned to the deeper bg */
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
-  background: #d6cbb1;
+  background: #b8a880;
   border-radius: 5px;
   border: 2px solid var(--color-background);
 }
-::-webkit-scrollbar-thumb:hover { background: #b3a47d; }
+::-webkit-scrollbar-thumb:hover { background: #968455; }