/* ============================================================================ * src/styles/theme-calm.css * ---------------------------------------------------------------------------- * Second theme for Adze. Activated when the element carries the * attribute data-theme="calm". Sets overrides for the CSS custom properties * declared in styles.css :root, plus a few structural overrides for rules * whose presentation (not their color) needs to change (flat body, dropped * gradients, removed glows). * * Design posture — Calm (viveka): * - Forest-tradition aesthetic: raw unfinished teak, palm-leaf, robed * indigo-grey. No gold leaf, no red-fire alarm, no stage lighting. * - The passaddhi test: every visual element serves attention or removes * itself. The room stops vibrating. * - Keep the game scaffolding HONEST. Māra stays named. Shadow bar stays * fully visible — just desaturated. Nothing engine-driven is hidden. * - Motion: breath (4s) stays because it IS the practice. Shadow-bar * transition stays because it is honesty about setback. Everything * else ambient — shimmer, pulse-glow, danger-pulse, fabPulse, float-up, * ember drift, body::before dread tint — drops. * * Palette source: Claude Design review 2026-04-21 (Calm / viveka brief). * ============================================================================ */ :root[data-theme="calm"] { /* ─── Surfaces — raw unfinished teak ─── */ --surface-0: #1a1613; --surface-1: #201b16; /* body flat background (see structural override) */ --surface-2: #262019; --surface-ink: #c9beac; /* ─── Path — no gold leaf, muted bone-wax ─── */ --path-core: #b8a278; --path-bright: #d4c4a0; --path-deep: #8a7550; --path-rgb: 212, 196, 160; --path-mid-rgb: 184, 162, 120; --path-core-rgb: 138, 117, 80; /* ─── Parchment — actual palm-leaf ─── */ --parchment-ink: #3a2f22; --parchment-heading: #5a4428; --parchment-mid-rgb: 216, 198, 160; /* ─── Māra — honest but not theatrical, oxidized iron (not fire) ─── */ --mara-core: #8a4a3a; --mara-deep: #5a2e24; --mara-shadow: #3f2019; --mara-ink: #c89082; --mara-rgb: 138, 74, 58; --mara-banner-deep-rgb: 90, 46, 36; --mara-surface-rgb: 40, 24, 20; --mara-surface-deep-rgb: 28, 16, 13; /* ─── Sangha — robed indigo-grey, not purple neon ─── */ --sangha-rgb: 138, 128, 168; /* ─── Released — forest moss, not success-green ─── */ --released-rgb: 122, 140, 96; /* ─── Ember — demoted, near-invisible ─── Used only by the kasiṇa / focus-timer surface in calm mode; any ambient drift usage is killed via the animation block below. */ --ember: #6b5838; /* ─── Overlay — dim, not red ─── Black dread instead of warm-grey. The body::before transition is suppressed in the structural block below so high shadow levels no longer repaint-vibrate the whole viewport; the dread is still there as a static darken, just unvarying. */ --dread-rgb: 0, 0, 0; /* ─── Motion dial ─── Informational value. Current architecture enforces calm motion via the explicit selector block below (kills named ambient animations) while preserving .breath, .fade-in, and the shadow-bar transition (all functional or state-communicating, not ambient). A future theme-overlay architecture could wire --motion-ambient into animation-duration calc() for a smooth dial, but not today. */ --motion-ambient: 0.25; /* ─── Visual-intensity dial ─── Near-zero weights. The shadow bar in the header renders the number honestly; the full-screen darkening is effectively gone. */ --dread-weight: 0.12; --shadow-overlay-weight: 0.08; } /* ──────────────────────────────────────────────────────────────────────── Structural overrides (Calm only) — rules whose PRESENTATION, not color, needs to change. Each targets a specific rule in styles.css and neutralizes its decorative intent. ──────────────────────────────────────────────────────────────────────── */ /* Flat body background — kill the radial gradient. Warm teak instead of violet-night atmosphere. The dread overlays (body::before, ::after) still apply, but at calm-weight they barely register. */ :root[data-theme="calm"] body { background: var(--surface-1); } /* body::before — drop the transition so the dread tint does not animate/repaint on shadow-level change. The static darken (already near-zero via --dread-weight) is present but no longer vibrates the viewport. */ :root[data-theme="calm"] body::before { transition: none; } /* Gold-text shimmer gradient → flat bone-wax. The classic theme's three-stop gradient reads as jewelry in calm mode; solid color is truer to the forest-tradition register. */ :root[data-theme="calm"] .gold-text { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: unset; color: var(--path-bright); } /* Scroll-paper — drop the 50px gold glow; a palm-leaf sutta is a quiet object, not a spotlit relic. Single hairline border in path-deep instead. */ :root[data-theme="calm"] .scroll-paper { box-shadow: none; border: 1px solid var(--path-deep); } /* ──────────────────────────────────────────────────────────────────────── Ambient-animation freeze (Calm only). Specificity: :root[data-theme="calm"] .class beats a bare .class, so these rules override without !important. KEPT alive (deliberate): - .breath (4s) — the breathing animation IS the practice. - .fade-in / .float-down / .scroll-reveal — one-shot transitions communicate state change, not ambient energy. - .shadow-bar-fill width transition — honesty about setback. DROPPED: - .pulse-glow, .shimmer, .danger-pulse — ambient agitation. - .quest-banner::before shimmer sweep — decorative. - .feedback-fab.active fabPulse — alarm language. - .ember drift — ambient particles. - .float-up (point-gain floater) — celebration dopamine. ──────────────────────────────────────────────────────────────────────── */ :root[data-theme="calm"] .pulse-glow, :root[data-theme="calm"] .shimmer, :root[data-theme="calm"] .danger-pulse, :root[data-theme="calm"] .ember, :root[data-theme="calm"] .float-up, :root[data-theme="calm"] .quest-banner::before, :root[data-theme="calm"] .feedback-fab.active { animation: none; }