/* ─────────────────────────────────────────────────────────────────────────
   grinnr — shared LIGHT theme.  DRY: every reskin/light/ page links THIS for the
   palette + base components; page-specific layout stays in the page's own <style>.
   Palette mirrors the app's light tokens (mobile/src/theme/index.ts `light`) so the
   web "light" pages and the RN light mode read as one design.
   No decay here — "light" is the calm UI mode (crazy/immersive lives elsewhere).
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* surfaces + ink — mirror app light: bg #FBFBFD · surface #FFFFFF · text #0E0E12 */
  --bg:#fbfbff;        --paper:#ffffff;     --surface-2:#f4f4f7;  --hair:#ececf4;
  --ink:#15141c;       --ink-2:#5a5a68;     --ink-3:#8a8a99;
  /* accents (mode + brand) — app dates #FF2D70 · friends #19E3D4 · brand violet */
  --pink:#ff2d55;  --magenta:#ff5fa2;  --coral:#ff6b4d;  --sun:#ffd23f;
  --lime:#46d672;  --teal:#0d9488;     --cyan:#22d3ee;   --blue:#3d7bff;  --violet:#7c5cff;
  --dates-grad:   linear-gradient(135deg,#ff2d55,#ff5fa2);
  --friends-grad: linear-gradient(135deg,#0d9488,#22d3ee);
  --brand-grad:   linear-gradient(110deg,#7c5cff,#3d7bff 42%,#ff5fa2);
  /* scale */
  --radius:26px;  --radius-sm:16px;  --radius-xs:11px;  --pill:999px;
  --font:"General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-card:0 30px 70px -26px rgba(124,92,255,.45), 0 6px 20px -10px rgba(255,95,162,.25);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; min-height:100%; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; position:relative; overflow:hidden; user-select:none;
  padding:max(18px,env(safe-area-inset-top)) 16px max(26px,env(safe-area-inset-bottom));
}
/* vertical-center modifier — short single-surface screens (profile, match) */
body.center{ justify-content:center; }
/* standard screen column — regular-app pages compose their content inside this */
.screen{ position:relative; z-index:2; width:min(100%,400px);
  display:flex; flex-direction:column; align-items:center; flex:1 1 auto; }

/* airy colour-blob glow layer (decorative, behind the card) */
.blobs{ position:fixed; inset:0; z-index:0; pointer-events:none; filter:blur(46px); }
.blobs span{ position:absolute; border-radius:50%; opacity:.55; }
.b1{ width:62vw;height:62vw; background:radial-gradient(circle,#ff8fb4,transparent 66%); top:-16%; left:-14%; }
.b2{ width:60vw;height:60vw; background:radial-gradient(circle,#8fb8ff,transparent 66%); top:-8%; right:-18%; }
.b3{ width:66vw;height:66vw; background:radial-gradient(circle,#9affd0,transparent 66%); bottom:-20%; left:-10%; }
.b4{ width:58vw;height:58vw; background:radial-gradient(circle,#d9b0ff,transparent 66%); bottom:-16%; right:-14%; }

/* card — a SURFACE primitive (the paper panel). Layout (width/padding/flow) is the
   page's job, so a profile card, a deck card and its peek cards can all be `.card`. */
.card{
  position:relative; background:var(--paper); border:1px solid var(--hair);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
}

/* brand row */
.brand{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:var(--ink-2); font-weight:600; align-self:flex-start; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--brand-grad);
  box-shadow:0 0 0 3px #7c5cff22; flex:0 0 auto; }

/* section label */
.label{ align-self:flex-start; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 8px; }

/* pills */
.pills{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.pill{ font-size:11px; font-weight:600; padding:5px 12px; border-radius:var(--pill); border:none; color:#fff; }
.pill.dates{ background:var(--dates-grad); box-shadow:0 4px 12px -4px rgba(255,45,85,.45); }
.pill.friends{ background:var(--friends-grad); box-shadow:0 4px 12px -4px rgba(13,148,136,.4); }

/* sticker — a single rated meme (the "collector's sticker" vein, no peel/decay) */
.stickers{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; }
.sticker{ position:relative; aspect-ratio:1/1.08; border-radius:var(--radius-xs); overflow:hidden;
  background:var(--surface-2); box-shadow:0 4px 12px -6px rgba(0,0,0,.22); }
.sticker .art{ position:absolute; inset:0; display:grid; place-items:center; font-size:24px; }
.sticker .art img{ width:100%; height:100%; object-fit:cover; display:block; }
.sticker .badge{ position:absolute; top:4px; right:5px; font-size:12px; z-index:2;
  filter:drop-shadow(0 1px 1px #0007); }
.sticker.liked    .badge::after{ content:"♥"; color:#fff; }
.sticker.disliked .badge::after{ content:"✦"; color:#fff; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }