/* Shared layout, scroll, modal, and responsive viewport tokens. Loaded before styles.css. */
:root {
  --shadow: 0 24px 60px rgba(6, 35, 52, 0.16);
  --shadow-soft: 0 18px 42px rgba(6, 35, 52, 0.11);
  --shadow-xs: 0 10px 24px rgba(6, 35, 52, 0.07);
  --shadow-modal: 0 30px 90px rgba(8, 28, 42, 0.24);
  --button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px rgba(6, 35, 52, 0.045);
  --button-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 10px 22px rgba(6, 35, 52, 0.06);
  --button-shadow-active: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 6px 14px rgba(6, 35, 52, 0.045);
  --button-primary-shadow: 0 10px 22px rgba(239, 177, 90, 0.2);
  --button-primary-shadow-hover: 0 11px 24px rgba(239, 177, 90, 0.24);
  --motion-elevate-shadow: 0 16px 34px rgba(6, 35, 52, 0.1);
  --motion-elevate-shadow-strong: 0 20px 46px rgba(6, 35, 52, 0.14);
  --radius-panel: 28px;
  --radius-card: 20px;
  --radius-row: 18px;
  --radius-modal: 26px;
  --radius-sheet: 30px;
  --radius-pill: 999px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-panel: 20px;
  --space-card: 15px;
  --space-shell-gutter: clamp(22px, 2.4vw, 30px);
  --z-app-shell: 1;
  --z-sticky-nav: 18;
  --z-drawer: 1600;
  --z-modal: 1680;
  --z-health-factor-modal: 1710;
  --z-modal-priority: 1720;
  --z-image-viewer: 2400;
  --z-overlay: 1100;
  --z-priority-modal: 1720;
  --app-content-edge-padding-desktop: 24px;
  --app-content-edge-padding-tablet: 20px;
  --app-content-edge-padding-mobile: 16px;
  --app-shell-scroll-padding-top: 18px;
  --app-shell-scroll-padding-bottom: calc(28px + var(--safe-area-bottom, 0px));
  --app-shell-long-view-padding-bottom: calc(72px + var(--safe-area-bottom, 0px));
  --app-shell-mobile-scroll-padding-bottom: calc(124px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px));
  --modal-desktop-max-height: min(86vh, 860px);
  --modal-desktop-max-height-dynamic: min(86dvh, 860px);
  --modal-mobile-max-width: calc(100vw - var(--safe-area-left, 0px) - var(--safe-area-right, 0px) - 12px);
  --modal-mobile-panel-width: min(100%, 480px);
  --modal-mobile-scroll-padding-top: calc(var(--safe-area-top, 0px) + 92px);
  --modal-mobile-scroll-padding-bottom: calc(132px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px));
  --modal-mobile-keyboard-padding-bottom: calc(128px + var(--safe-area-bottom, 0px) + var(--mobile-keyboard-inset, 0px));
  --modal-mobile-sticky-action-bottom: calc(12px + var(--safe-area-bottom, 0px));
  --modal-safe-panel-height: calc(var(--mobile-visual-height, 100dvh) - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px));
  --work-order-detail-max-width: 1540px;
  --work-order-detail-shell-padding: 14px;
  --work-order-detail-shell-gutter: 28px;
  --work-order-detail-tablet-padding-block: 18px;
  --work-order-detail-tablet-padding-inline: 24px;
  --card-border: rgba(13, 36, 56, 0.08);
  --card-surface: rgba(255, 255, 255, 0.84);
  --card-surface-muted: rgba(248, 252, 255, 0.78);
  --tap-surface: rgba(13, 36, 56, 0.045);
  --transition-fast: 160ms ease;
  --transition-soft: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-instant: 120ms cubic-bezier(0.2, 0, 0, 1);
  --motion-quick: 180ms cubic-bezier(0.2, 0, 0, 1);
  --motion-smooth: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-panel: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --focus-ring: 0 0 0 3px rgba(14, 122, 165, 0.16);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --visual-viewport-height: 100vh;
  --mobile-visual-height: var(--visual-viewport-height);
  --mobile-keyboard-inset: 0px;
  --mobile-keyboard-offset: 0px;
  --keyboard-safe-bottom: 0px;
}

@supports (height: 100svh) {
  :root {
    --visual-viewport-height: 100svh;
  }
}

@supports (height: 100dvh) {
  :root {
    --visual-viewport-height: 100dvh;
  }
}