/* ============================================================ AURA — COLOR TOKENS Dark, calm neutral base + semantic "mood" accents per domain. Everything is oklch so accents stay luminous on near-black. ============================================================ */ :root { /* ---- Neutral base (cool-tinted near-black) ---- */ --bg: oklch(0.17 0.012 265); /* the single ambient canvas */ --bg-deep: oklch(0.13 0.012 265); /* vignette / behind everything */ --surface: oklch(0.22 0.013 265); /* card body */ --surface-raised: oklch(0.255 0.014 265); /* active "now" card */ --surface-sunken: oklch(0.195 0.012 265); /* wells, track grooves */ --hairline: oklch(1 0 0 / 0.07); /* 1px card edge */ --hairline-strong: oklch(1 0 0 / 0.12); /* ---- Foreground ---- */ --fg: oklch(0.97 0.005 265); /* hero numbers, primary text */ --fg-muted: oklch(0.78 0.01 265); /* secondary text */ --fg-dim: oklch(0.62 0.012 265); /* captions, history labels */ --fg-faint: oklch(0.50 0.012 265); /* timestamps on history */ /* ============================================================ MOOD ACCENTS — chosen by card type, not by status. Each mood ships: base (icon/number/stroke), soft (translucent fill behind the hero), glow (radial bloom for the active card). ============================================================ */ /* climate — cool blue · weather + temperature */ --mood-climate: oklch(0.74 0.13 236); --mood-climate-soft: oklch(0.74 0.13 236 / 0.14); --mood-climate-glow: oklch(0.74 0.16 236 / 0.30); /* health — warm amber · medication + wellbeing */ --mood-health: oklch(0.81 0.13 72); --mood-health-soft: oklch(0.81 0.13 72 / 0.14); --mood-health-glow: oklch(0.81 0.15 72 / 0.30); /* success — celebratory green · goal reached */ --mood-success: oklch(0.82 0.16 152); --mood-success-soft: oklch(0.82 0.16 152 / 0.14); --mood-success-glow: oklch(0.82 0.18 152 / 0.32); /* neutral — soft lavender-grey · answers from the web */ --mood-neutral: oklch(0.80 0.035 280); --mood-neutral-soft: oklch(0.80 0.035 280 / 0.12); --mood-neutral-glow: oklch(0.80 0.05 280 / 0.22); /* home — warm light · smart-home + lighting */ --mood-home: oklch(0.85 0.12 92); --mood-home-soft: oklch(0.85 0.12 92 / 0.14); --mood-home-glow: oklch(0.85 0.14 92 / 0.30); /* ---- Default card accent (resolved per MomentCard) ---- */ --accent: var(--mood-neutral); --accent-soft: var(--mood-neutral-soft); --accent-glow: var(--mood-neutral-glow); /* ---- Functional ---- */ --track: oklch(1 0 0 / 0.09); /* progress-ring / bar groove */ --toggle-off: oklch(0.30 0.012 265); --scrim: oklch(0.10 0.01 265 / 0.55); /* over imagery for legibility */ --scrim-soft: oklch(0.10 0.01 265 / 0.45); /* top of a media scrim gradient (lighter) */ --scrim-deep: oklch(0.10 0.01 265 / 0.75); /* bottom of a media scrim gradient (darker, for text) */ --on-media: oklch(0.98 0.005 265); /* text on photos — stays light both themes */ --meme-text-shadow: 0 2px 14px oklch(0 0 0 / .65), 0 0 2px oklch(0 0 0 / .9); /* caps meme captions над фото */ } /* ============================================================ LIGHT THEME — for bright rooms / daytime. Warm-tinted near-white base, deeper accents for contrast. Set data-theme="light" on a wrapper (e.g. ). Media cards keep a dark scrim + light text via --on-media. ============================================================ */ [data-theme="light"] { --bg: oklch(0.965 0.006 255); --bg-deep: oklch(0.93 0.007 255); --surface: oklch(0.995 0.003 255); --surface-raised: oklch(1 0 0); --surface-sunken: oklch(0.95 0.006 255); --hairline: oklch(0.20 0.02 265 / 0.10); --hairline-strong: oklch(0.20 0.02 265 / 0.18); --fg: oklch(0.24 0.012 265); --fg-muted: oklch(0.42 0.014 265); --fg-dim: oklch(0.54 0.014 265); --fg-faint: oklch(0.64 0.014 265); /* deeper accents so they read on white */ --mood-climate: oklch(0.56 0.16 240); --mood-climate-soft: oklch(0.56 0.16 240 / 0.12); --mood-climate-glow: oklch(0.56 0.16 240 / 0.22); --mood-health: oklch(0.60 0.15 60); --mood-health-soft: oklch(0.60 0.15 60 / 0.13); --mood-health-glow: oklch(0.60 0.15 60 / 0.22); --mood-success: oklch(0.56 0.16 150); --mood-success-soft: oklch(0.56 0.16 150 / 0.13); --mood-success-glow: oklch(0.56 0.16 150 / 0.22); --mood-neutral: oklch(0.50 0.05 280); --mood-neutral-soft: oklch(0.50 0.05 280 / 0.10); --mood-neutral-glow: oklch(0.50 0.06 280 / 0.16); --mood-home: oklch(0.60 0.13 72); --mood-home-soft: oklch(0.60 0.13 72 / 0.13); --mood-home-glow: oklch(0.60 0.13 72 / 0.22); --track: oklch(0.20 0.02 265 / 0.12); --toggle-off: oklch(0.82 0.01 265); --scrim: oklch(0.12 0.01 265 / 0.50); --scrim-soft: oklch(0.10 0.01 265 / 0.45); /* media scrims stay dark + light text in both themes */ --scrim-deep: oklch(0.10 0.01 265 / 0.75); --meme-text-shadow: 0 2px 14px oklch(0 0 0 / .65), 0 0 2px oklch(0 0 0 / .9); } /* ---- Per-type accent resolution. Set data-mood on the card. ---- */ [data-mood="climate"] { --accent: var(--mood-climate); --accent-soft: var(--mood-climate-soft); --accent-glow: var(--mood-climate-glow); } [data-mood="health"] { --accent: var(--mood-health); --accent-soft: var(--mood-health-soft); --accent-glow: var(--mood-health-glow); } [data-mood="success"] { --accent: var(--mood-success); --accent-soft: var(--mood-success-soft); --accent-glow: var(--mood-success-glow); } [data-mood="neutral"] { --accent: var(--mood-neutral); --accent-soft: var(--mood-neutral-soft); --accent-glow: var(--mood-neutral-glow); } [data-mood="home"] { --accent: var(--mood-home); --accent-soft: var(--mood-home-soft); --accent-glow: var(--mood-home-glow); }