feat: TASK-005 - globals.css design tokens

- Added Source Serif 4 font import
- Added new design tokens per strategy spec:
  --bg-void, --bg-panel, --bg-raised (background depth levels)
  --mana-raw, --mana-transference (new mana element colors)
  --border-accent (border highlight)
  --font-display, --font-ui (new font custom properties)
- Replaced hardcoded font-family refs with CSS variables
- Removed redundant .dark block (identical to :root, always dark mode)
- Consolidated @theme inline section to essential mappings

docs/project-structure.txt

@@ -12,11 +12,16 @@ Mana-Loop/
 ├── db/
 │   └── custom.db
 ├── docs/
+│   ├── .workflow/
+│   │   └── TASK-001-playwright-setup.json
 │   ├── strategy/
 │   │   └── overall-remediation-plan.md
 │   ├── tasks/
-│   │   └── TASK-001-playwright-setup.md
+│   │   ├── TASK-001-playwright-setup.md
+│   │   ├── TASK-005-globals-css-tokens.md
+│   │   └── TASK-006-left-panel-redesign.md
 │   ├── GAME_BRIEFING.md
+│   ├── active-task-log.md
 │   ├── circular-deps.txt
 │   ├── dependency-graph.json
 │   ├── project-structure.txt

src/app/globals.css

@@ -1,48 +1,24 @@
-@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');
 
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
 }
 
 :root {
@@ -111,9 +87,9 @@
   --interactive-disabled: #1e2a45;
   
   /* === Typography === */
-  --font-heading: 'Cinzel', serif;
+  --font-display: 'Cinzel', serif;
-  --font-body: 'Crimson Text', Georgia, serif;
+  --font-body: 'Source Serif 4', 'Crimson Text', Georgia, serif;
-  --font-mono: 'JetBrains Mono', monospace;
+  --font-ui: 'JetBrains Mono', monospace;
   
   /* === Shadow System === */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -123,6 +99,14 @@
   --shadow-glow-purple: 0 0 15px rgba(124, 92, 191, 0.4);
   --shadow-glow-accent: 0 0 15px rgba(60, 111, 232, 0.4);
   
+  /* === Mana Loop Design Tokens (Strategy Spec) === */
+  --bg-void: #0d0d0f;
+  --bg-panel: #141418;
+  --bg-raised: #242430;
+  --mana-raw: #8b7fd4;
+  --mana-transference: #1abc9c;
+  --border-accent: rgba(255, 255, 255, 0.22);
+
   /* === Legacy Shadcn Variables (mapped to new system) === */
   --background: var(--bg-base);
   --foreground: var(--text-primary);
@@ -176,128 +160,19 @@
   --game-success: var(--color-success);
 }
 
