:root {
  /* Colors */
  --color-red: #E03131;
  --color-red-dark: #C92A2A;     /* hover/active state, and small red text on white for AA contrast */
  --color-white: #FFFFFF;
  --color-ink: #1A1A1A;
  --color-gray-text: #6B7280;
  --color-gray-divider: #E9ECEF;
  --color-gray-bg: #F8F9FA;
  --color-blue: #1C7ED6;          /* Responder network — PLACEHOLDER, swap for real brand hex if found */
  --color-green: #2F9E44;         /* Clinician/EMS — PLACEHOLDER, swap for real brand hex if found */
  --color-amber: #E8590C;         /* "Possible — do not wait" caution band (AA on white) */
  --color-amber-bg: #FFF4E6;      /* soft caution card fill */

  /* Spacing scale (4px base unit) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radius scale */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Approximate physical display corner radius, DERIVED rather than hardcoded.
     The bottom safe-area inset is the best proxy the platform gives us: devices
     with a home indicator report ~34pt and have ~55pt corners; iPads report
     ~20pt with ~25pt corners; flat, square-cornered viewports report 0 and fall
     back to the floor. So one expression tracks the whole range, including
     hardware that doesn't exist yet, instead of a per-device table. */
  --device-corner-radius: max(22px, calc(env(safe-area-inset-bottom) * 1.6));
  /* 24px, not 16px, and the exact value matters — see --tabbar-radius. */
  --tabbar-inset: 24px;

  /* Tab bar corner radius, genuinely concentric with the bezel.
     A curve inset by `d` from a corner of radius `R` stays parallel to it only
     when its own radius is `R - d`. The catch: CSS clamps border-radius to half
     the box height, so on a ~66px-tall bar anything above ~33px collapses into a
     capsule — fully round ends, which is what read as "no harmony" against the
     device's rounded-rectangle corner.
     At the old 16px inset the concentric value was 54 - 16 = 38px, above that
     ceiling, so it always degenerated. Widening the inset to 24px brings it to
     54 - 24 = 30px, which fits under the ceiling — so the bar can now be both
     concentric AND render as the rounded rectangle it should be.
     The max() floor covers viewports with no safe-area inset (any browser),
     where R falls to its own floor and the subtraction would go negative. */
  --tabbar-radius: max(18px, calc(var(--device-corner-radius) - var(--tabbar-inset)));

  /* Elevation */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);

  /* Type — Apple's system font stack (San Francisco on iOS/macOS). Built into
     the OS, so nothing to download and no web-font network dependency. */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}