feat: Light theme

fabula-ultima-sheet.css

@@ -964,6 +964,66 @@ input[type="number"] {
   font-weight: 600;
 }
 
+/* ── LIGHT THEME ─────────────────────────────────── */
+[data-theme="light"] {
+  --bg: #f4efe4;
+  --surface: #ede7d9;
+  --surface2: #e6dfd0;
+  --surface3: #dcd5c3;
+  --border: #c8bfa8;
+  --border-bright: #a89878;
+  --teal: #1a7a76;
+  --teal-dim: #b8e0de;
+  --gold: #7a5a18;
+  --gold-dim: #e8d8a0;
+  --red: #b02a20;
+  --text: #2a2218;
+  --text-dim: #6a5f50;
+  --text-bright: #1a1410;
+  --crisis: #c0392b;
+}
+
+[data-theme="light"] body {
+  background-image:
+    radial-gradient(ellipse at 20% 10%, rgba(26, 122, 118, 0.07) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 90%, rgba(122, 90, 24, 0.07) 0%, transparent 50%);
+}
+
+[data-theme="light"] header {
+  background: linear-gradient(135deg, var(--surface) 0%, var(--surface3) 100%);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="light"] input[type="text"]:focus,
+[data-theme="light"] input[type="number"]:focus,
+[data-theme="light"] textarea:focus,
+[data-theme="light"] select:focus {
+  box-shadow: 0 0 0 2px rgba(26, 122, 118, 0.15);
+}
+
+[data-theme="light"] .fp-pip.filled {
+  box-shadow: 0 0 8px rgba(26, 122, 118, 0.35);
+}
+
+/* ── THEME TOGGLE BUTTON ─────────────────────────── */
+.btn-theme {
+  font-family: var(--font-display);
+  font-size: 0.55rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  padding: 7px 12px;
+  cursor: pointer;
+  border: 1px solid var(--border-bright);
+  background: transparent;
+  color: var(--text-dim);
+  transition: all 0.2s;
+}
+
+.btn-theme:hover {
+  border-color: var(--gold-dim);
+  color: var(--gold);
+}
+
 /* ── RESPONSIVE ──────────────────────────────────── */
 @media (max-width: 900px) {