-.dark {
-  /* Same as :root - we're always in dark mode for this game */
-  --bg-base: #060811;
-  --bg-surface: #0C1020;
-  --bg-elevated: #111628;
-  --bg-sunken: #181f35;
-  --border-subtle: #1e2a45;
-  --border-default: #2a3a60;
-  --border-focus: #5B8FFF;
-  --text-primary: #c8d8f8;
-  --text-secondary: #7a92c0;
-  --text-muted: #4a5f8a;
-  --text-disabled: #2a3a60;
-  --mana-fire: #E8734A;
-  --mana-water: #3BAFDA;
-  --mana-air: #C8D8F8;
-  --mana-earth: #B8860B;
-  --mana-light: #D4A843;
-  --mana-dark: #4B0082;
-  --mana-death: #8B7D8B;
-  --mana-transfer: #00CED1;
-  --mana-metal: #708090;
-  --mana-sand: #C2B280;
-  --mana-lightning: #FFD700;
-  --mana-crystal: #B0E0E6;
-  --mana-stellar: #FF8C00;
-  --mana-void: #1A0A2E;
-  --color-success: #27AE60;
-  --color-warning: #F39C12;
-  --color-danger: #C0392B;
-  --color-info: #3B6FE8;
-  --rarity-common: #9CA3AF;
-  --rarity-common-glow: rgba(156, 163, 175, 0.25);
-  --rarity-uncommon: #22C55E;
-  --rarity-uncommon-glow: rgba(34, 197, 94, 0.25);
-  --rarity-rare: #3B82F6;
-  --rarity-rare-glow: rgba(59, 130, 246, 0.25);
-  --rarity-epic: #A855F7;
-  --rarity-epic-glow: rgba(168, 85, 247, 0.25);
-  --rarity-legendary: #F59E0B;
-  --rarity-legendary-glow: rgba(245, 158, 11, 0.375);
-  --rarity-mythic: #E8734A;
-  --rarity-mythic-glow: rgba(232, 115, 74, 0.25);
-  --interactive-primary: #5B8FFF;
-  --interactive-primary-hover: #7BAFFF;
-  --interactive-secondary: #2a3a60;
-  --interactive-secondary-hover: #3a4a70;
-  --interactive-danger: #C0392B;
-  --interactive-danger-hover: #E74C3C;
-  --interactive-disabled: #1e2a45;
-  --font-heading: 'Cinzel', serif;
-  --font-body: 'Crimson Text', Georgia, serif;
-  --font-mono: 'JetBrains Mono', monospace;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
-  --shadow-glow-gold: 0 0 15px rgba(212, 168, 67, 0.4);
-  --shadow-glow-purple: 0 0 15px rgba(124, 92, 191, 0.4);
-  --shadow-glow-accent: 0 0 15px rgba(60, 111, 232, 0.4);
-  --background: var(--bg-base);
-  --foreground: var(--text-primary);
-  --card: var(--bg-surface);
-  --card-foreground: var(--text-primary);
-  --popover: var(--bg-elevated);
-  --popover-foreground: var(--text-primary);
-  --primary: var(--interactive-primary);
-  --primary-foreground: #ffffff;
-  --secondary: var(--bg-sunken);
-  --secondary-foreground: var(--text-primary);
-  --muted: var(--bg-sunken);
-  --muted-foreground: var(--text-secondary);
-  --accent: var(--interactive-secondary);
-  --accent-foreground: var(--text-primary);
-  --destructive: var(--color-danger);
-  --border: var(--border-subtle);
-  --input: var(--border-subtle);
-  --ring: var(--border-focus);
-  --chart-1: var(--mana-fire);
-  --chart-2: var(--mana-water);
-  --chart-3: var(--mana-light);
-  --chart-4: var(--color-success);
-  --chart-5: var(--mana-lightning);
-  --sidebar: var(--bg-surface);
-  --sidebar-foreground: var(--text-primary);
-  --sidebar-primary: var(--mana-light);
-  --sidebar-primary-foreground: #0C1020;
-  --sidebar-accent: var(--interactive-secondary);
-  --sidebar-accent-foreground: var(--text-primary);
-  --sidebar-border: var(--border-subtle);
-  --sidebar-ring: var(--mana-light);
-  --game-bg: var(--bg-base);
-  --game-bg1: var(--bg-surface);
-  --game-bg2: var(--bg-elevated);
-  --game-bg3: var(--bg-sunken);
-  --game-border: var(--border-subtle);
-  --game-border2: var(--border-default);
-  --game-text: var(--text-primary);
-  --game-text2: var(--text-secondary);
-  --game-text3: var(--text-muted);
-  --game-gold: var(--mana-light);
-  --game-gold2: #A87830;
-  --game-purple: #7C5CBF;
-  --game-purpleL: #A07EE0;
-  --game-accent: var(--interactive-primary);
-  --game-accentL: var(--interactive-primary-hover);
-  --game-danger: var(--color-danger);
-  --game-success: var(--color-success);
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground;
-    font-family: 'Crimson Text', Georgia, serif;
+    font-family: var(--font-body);
   }
 }
 
 /* Game-specific styles */
 .game-root {
-  font-family: 'Crimson Text', Georgia, serif;
+  font-family: var(--font-body);
   background: var(--game-bg);
   color: var(--game-text);
   min-height: 100vh;
@@ -311,7 +186,7 @@
 }
 
 .game-title {
-  font-family: 'Cinzel', serif;
+  font-family: var(--font-display);
   background: linear-gradient(135deg, var(--game-gold) 0%, var(--game-purpleL) 50%, var(--game-accentL) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -319,13 +194,13 @@
 }
 
 .game-panel-title {
-  font-family: 'Cinzel', serif;
+  font-family: var(--font-display);
   letter-spacing: 2px;
   text-transform: uppercase;
 }
 
 .game-mono {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-ui);
 }
 
 /* Scrollbar */