/* /public/css/app-theme.css Color/font source of truth: memory/World-of-Tenari/Art-Style.md — edit there first, this file holds the working values. Centralized theme + shared background. Loaded by index.html, daily-brief.html, settings-preview.html, and every /settings/*.html so the look is unified across the lightweight surfaces. Apps with their own visual identity (Scribble, Scope) opt out by simply not loading this file. Theme is selected via [data-theme="dark"|"light"] on , written by /js/appearance-apply.js before first paint. The "auto" value is resolved to dark/light by JS via prefers-color-scheme. The body::before backdrop paints the per-theme --bg-image (currently `none` for both themes, so it's the flat --bg colour). Custom user backgrounds were removed 2026-06-18 — the 3D render owns the canvas. */ /* DARK (default) -------------------------------------------------- */ /* Card design system (locked 2026-05-29, Chris): - Dark mode = solid glossy NEAR-BLACK cards (#0a0a0a) + brand MINT accent. - Light mode = solid glossy PURE WHITE cards (#ffffff) + black text. - No transparency, no backdrop-filter blur. "Glossy" = subtle vertical gradient (top a hair lighter than bottom) + soft drop shadow + an inset top highlight. Applies to every .card and .settings-item across every page that loads this theme. */ :root, :root[data-theme="dark"] { --bg: #0a0a0a; --panel: #0a0a0a; --panel-solid: #0a0a0a; --panel-hover: rgba(255, 255, 255, .04); --border: rgba(255, 255, 255, .08); --border-strong:rgba(255, 255, 255, .14); /* Dark-mode text in brand mint (#6ee7b7) — cyan→mint migration 2026-06-02. Body stays a slightly dimmer mint so paragraphs don't vibrate against pure brand mint headings. Dim variants for hints + eyebrows. */ --text: #6ee7b7; --text-body: #43c89a; --text-soft: rgba(110, 231, 183, .82); --text-dim: rgba(110, 231, 183, .55); --accent: #6ee7b7; --accent-dim: rgba(110, 231, 183, .15); --accent-fg: #0a0a0a; /* text/icon colour ON --accent backgrounds */ --danger: #ff4d6a; --warn: #ffaa2a; --success: #6acf73; /* Glossy card tokens — gradient endpoints + composite shadow. */ --card-bg-top: #131313; --card-bg-bot: #0a0a0a; --card-shadow: 0 4px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04); /* Control / field fills — a wash of light over the panel. Declared on :root (not per-theme) because settings-page.css has always used these same white washes in BOTH themes; keeping them theme-independent preserves that. A surface kit that isn't dark-on-light (parchment.css) overrides them. */ --control-bg: rgba(255, 255, 255, .06); /* .back-btn, .key-eye:hover */ --control-bg-hover:rgba(255, 255, 255, .12); /* .back-btn:hover */ --btn-bg-hover: rgba(255, 255, 255, .10); /* .btn:hover */ --field-bg: rgba(255, 255, 255, .05); /* input / select / textarea */ --field-bg-focus: rgba(255, 255, 255, .08); --track-bg: rgba(255, 255, 255, .10); /* .switch .slider track (off) */ --pill-bg: rgba(255, 255, 255, .04); /* .verify-pill */ --knob: #fff; /* .slider::before (off) */ --knob-on: #0a0a0a; /* .slider::before (checked) */ --code-bg: rgba(0, 0, 0, .4); /* .code-box */ --radius: 14px; --radius-sm: 10px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Default = no background image. The old TeamsBackground.png "stone" CDN default was retired. Users can pick a background via Appearance settings; absent that, the panel/solid colours show. */ --bg-image: none; } /* LIGHT ----------------------------------------------------------- */ :root[data-theme="light"] { --bg: #f4ecdb; --panel: #ffffff; --panel-solid: #ffffff; --panel-hover: rgba(0, 0, 0, .04); --border: rgba(0, 0, 0, .08); --border-strong:rgba(0, 0, 0, .16); --text: #1a1a1a; --text-body: #2a2a2a; --text-soft: rgba(26, 26, 26, .78); --text-dim: rgba(26, 26, 26, .50); --accent: #0f9d6b; --accent-dim: rgba(15, 157, 107, .14); --accent-fg: #ffffff; /* white text on the deep mint accent in light mode */ /* Glossy card tokens — pure white at top, a hair off-white at bottom. */ --card-bg-top: #ffffff; --card-bg-bot: #f7f7f7; --card-shadow: 0 4px 16px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .6); /* Light theme dims the photo bg by default so contrast stays readable. */ --bg-image: none; } html { background: var(--bg); } body { background: transparent; position: relative; color: var(--text); } /* Global safe-area floor — Android's 3-button gesture nav has been eating the bottom of every page that doesn't manage its own padding (chat, scope, daily-brief, scribbles trash, etc.). One body-level rule covers the long tail; pages that manage their own bottom padding overlap it harmlessly. `min-height` resolves to dvh elsewhere; this is just the floor. Pages that scroll a long list (the /settings/* tree) pad their own content container generously instead; see settings-page.css. */ body { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Fixed backdrop layer — paints the per-theme --bg-image (none by default, leaving the flat --bg colour from html). Custom user backgrounds removed 2026-06-18 along with the appearance changer. */ body::before { content: ""; position: fixed; inset: 0; background-image: var(--bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; pointer-events: none; }