/* ============================================================
   CUPERTINO  ·  "System Light"
   Apple's light UI. Soft #f5f5f7 canvas, crisp white cards,
   the system blue, SF type, generous rounding, whisper shadows.
   ============================================================ */
[data-theme="cupertino"] {
  color-scheme: light;
  --bg:#f5f5f7; --bg-2:#ffffff; --bg-3:#ececee; --bg-inset:#fbfbfd;
  --text:#1d1d1f; --text-2:#6e6e73; --text-3:#8e8e93;
  --border:#d2d2d7; --border-2:#c6c6cb; --bw:1px;

  --primary:#0071e3; --primary-2:#0077ed; --on-primary:#ffffff;
  --accent:#0a84ff; --on-accent:#ffffff;
  --success:#34c759; --warning:#ff9f0a; --danger:#ff3b30; --info:#0071e3;
  --ring: color-mix(in srgb,#0071e3 34%, transparent);

  --font-body:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-head:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --fw-normal:400; --fw-medium:500; --fw-bold:600; --fw-head:700;
  --tracking-head:-0.02em; --leading:1.55; --fs-base:15px;

  --radius:12px; --radius-sm:8px; --radius-lg:18px;
  --shadow-color:220 16% 40%;
  --shadow-sm:0 1px 2px hsl(var(--shadow-color)/.1);
  --shadow:0 4px 16px -6px hsl(var(--shadow-color)/.16);
  --shadow-lg:0 20px 44px -14px hsl(var(--shadow-color)/.24);
  --density:1.0;

  --btn-radius:980px; --btn-weight:500; --btn-shadow:none;
  --card-bg:#ffffff; --card-radius:18px; --card-border:1px solid var(--border);
  --card-shadow:0 4px 16px -8px hsl(var(--shadow-color)/.14);
  --input-bg:#ffffff; --input-radius:10px; --input-border:1px solid var(--border-2);
  --sidenav-bg:#fbfbfd; --topbar-bg:color-mix(in srgb,#f5f5f7 72%, transparent);
  --nav-bg:color-mix(in srgb,#f5f5f7 72%, transparent); --menu-bg:#ffffff;
}
/* Apple's pill buttons and hairline top bar */
[data-theme="cupertino"] .btn { border-radius:980px; }
[data-theme="cupertino"] .btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
[data-theme="cupertino"] .topnav, [data-theme="cupertino"] .topbar { border-bottom:1px solid var(--border); }