@almadar/ui 2.1.3 → 2.1.4

package/themes/trait-wars.css

@@ -168,9 +168,160 @@
 }
 
 /* ==========================================================================
- * LIGHT MODE (alias to dark — game has no light mode)
+ * LIGHT MODE — "Sunlit Manuscript"
+ *
+ * Warm parchment surfaces, dark-ink text, gold accents retained.
+ * Surface hierarchy (lightest → darkest):
+ *   background → card/surface → elevated (hover) → muted
  * ========================================================================== */
 [data-theme="trait-wars-light"] {
-    /* Trait Wars is dark-only. Light selector inherits dark values so the
-       theme switcher doesn't break if someone selects "light". */
+    /* Shadows — warm sepia */
+    --shadow-main:
+        0 4px 14px rgba(139, 115, 85, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 2px 4px rgba(139, 115, 85, 0.08);
+    --shadow-lg:
+        0 8px 30px rgba(139, 115, 85, 0.16), 0 4px 10px rgba(0, 0, 0, 0.06);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-none: none;
+    --shadow-hover:
+        0 12px 40px rgba(139, 115, 85, 0.20), 0 4px 12px rgba(201, 168, 76, 0.10);
+    --shadow-active: 0 2px 8px rgba(139, 115, 85, 0.12);
+
+    /* Border radius — same as dark */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* ======================================================================
+     * CORE COLORS
+     * ====================================================================== */
+
+    /* Primary — Deep gold (darker for contrast on light surfaces) */
+    --color-primary: #9e7e1e;
+    --color-primary-hover: #b8940f;
+    --color-primary-foreground: #faf6ee;
+
+    /* Secondary — Light parchment */
+    --color-secondary: #f0e8d8;
+    --color-secondary-hover: #e6dbc4;
+    --color-secondary-foreground: #3a2f22;
+
+    /* Accent — Teal resonance (same hue, darker for contrast) */
+    --color-accent: #0d9488;
+    --color-accent-foreground: #faf6ee;
+
+    /* Muted — Faded parchment */
+    --color-muted: #ede4d0;
+    --color-muted-foreground: #7a6a50;
+
+    /* Surfaces — warm parchment hierarchy */
+    --color-background: #faf6ee;
+    --color-foreground: #2a1f14;
+    --color-card: #ffffff;
+    --color-card-foreground: #2a1f14;
+    --color-surface: #f5efe3;
+
+    /* Borders & Inputs */
+    --color-border: #d4c4a8;
+    --color-input: #e6dbc4;
+    --color-ring: #9e7e1e;
+
+    /* Semantic colors — warm-shifted for parchment */
+    --color-error: #b91c1c;
+    --color-error-foreground: #faf6ee;
+    --color-success: #15803d;
+    --color-success-foreground: #faf6ee;
+    --color-warning: #b45309;
+    --color-warning-foreground: #2a1f14;
+    --color-info: #0d9488;
+    --color-info-foreground: #faf6ee;
+
+    /* ======================================================================
+     * GAME-SPECIFIC TOKENS
+     * ====================================================================== */
+
+    /* Gold hierarchy (dark → light for light mode) */
+    --tw-gold: #9e7e1e;
+    --tw-gold-mid: #b8940f;
+    --tw-gold-dim: #d4c4a8;
+    --tw-gold-dark: #e6dbc4;
+
+    /* Text hierarchy (dark → light) */
+    --tw-text-primary: #2a1f14;
+    --tw-text-secondary: #5a4a36;
+    --tw-text-dim: #8a7a60;
+
+    /* Surface hierarchy (dark → light) */
+    --tw-surface-elevated: #f0e8d8;
+    --tw-surface-hover: #e6dbc4;
+
+    /* Faction: Resonator (player) */
+    --tw-faction-resonator: #7c3aed;
+    --tw-faction-resonator-glow: rgba(124, 58, 237, 0.15);
+
+    /* Faction: Dominion (enemy) */
+    --tw-faction-dominion: #b91c1c;
+    --tw-faction-dominion-glow: rgba(185, 28, 28, 0.15);
+
+    /* Faction: Neutral */
+    --tw-faction-neutral: #78716c;
+
+    /* Tier colors — slightly darker for light bg contrast */
+    --tw-tier-1: #7a6340;
+    --tw-tier-2: #808080;
+    --tw-tier-3: #9e7e1e;
+    --tw-tier-4: #b8940f;
+
+    /* Combat */
+    --tw-health: #b91c1c;
+    --tw-health-bg: rgba(185, 28, 28, 0.1);
+    --tw-heal: #15803d;
+    --tw-heal-bg: rgba(21, 128, 61, 0.1);
+    --tw-mana: #6d28d9;
+    --tw-mana-bg: rgba(109, 40, 217, 0.1);
+
+    /* ======================================================================
+     * TYPOGRAPHY
+     * ====================================================================== */
+    --font-family:
+        "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0.01em;
+    --line-height: 1.5;
+
+    /* Icon styling — dark gold */
+    --icon-stroke-width: 1.75;
+    --icon-color: #9e7e1e;
+
+    /* Transitions */
+    --transition-fast: 150ms;
+    --transition-normal: 300ms;
+    --transition-slow: 500ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring — gold */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #9e7e1e;
+
+    /* Apply background and foreground colors */
+    background-color: var(--color-background);
+    color: var(--color-foreground);
 }