/* The app's own colours and components, shared by the landing page and the sample brief so the site looks like the
   app. Values match ios/TheHalf/Core/Theme.swift and iOS's system colours, light and dark. */
:root{
  --grouped:#F2F2F7; --card:#FFFFFF; --label:#000000; --secondary:#6C6C70; --tertiary:#C7C7CC; --sep:#E5E5EA;
  --accent:#9A5800; --accent-ink:#FFFFFF;           /* Theme.accent: deep amber, 5.6:1 on white */
  --brand:#E8A33D;                                   /* the logo's amber */
  --stage:#111315; --stage-ink:#F2EDE4;              /* Ink and Cream: splash and onboarding */
  --from-bg:#E3F1F2; --from:#0A3F44;                 /* From breakdown */
  --check-bg:#FFF4E5; --check:#6B3A06; --check-dot:#FF9500;
  --seen:#AF52DE; --seen-bg:rgba(175,82,222,.10);    /* Seen you before */
  --tape:#1E5FA8; --tape-bg:rgba(30,95,168,.15);     /* Self-tape */
}
@media (prefers-color-scheme:dark){:root{
  --grouped:#000000; --card:#1C1C1E; --label:#FFFFFF; --secondary:#98989F; --tertiary:#48484A; --sep:#38383A;
  --accent:#C27A16; --accent-ink:#FFFFFF;
  --stage:#0B0C0D;
  --from-bg:#12373B; --from:#A8DDE1;
  --check-bg:#3A2A12; --check:#F4CB8C;
  --seen:#BF5AF2; --seen-bg:rgba(191,90,242,.16);
  --tape:#6FA8E8; --tape-bg:rgba(111,168,232,.18);
}}

/* App components */
.app-card{background:var(--card);border-radius:22px;padding:18px}
.kicker{color:var(--accent);font-weight:600;font-size:13px}
.role{font:800 26px/1.1 Archivo,system-ui,sans-serif;letter-spacing:-.01em;margin:2px 0 0}
.ring{flex-shrink:0;width:52px;height:52px;border-radius:50%;border:2.5px solid var(--accent);display:grid;place-items:center;text-align:center;line-height:1}
.ring b{display:block;font:800 20px Archivo,sans-serif}.ring small{font-size:10px;color:var(--secondary)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--card);color:var(--label)}
.pill.dark{background:var(--label);color:var(--card)}
.pill.tape{background:var(--tape-bg);color:var(--tape);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tape) 60%,transparent)}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.tag.from{background:var(--from-bg);color:var(--from)}.tag.check{background:var(--check-bg);color:var(--check)}
.moment{color:var(--accent);font-size:12px;font-weight:600}
.seen{background:var(--seen-bg);border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
.seen svg{color:var(--seen);flex-shrink:0;margin-top:2px}
.song{background:var(--accent);color:#fff;border-radius:22px;padding:16px 18px}
.song .lbl{font-size:12px;font-weight:600;opacity:.85;display:flex;align-items:center;gap:6px}
.song b{display:block;font:800 21px/1.2 Archivo,sans-serif;margin:4px 0 2px}.song span{font-size:13px;opacity:.85}
.swatches{display:flex;gap:10px}.swatches div{flex:1;font-size:12px;font-weight:600}
.swatches i{display:block;height:52px;border-radius:12px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatches small{display:block;font-weight:400;color:var(--secondary);font-size:11px;line-height:1.35;margin-top:2px}
.bullet{display:flex;gap:10px;align-items:baseline}
.bullet::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.bullet.check::before{background:var(--check-dot)}.bullet.plain::before{background:var(--secondary)}
.muted{color:var(--secondary)}