/* ============================================================
   PeelCheck — Design Tokens & Base Components
   Direction: APPLE-BLEND (2026-09-03, arep-approved Opsi 1)
   Replaces: warm & approachable (cream/orange/rounded-font — dibuang)
   Token names per brief; values = canonical Apple system palette
   (flagged to arep: token table with exact hexes was not attached).
   Combo tier: TIADA (arep decision 3/9/26 x2) — never re-add without ask.
   ============================================================ */

:root{
  /* ---- brief token names ---- */
  --bg-primary:#FFFFFF;         /* section base */
  --bg-secondary:#F5F5F7;       /* alternate section band */
  --ink-primary:#1D1D1F;        /* headings/body */
  --ink-secondary:#6E6E73;      /* secondary text */
  --accent-blue:#0071E3;        /* primary CTA, links, highlight */
  --status-pass:#34C759;        /* verdict pass / good */
  --status-fail:#FF3B30;        /* verdict fail / walk away */
  --status-warn:#FF9500;        /* verdict negotiate */
  --hairline:rgba(0,0,0,.10);   /* dividers, thin borders */

  /* ---- derived tints (same hue, 10-12% on white) ---- */
  --pass-tint:rgba(52,199,89,.12);
  --warn-tint:rgba(255,149,0,.12);
  --fail-tint:rgba(255,59,48,.12);
  --accent-tint:rgba(0,113,227,.10);

  /* ---- shape ---- */
  --radius-lg:20px;
  --radius-md:16px;
  --radius-pill:999px;

  /* ---- soft shadow (kept subtle, Apple-style) ---- */
  --sh:0 8px 24px rgba(0,0,0,.08);
  --sh-lift:0 12px 28px rgba(0,0,0,.12);

  /* ---- type: brief stack site-wide ---- */
  --font-head:-apple-system,"SF Pro Display","Inter",sans-serif;
  --font-body:-apple-system,"SF Pro Display","Inter",sans-serif;

  /* ---- legacy aliases (pages reference these; values now Apple) ---- */
  --ink:var(--ink-primary);
  --cream:var(--bg-primary);
  --paper:var(--bg-primary);
  --card:var(--bg-primary);
  --bg:var(--bg-primary);
  --mut:var(--ink-secondary);
  --accent:var(--accent-blue);
  --accent-soft:var(--accent-tint);
  --calm:var(--accent-blue);
  --good:var(--status-pass);
  --bad:var(--status-fail);
  --warn:var(--status-warn);
  --good-tint:var(--pass-tint);
  --bad-tint:var(--fail-tint);
}

:focus-visible{outline:3px solid var(--accent-blue);outline-offset:2px;border-radius:8px}

/* headings — same stack, SF weight, Title Case (no UPPERCASE) */
.w-h1{font-family:var(--font-head);font-weight:700;font-size:clamp(48px,6.5vw,72px);line-height:1.06;letter-spacing:-.015em;color:var(--ink-primary)}
.w-h2{font-family:var(--font-head);font-weight:700;font-size:24px;line-height:1.22;color:var(--ink-primary)}
.w-h3{font-family:var(--font-head);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink-primary)}

/* buttons — pill, accent-blue primary */
.w-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 28px;border:0;border-radius:var(--radius-pill);
  background:var(--accent-blue);color:#fff;
  font-family:var(--font-head);font-size:17px;font-weight:600;
  text-decoration:none;cursor:pointer;box-shadow:var(--sh);
  transition:box-shadow .22s ease-out,transform .22s ease-out;
}
.w-btn:hover{box-shadow:var(--sh-lift);transform:scale(1.02)}
.w-btn:active{transform:scale(1)}
.w-btn-ink{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 28px;border:0;border-radius:var(--radius-pill);
  background:var(--ink-primary);color:#fff;
  font-family:var(--font-head);font-size:17px;font-weight:600;
  text-decoration:none;cursor:pointer;box-shadow:var(--sh);
  transition:box-shadow .22s ease-out,transform .22s ease-out;
}
.w-btn-ink:hover{box-shadow:var(--sh-lift);transform:scale(1.02)}

/* test-page judgment buttons — solid iOS status colors */
.w-btn-good{background:var(--status-pass);color:#fff;border:0}
.w-btn-bad{background:var(--status-fail);color:#fff;border:0}
.w-btn-neutral{background:var(--bg-secondary);color:var(--ink-primary);border:0}

/* cards */
.w-card{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--sh);padding:24px}

/* tag / price strip — light blue tint pill */
.w-tag{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--radius-pill);background:var(--accent-tint);
  color:var(--ink-primary);padding:7px 16px;
  font-family:var(--font-head);font-size:15px;font-weight:500;
}
.w-price{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 12px;padding:14px 22px;
  border-radius:var(--radius-pill);background:var(--accent-tint);
  color:var(--ink-primary);font-family:var(--font-head);font-size:16px;font-weight:500;
}
.w-price b{font-weight:600;color:var(--ink-primary)}
.w-price .sep{color:var(--accent-blue);font-weight:600}

/* verdict icon chips — solid status color, white glyph */
.w-vicon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-pill);
  font-size:22px;line-height:1;flex:0 0 auto;
}
.w-vicon-ok{background:var(--status-pass);color:#fff}
.w-vicon-warn{background:var(--status-warn);color:#fff}
.w-vicon-bad{background:var(--status-fail);color:#fff}

/* progress bar — fill accent-blue, track secondary */
.w-progress{width:100%;height:8px;border-radius:var(--radius-pill);background:#E8E8ED;overflow:hidden}
.w-progress i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--accent-blue);transition:width .3s ease-out}