/* ============================================================ DARK MODE TOKENS Auto via prefers-color-scheme + manual override via [data-theme="dark"] on ============================================================ */ @layer tokens { /* Auto dark when system prefers it (and no manual override) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-page: #15140f; --bg-surface: #1f1d17; --bg-elevated: #2a2820; --bg-muted: #1a1812; --bg-inverted: #f0e6d6; --text-strong: #f7f4ee; --text-default: #d8d1c4; --text-muted: #908576; --text-subtle: #6b6253; --text-inverted: #1f1c15; --text-link: #a4c476; --text-link-hover:#c8dca8; --border-subtle: rgba(255,255,255,0.08); --border-default: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.22); --border-focus: #a4c476; --brand-primary: #82a94f; --brand-primary-hover: #a4c476; --brand-primary-fg: #15140f; --success-bg: rgba(164,196,118,0.18); --success-fg: #c8dca8; --warning-bg: rgba(232,198,89,0.18); --warning-fg: #f0d97a; --danger-bg: rgba(233,133,114,0.18); --danger-fg: #f4a08a; --info-bg: rgba(111,163,203,0.18); --info-fg: #9bbfdc; --shadow-xs: 0 1px 2px rgba(0,0,0,0.35); --shadow-sm: 0 2px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 8px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30); --shadow-lg: 0 12px 24px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.40); --shadow-xl: 0 24px 48px rgba(0,0,0,0.60), 0 8px 16px rgba(0,0,0,0.45); --shadow-focus: 0 0 0 3px rgba(164,196,118,0.40); } } /* Manual override - works regardless of system pref */ :root[data-theme="dark"] { --bg-page: #15140f; --bg-surface: #1f1d17; --bg-elevated: #2a2820; --bg-muted: #1a1812; --bg-inverted: #f0e6d6; --text-strong: #f7f4ee; --text-default: #d8d1c4; --text-muted: #908576; --text-subtle: #6b6253; --text-inverted: #1f1c15; --text-link: #a4c476; --text-link-hover:#c8dca8; --border-subtle: rgba(255,255,255,0.08); --border-default: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.22); --border-focus: #a4c476; --brand-primary: #82a94f; --brand-primary-hover: #a4c476; --brand-primary-fg: #15140f; --success-bg: rgba(164,196,118,0.18); --success-fg: #c8dca8; --warning-bg: rgba(232,198,89,0.18); --warning-fg: #f0d97a; --danger-bg: rgba(233,133,114,0.18); --danger-fg: #f4a08a; --info-bg: rgba(111,163,203,0.18); --info-fg: #9bbfdc; --shadow-xs: 0 1px 2px rgba(0,0,0,0.35); --shadow-sm: 0 2px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 8px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30); --shadow-lg: 0 12px 24px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.40); --shadow-xl: 0 24px 48px rgba(0,0,0,0.60), 0 8px 16px rgba(0,0,0,0.45); --shadow-focus: 0 0 0 3px rgba(164,196,118,0.40); } /* Force light when user explicitly chose light */ :root[data-theme="light"] { /* default tokens already light */ } } @layer components { /* Smooth color transitions when theme switches */ body, .ds-card, .ds-input, .ds-textarea, .ds-select, .ds-btn, .ds-header, .ds-footer, .ds-tbar, .ds-page-header, .ds-empty { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } /* Hero gradient adapts in dark */ :root[data-theme="dark"] .ds-hero, @media (prefers-color-scheme: dark) { :root:not([data-theme]) .ds-hero { background: linear-gradient(180deg, var(--bg-page) 0%, #1a2a16 100%); } } /* Hero italic accent stays brand-green */ .ds-hero__title em { color: var(--brand-primary); } /* Coop pills more visible in dark */ :root[data-theme="dark"] .ds-coop { background: var(--bg-muted); } /* Theme toggle button in tbar */ .ds-theme-toggle { display: inline-flex; align-items: center; background: rgba(255,255,255,0.08); color: var(--neutral-100); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); padding: 2px 8px; font-size: var(--fs-xs); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .ds-theme-toggle:hover { background: rgba(255,255,255,0.16); } .ds-theme-toggle svg { width: 14px; height: 14px; } } /* ===== HARD-OVERRIDE Legacy CSS (inline in _layout.php) ===== */ :root[data-theme="dark"] body, :root[data-theme="dark"] section { background-color: var(--bg-page) !important; color: var(--text-default) !important; } :root[data-theme="dark"] .ds-section[style*="background"] { background: var(--bg-surface) !important; } :root[data-theme="dark"] .ds-empty { background: var(--bg-muted) !important; border-color: var(--border-default) !important; } :root[data-theme="dark"] .ds-card { background: var(--bg-elevated) !important; } :root[data-theme="dark"] .ds-page-header { background: var(--bg-muted) !important; border-bottom-color: var(--border-subtle) !important; } :root[data-theme="dark"] .ds-hero { background: linear-gradient(180deg, #15140f 0%, #1a2a16 100%) !important; } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: var(--text-strong) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) body, :root:not([data-theme]) section { background-color: var(--bg-page) !important; color: var(--text-default) !important; } :root:not([data-theme]) .ds-card { background: var(--bg-elevated) !important; } :root:not([data-theme]) .ds-page-header { background: var(--bg-muted) !important; } }