# Liquid Glass Theme Implementation

## Overview
Replaces solid white/dark card surfaces with a unified glassmorphism effect using CSS `backdrop-filter`. No library needed — pure CSS. Works identically on both light and dark themes with only variable overrides per theme.

---

## 1. `src/index.css` changes

### `:root` — replace `--card-bg-opacity` + `--color-surface` with:
```css
--glass-bg: rgba(255, 255, 255, 0.55);
--glass-blur: blur(18px) saturate(160%);
--glass-border: 1px solid rgba(255, 255, 255, 0.5);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
--color-surface: var(--glass-bg);
```

### `[data-theme="dark"]` — replace `--color-surface: rgb(26 26 26 / ...)` with:
```css
--glass-bg: rgba(255, 255, 255, 0.07);
--glass-border: 1px solid rgba(255, 255, 255, 0.12);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
--color-surface: var(--glass-bg);
```
> `--glass-blur` is NOT redeclared in dark — it inherits the same blur from `:root`.

---

## 2. `src/App.css` additions

### Add this block BEFORE the `SHARED PAGE SHELL` section (~line 403):
```css
/* ============================
   LIQUID GLASS – applied to all card/surface elements
   ============================ */
.journal-card,
.calendar-card,
.entry-card,
.entry-modal,
.confirm-modal,
.settings-profile,
.settings-card,
.settings-tutorial-btn,
.settings-clear-btn,
.settings-signout-btn,
.bottom-nav,
.lp__form {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}
```

### Remove individual `box-shadow` from these classes (glass rule handles it):
- `.journal-card` — remove `box-shadow: 0 2px 12px rgba(0,0,0,0.07)`
- `.calendar-card` — remove `box-shadow: 0 2px 10px rgba(0,0,0,0.06)`
- `.entry-card` — remove `box-shadow: 0 2px 6px rgba(0,0,0,0.05)`
- `.settings-profile` — remove `box-shadow: 0 2px 10px rgba(0,0,0,0.06)`
- `.settings-card` — remove `box-shadow: 0 2px 10px rgba(0,0,0,0.06)`

---

## 3. `src/App.css` dark mode cleanup

### Remove entire block (now redundant — glass vars handle background + shadow):
```css
/* -- Cards & surfaces -- */
[data-theme="dark"] .journal-card,
[data-theme="dark"] .calendar-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .settings-profile,
[data-theme="dark"] .entry-card {
    background: var(--color-surface);
    border-color: rgba(74, 222, 128, 0.12);
    box-shadow:
        0 2px 16px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(74, 222, 128, 0.06);
}
```

### Collapse settings buttons dark overrides to color-only:
```css
/* -- Settings buttons -- */
[data-theme="dark"] .settings-clear-btn { color: #f87171; }
[data-theme="dark"] .settings-signout-btn { color: #9ca3af; }
[data-theme="dark"] .settings-signout-btn:hover { color: #d1d5db; }
```
> Remove the full blocks that were setting `background: var(--color-surface)` and `box-shadow` for `.settings-tutorial-btn`, `.settings-clear-btn`, `.settings-signout-btn`.

### Entry modal dark override — keep only the border accent:
```css
[data-theme="dark"] .entry-modal {
    border-top-color: #4ade80;
}
```
> Remove the `background` and `box-shadow` lines.

### Remove entirely:
```css
[data-theme="dark"] .delete-confirm-modal { background: var(--color-surface); }
[data-theme="dark"] .confirm-modal { background: var(--color-surface); box-shadow: ...; }
```

### History search button — keep only color:
```css
[data-theme="dark"] .history-search-btn { color: #7a8a7a; }
```
> Remove `background` and `border-color` lines.

---

## Tuning

| Variable | What it controls |
|---|---|
| `--glass-bg` opacity | How transparent the cards are (0.55 = light, 0.07 = dark) |
| `--glass-blur` value | How much the background blurs through |
| `--glass-border` opacity | Strength of the frosted edge highlight |

To make glass more/less opaque: change the alpha in `--glass-bg` in `:root` / `[data-theme="dark"]`.