diff --git a/fabula-ultima-sheet.css b/fabula-ultima-sheet.css
index 4ad7cb5..f9445d3 100644
--- a/fabula-ultima-sheet.css
+++ b/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) {
diff --git a/fabula-ultima-sheet.html b/fabula-ultima-sheet.html
index 7356d8e..6247feb 100644
--- a/fabula-ultima-sheet.html
+++ b/fabula-ultima-sheet.html
@@ -1,5 +1,5 @@
-
+
@@ -9,12 +9,13 @@
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap"
rel="stylesheet">
+
@@ -456,6 +459,9 @@
// ── INIT ───────────────────────────────────────────
function init() {
+ const savedTheme = localStorage.getItem('fabulaUltimaTheme')
+ || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+ document.getElementById('themeToggle').textContent = savedTheme === 'light' ? '☾ Dark' : '☀ Light';
renderStatuses();
renderFP();
renderBonds();
@@ -777,6 +783,15 @@
reader.readAsText(file);
}
+ // ── THEME ──────────────────────────────────────────
+ function toggleTheme() {
+ const html = document.documentElement;
+ const goLight = html.dataset.theme !== 'light';
+ html.dataset.theme = goLight ? 'light' : 'dark';
+ document.getElementById('themeToggle').textContent = goLight ? '☾ Dark' : '☀ Light';
+ localStorage.setItem('fabulaUltimaTheme', html.dataset.theme);
+ }
+
// Auto-save every 30s
setInterval(saveSheet, 30000);