/* web.css — web-only adaptations of the iOS foundations. Every value here is either an iOS token
   re-used in a new role, or a derived tint of one. Nothing new is invented except where noted. */

:root {
  /* Desktop density. iOS controlMin (56) is the gloved-hand floor for touch; the web app keeps its
     dense 32px controls, so the iOS 10px control radius scales to the 8px iOS uses on its compact
     alert controls. [data-density="touch"] restores the iOS floor (see components.css). */
  --hlx-radius-control-web: 8px;      /* = --hlx-radius-alert-button */
  --hlx-radius-status: 5px;           /* iOS status pills */
  --hlx-control-web: 32px;            /* web default (h-8) */
  --hlx-control-web-sm: 28px;
  --hlx-control-web-lg: 36px;
}

/* Tinted status grounds. iOS only defines warning-surface; ok/error follow the same recipe. */
:root, .light, .dark, [data-theme] {
  --hlx-ok-surface: color-mix(in srgb, var(--hlx-ok) 14%, var(--hlx-surface));
  --hlx-error-surface: color-mix(in srgb, var(--hlx-error) 12%, var(--hlx-surface));
  --hlx-info-surface: var(--hlx-accent-fill);
}

/* App chrome (top bar / sidebar). The legacy navy bar becomes the iOS heroInk ground — the one
   dark brand surface iOS has (sign-in blueprint hero). It stays dark in both modes, so its inks are
   fixed: white text, and the iOS dark-mode accent (#AEC2D9) for the active item. */
:root, .light, .dark, [data-theme] {
  --hlx-chrome: var(--hlx-hero-ink);
  --hlx-on-chrome: #FFFFFF;
  --hlx-on-chrome-muted: rgb(255 255 255 / 0.72);
  --hlx-chrome-accent: #AEC2D9;       /* iOS accent, dark value */
  --hlx-chrome-hover: rgb(255 255 255 / 0.08);
  --hlx-chrome-border: rgb(255 255 255 / 0.12);
}