restyle the rest of the pages

frontend/src/index.css

@@ -2,33 +2,93 @@
 @plugin "flowbite-react/plugin/tailwindcss";
 
 @theme {
-    /* Fonts */
-    /*--font-heading: "Newsreader", serif; */
-    --font-body: "IBM Plex Sans", sans-serif;
+    /* ── Fonts ───────────────────────────────────────────────────────────── */
+    --font-body: "IBM Plex Sans", system-ui, sans-serif;
     --font-data: "IBM Plex Mono", monospace;
 
-    /* Colours */
+    /* ── Surfaces ────────────────────────────────────────────────────────── */
     --color-background: #F7F4EE;
     --color-sidebar: #F2EEE6;
     --color-card: #FDFBF7;
-    --color-accent: #A85A38;
-    --color-accent-hover: #94492A;
-    --color-live-card: #F0EBE1;
     --color-fields: #F4F0E8;
+    --color-panel: #F1ECE3;
+    --color-dropzone: #F9F6EF;
+    --color-armed: #F6EFE6;
+    --color-live-card: #F0EBE1;
+    --color-player: #2B2620;
+    --color-player-stripe: #3A342C;
 
-    /* Colour Fonts */
+    /* ── Ink ─────────────────────────────────────────────────────────────── */
     --color-text-primary: #2B2620;
     --color-text-strong: #35302A;
-    --color-faint-mono: #A79C8E;
+    --color-text-body: #554D44;
+    --color-text-control: #4A423A;
+    --color-text-secondary: #6E6559;
+    --color-text-table: #7A7166;
     --color-muted: #9A9084;
-    --color-hover: #E7E0D2;
-    --color-hairline: #F0EBE2;
-    --color-live-red: #B5432E;
+    --color-faint-mono: #A79C8E;
     --color-on-dark: #FBF8F2;
+    --color-on-accent: #FDFBF7;
+
+    /* ── Accents ─────────────────────────────────────────────────────────── */
+    --color-accent: #A85A38;
+    --color-accent-hover: #94492A;
+    --color-accent-light: #C87A52;
+    --color-accent-disabled: #C9AE9C;
+    --color-olive: #6E7A50;
+    --color-olive-hover: #5D6843;
+    --color-olive-light: #8A9668;
+    --color-live-red: #B5432E;
+
+    /* ── Lines, chips, placeholders ──────────────────────────────────────── */
+    --color-hairline: #F0EBE2;
+    --color-hover: #E7E0D2;
+    --color-chip: #EAE3D7;
+    --color-chip-hover: #DAD1C0;
+    --color-ring-dashed: #E2DACB;
+    --color-inactive: #DED7CA;
+    --color-inactive-strong: #C4BAA9;
+
+    /* ── Elevation — soft shadows instead of borders ─────────────────────── */
+    --shadow-card: 0 1px 2px rgba(60, 48, 32, .05), 0 10px 26px -18px rgba(60, 48, 32, .35);
+    --shadow-card-hover: 0 2px 4px rgba(60, 48, 32, .07), 0 18px 34px -18px rgba(60, 48, 32, .45);
+    --shadow-panel: 0 1px 2px rgba(60, 48, 32, .05), 0 16px 36px -22px rgba(60, 48, 32, .3);
+    --shadow-player: 0 1px 2px rgba(60, 48, 32, .08), 0 22px 46px -26px rgba(60, 48, 32, .5);
+    --shadow-terracotta: 0 1px 2px rgba(90, 40, 20, .2), 0 12px 22px -14px rgba(90, 40, 20, .55);
+    --shadow-olive: 0 1px 2px rgba(50, 60, 30, .18), 0 10px 20px -14px rgba(50, 60, 30, .55);
+
+    --inset-shadow-hairline: inset 0 0 0 1px rgba(60, 48, 32, .08);
+    --inset-shadow-armed: inset 0 0 0 1.5px #A85A38;
+    --inset-shadow-focus: inset 0 0 0 1.5px #C87A52;
+    --inset-shadow-dashed: inset 0 0 0 1.5px #E2DACB;
+
+    /* ── Shape ───────────────────────────────────────────────────────────── */
+    --radius-hero: 16px;
+    --radius-panel: 15px;
+    --radius-tile: 13px;
+    --radius-thumb: 12px;
+    --radius-field: 10px;
+    --radius-btn: 9px;
+    --radius-chip: 8px;
+
+    /* ── Motion — the live dot, plus the player's one-shot action badge ──── */
+    --animate-live-pulse: livePulse 2.2s ease-in-out infinite;
+    --animate-flash-badge: flashBadge 500ms ease-out forwards;
+
+    @keyframes livePulse {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: .45; transform: scale(1.35); }
+    }
+
+    @keyframes flashBadge {
+        0% { opacity: 0; transform: scale(.75); }
+        25% { opacity: 1; transform: scale(1); }
+        100% { opacity: 0; transform: scale(1.4); }
+    }
 }
 
 :root {
-    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     line-height: 1.5;
     font-weight: 400;
     font-synthesis: none;
@@ -39,11 +99,12 @@
 
 body {
     background-color: var(--color-background);
-    font-family: "IBM Plex Sans", sans-serif;
+    font-family: "IBM Plex Sans", system-ui, sans-serif;
+    color: var(--color-text-body);
 }
 
 @utility font-heading {
     font-family: "Newsreader", serif;
     font-weight: 400;
     color: #2B2620;
-}
+}