/* Air Pack — iOS interaction token layer
   Emulates the iOS *design language* (not the SF font — brand type is Nunito).
   Brand tokens (color / type / space) live in theme.json as --wp--preset--*.
   Update THIS FILE as iOS conventions evolve (radii, materials, motion) — components
   reference these tokens, so a change here propagates everywhere.
   Last reviewed: 2026-07. Load before component CSS. */

:root {
  /* Continuous-corner radius scale */
  --ios-radius-xs: 8px;
  --ios-radius-sm: 12px;
  --ios-radius-md: 16px;
  --ios-radius-lg: 20px;
  --ios-radius-xl: 28px;
  --ios-radius-card: 18px;
  --ios-radius-sheet: 14px;
  --ios-radius-capsule: 999px;
  --ios-radius-icon: 22.37%; /* Apple app-icon superellipse ratio (square tiles) */

  /* Controls & touch */
  --ios-control-height: 44px;
  --ios-control-height-lg: 50px;
  --ios-control-height-sm: 28px;
  --ios-tap-min: 44px;

  /* Switch (iOS toggle) — track / thumb geometry (UISwitch ≈ 51×31) */
  --ios-switch-w: 52px;
  --ios-switch-h: 32px;
  --ios-switch-thumb: 28px;

  /* Page insets + safe area (notch / home indicator) */
  --ios-safe-top: env(safe-area-inset-top, 0px);
  --ios-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ios-safe-left: env(safe-area-inset-left, 0px);
  --ios-safe-right: env(safe-area-inset-right, 0px);
  --ios-page-inset: 20px;

  /* Motion — iOS-like ease-out / ease-in-out / spring */
  --ios-duration-fast: 200ms;
  --ios-duration-base: 320ms;
  --ios-duration-slow: 460ms;
  --ios-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ios-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ios-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Materials — translucent blur for nav bars / sheets ONLY (never decoration) */
  --ios-material-blur: 20px;
  --ios-material-saturate: 180%;
  --ios-material-light: color-mix(in srgb, var(--wp--preset--color--paper) 72%, transparent);
  --ios-material-dark: color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent);

  /* Elevation — layered and subtle (never one uniform shadow everywhere) */
  --ios-elevation-1: 0 1px 2px rgba(20, 19, 26, 0.06), 0 1px 1px rgba(20, 19, 26, 0.04);
  --ios-elevation-2: 0 6px 20px rgba(20, 19, 26, 0.10);
  --ios-elevation-sheet: 0 -8px 40px rgba(20, 19, 26, 0.16);

  /* Device grounding — a drop-shadow that follows the PNG's baked-in frame alpha */
  --ios-device-shadow: drop-shadow(0 10px 24px rgba(20, 19, 26, 0.18)) drop-shadow(0 2px 6px rgba(20, 19, 26, 0.10));

  /* Hairline separators (iOS 0.5px) */
  --ios-hairline-color: var(--wp--preset--color--line);

  /* Focus ring (accessibility) */
  --ios-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--coral) 45%, transparent);
}

/* Translucent material helper — nav bars, bottom sheets. Use sparingly. */
.u-material {
  background: var(--ios-material-light);
  -webkit-backdrop-filter: blur(var(--ios-material-blur)) saturate(var(--ios-material-saturate));
  backdrop-filter: blur(var(--ios-material-blur)) saturate(var(--ios-material-saturate));
}
.u-material--dark { background: var(--ios-material-dark); }

/* Hairline separator (crisp 0.5px) */
.u-hairline { border: 0; border-block-start: 0.5px solid var(--ios-hairline-color); }

/* Safe-area padding helpers */
.u-safe-x {
  padding-left: max(var(--ios-page-inset), var(--ios-safe-left));
  padding-right: max(var(--ios-page-inset), var(--ios-safe-right));
}
.u-safe-bottom {
  padding-bottom: max(var(--wp--preset--spacing--40, 1.5rem), var(--ios-safe-bottom));
}

/* Visible focus for keyboard users (touch/mouse users unaffected) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ios-focus-ring);
  border-radius: var(--ios-radius-sm);
}

/* Respect reduced motion globally (the one sanctioned !important) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}