/* Light theme (Mist). Loaded last on every page so it wins over the dark defaults in site.css and index.html.
   Page is a soft lavender tint, cards are white, and a faint grid sits behind everything. */
:root {
  --bg: #f5f4fb; --card: #ffffff; --card-2: #ecebf7; --text: #15131f; --muted: #6a6980;
  --accent: #7c5cff; --accent-2: #e8439a;
  --ink-2: #3f3e55; --ink-3: #55546a; --line: rgba(60,40,140,.11); --accent-ink: #5a3df0;
  --shadow: rgba(60,40,140,.10); --shadow-lg: rgba(60,40,140,.22);
  color-scheme: light;
}
html { background: var(--bg); }
html, body { background: var(--bg); }
body { background: transparent; position: relative; }
/* faint grid, fixed behind the page, fading out toward the edges */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(88,60,220,.075) 1px, transparent 1px), linear-gradient(to bottom, rgba(88,60,220,.075) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 25%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 25%, #000 25%, transparent 100%); }
:focus-visible { outline-color: #7c5cff; }

.btn.ghost { background: var(--card); border-color: var(--line); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }
.hero-copy p, .nf p { color: var(--ink-3); }
.trust span::before { color: #12a377; }
.blob { opacity: .22; } .b3 { opacity: .16; }
.brand img, .sf-brand img { box-shadow: 0 6px 18px var(--shadow-lg); }
.phone, .nf-phone { box-shadow: 0 0 0 1.5px rgba(21,19,31,.25), 0 28px 56px var(--shadow-lg); }
.chipfloat { border: 1px solid var(--line); box-shadow: 0 10px 28px var(--shadow-lg); }
.mi { box-shadow: 0 2px 8px var(--shadow); }

.pick { background: linear-gradient(135deg, rgba(124,92,255,.13), rgba(232,67,154,.09)), var(--card); border-color: var(--line); box-shadow: 0 10px 30px var(--shadow); }
.pick p { color: var(--ink-3); } .count { color: var(--text); }
.pick .art { box-shadow: 0 18px 44px var(--shadow-lg); }
.vibe, .st, .cards div { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow); }
.vibe:hover { border-color: rgba(124,92,255,.5); }
.vibe em { color: var(--accent-ink); }
.stack img { box-shadow: 0 8px 20px var(--shadow-lg); }
.st .ic { background: rgba(124,92,255,.12); }
.st::after { color: rgba(21,19,31,.06); }
.chip { color: var(--ink-3); background: var(--card); border: 1px solid var(--line); }
.chip[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.tile { box-shadow: 0 6px 18px var(--shadow); }

.scrim.on { background: rgba(245,244,251,.93); }
.viewer { box-shadow: 0 30px 80px var(--shadow-lg); }
.close { background: var(--card); color: var(--text); box-shadow: 0 2px 10px var(--shadow-lg); }
.sheet { background: linear-gradient(transparent, rgba(245,244,251,.98) 30%); }
.mini { background: var(--card); border-color: var(--line); color: var(--text); }
.mini[aria-pressed="true"] { background: rgba(124,92,255,.14); border-color: var(--accent); }
.guide { background: rgba(21,19,31,.35); }
.guide-card { background: var(--card); box-shadow: 0 -20px 60px var(--shadow-lg); }
.tabs { background: var(--bg); border: 1px solid var(--line); }
.guide li::before { background: rgba(124,92,255,.14); color: var(--accent-ink); }
.toast { border: 1px solid var(--line); box-shadow: 0 10px 40px var(--shadow-lg); }

.sf { border-top-color: var(--line); background: linear-gradient(180deg, transparent, rgba(124,92,255,.06)); }
.sf h3 { color: var(--accent-ink); }
.sf nav a, .sf address a, .sf address { color: var(--ink-2); }
.sf nav a:hover, .sf address a:hover, .sf nav a[aria-current="page"], .sf address strong, .sf address .sf-mail { color: var(--text); }
.sf address .sf-mail { text-decoration-color: rgba(21,19,31,.3); }
.sf-bar { border-top-color: var(--line); }
.sf-top { background: var(--card); border-color: var(--line); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }

.page-top .back, .doc a { color: var(--accent-ink); }
.doc .intro { color: var(--ink-2); }
.doc p, .doc li { color: var(--ink-3); }
.doc .callout { background: rgba(124,92,255,.08); border-color: rgba(124,92,255,.25); }
.doc .callout p { color: #3a2f7a; }