/* Design tokens
   Source of truth for Figma-guided PWA restyling. */

:root{
  /* Runtime shell measurement token kept for shellChrome.js. */
  --topbar-h:88px;

  /* Color */
  --color-primary:#2563eb;
  --color-primary-strong:#1d4ed8;
  --color-primary-soft:#eff6ff;
  --color-primary-border:#bfdbfe;
  --color-success:#16a34a;
  --color-success-strong:#166534;
  --color-success-soft:#f0fdf4;
  --color-success-border:#bbf7d0;
  --color-danger:#dc2626;
  --color-danger-strong:#991b1b;
  --color-danger-soft:#fef2f2;
  --color-danger-border:#fecaca;
  --color-warning:#92400e;
  --color-warning-soft:#fffbeb;
  --color-warning-border:#fde68a;
  --color-info:#4A90E2;
  --text-primary:#0f172a;
  --text-secondary:#334155;
  --text-body:#475569;
  --text-muted:#64748b;
  --text-subtle:#6b7280;
  --text-inverse:#fff;
  --surface-page:#f1f5f9;
  --surface-card:#ffffff;
  --surface-muted:#f8fafc;
  --surface-subtle:#f3f4f6;
  --border-subtle:#e5e7eb;
  --border-muted:#e2e8f0;
  --border-control:#cbd5e1;
  --overlay-scrim:rgba(15,23,42,.45);
  --overlay-drawer:rgba(15,23,42,.35);
  --overlay-panel:rgba(255,255,255,.92);

  /* Typography */
  --font-family-base:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-size-xs:12px;
  --font-size-sm:13px;
  --font-size-md:14px;
  --font-size-lg:15px;
  --font-size-xl:16px;
  --font-size-2xl:18px;
  --font-size-3xl:22px;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-extrabold:800;

  /* Spacing */
  --space-1:4px;
  --space-2:6px;
  --space-3:8px;
  --space-4:10px;
  --space-5:12px;
  --space-6:16px;
  --space-7:18px;
  --space-8:20px;
  --space-control-x:14px;

  /* Shape and elevation */
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:14px;
  --radius-2xl:16px;
  --radius-3xl:18px;
  --radius-4xl:20px;
  --radius-pill:999px;
  --shadow-shell:0 10px 30px rgba(15,23,42,.18);
  --shadow-popover:0 18px 50px rgba(15,23,42,.16), 0 2px 10px rgba(15,23,42,.08);
  --shadow-modal:0 24px 60px rgba(15,23,42,.2);

  /* Breakpoints, used as documentation for media-query parity. */
  --breakpoint-mobile:640px;
  --breakpoint-drawer:840px;
  --breakpoint-meds-desktop:900px;
  --breakpoint-layout:960px;
}