/*
 * HyperShell Mobile UI design tokens.
 *
 * The two blocks below are VERBATIM copies from docs/verification/UI-1.md
 * (§6.2 motion + layout tokens; §6.4 color roles + typography + spacing/
 * radius/elevation) — keep them byte-identical to the verified source when
 * updating.
 *
 * Dark-first neutral roles, system fonts (no shipped fonts, ADR 0006),
 * motion duration/easing bands, focus ring, touch target, safe areas.
 * Components only ever READ tokens (they never hard-code values); apps
 * customize by overriding these custom properties at `:root`/`hyper-app`.
 *
 * Import side-effect: `import "@hypershell/mobile-ui/tokens.css";`
 */

:root, hyper-app {
  /* durations — press 100–140ms / transitions 180–280ms / sheet 250–350ms */
  --hyper-motion-duration-press: 120ms;      /* band 100–140 */
  --hyper-motion-duration-fast: 180ms;       /* band 180–280 */
  --hyper-motion-duration-base: 220ms;
  --hyper-motion-duration-slow: 280ms;
  --hyper-motion-duration-sheet: 300ms;      /* band 250–350 */
  --hyper-motion-duration-sheet-fast: 250ms;
  --hyper-motion-duration-sheet-slow: 350ms;
  /* easing */
  --hyper-motion-easing-standard:  cubic-bezier(0.2, 0, 0, 1);
  --hyper-motion-easing-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);  /* enters/sheet up */
  --hyper-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);        /* exits/sheet down */
  /* touch targets */
  --hyper-size-touch-target: 44px;           /* floor; 44–48 band */
  /* focus ring */
  --hyper-focus-ring-color: var(--hyper-color-accent);
  --hyper-focus-ring-width: 2px;
  --hyper-focus-ring-offset: 2px;
  /* safe areas */
  --hyper-safe-area-inset-top: env(safe-area-inset-top, 0px);
  --hyper-safe-area-inset-right: env(safe-area-inset-right, 0px);
  --hyper-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --hyper-safe-area-inset-left: env(safe-area-inset-left, 0px);
}

:root, hyper-app {
  --hyper-color-bg-base: #0f1115;        /* app background */
  --hyper-color-bg-surface: #16191f;     /* cards, sheets' host page */
  --hyper-color-bg-raised: #1c2027;      /* buttons, inputs */
  --hyper-color-bg-overlay: #232830;     /* sheet surface */
  --hyper-color-backdrop: rgb(0 0 0 / 0.55);
  --hyper-color-text-primary: #e6e8eb;
  --hyper-color-text-secondary: #a0a6ad;
  --hyper-color-text-disabled: #5c6269;
  --hyper-color-border-subtle: #262b33;
  --hyper-color-border-strong: #333a44;
  --hyper-color-accent: #8ab4f8;         /* restrained neutral-blue accent */
  --hyper-color-accent-pressed: #a3c4fa;
  --hyper-color-on-accent: #0b1220;
  --hyper-color-danger: #f28b82;
  /* typography — system stack, no shipped fonts (ADR 0006 exclusion unless owner ships one) */
  --hyper-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hyper-font-size-body: 16px;
  --hyper-font-size-secondary: 14px;
  --hyper-font-weight-medium: 500;
  --hyper-line-height-body: 1.5;
  /* spacing / radius / elevation */
  --hyper-space-1: 4px;  --hyper-space-2: 8px;  --hyper-space-3: 12px;
  --hyper-space-4: 16px; --hyper-space-5: 24px; --hyper-space-6: 32px;
  --hyper-radius-sm: 8px; --hyper-radius-md: 12px; --hyper-radius-lg: 16px;
  --hyper-elevation-raised: 0 2px 8px rgb(0 0 0 / 0.4);
  --hyper-elevation-sheet: 0 -8px 32px rgb(0 0 0 / 0.5);
}

/*
 * State is never conveyed by color/motion alone (MOBILE_UI_SPEC §9):
 * busy/disabled pair with aria-busy/aria-disabled and text where relevant.
 * All values are hypotheses to validate on device (UI-1 §8).
 */

/*
 * UI-3 additions (M3). The two blocks above remain the verbatim UI-1 §6.2/
 * §6.4 verified tokens; everything below extends the same neutral dark-first
 * system for `hyper-page` (ADR 0007) and `hyper-tab-bar` (ADR 0007):
 * tab bar heights, safe-area padding, and active colors, plus the page
 * container's structural default. Same override rule as above — components
 * only READ tokens; apps customize at `:root`/`hyper-app`.
 */
:root, hyper-app {
  /* tab bar — height doubles as the per-tab touch target (44–48+ band) */
  --hyper-tabbar-height: 56px;
  /* safe-area padding for the bottom edge (gesture/nav bar region) */
  --hyper-tabbar-safe-area: var(--hyper-safe-area-inset-bottom);
  /* surfaces */
  --hyper-tabbar-bg: var(--hyper-color-bg-raised);
  --hyper-tabbar-border: var(--hyper-color-border-subtle);
  /* active state colors (always paired with aria-selected, never color alone) */
  --hyper-tabbar-label-active: var(--hyper-color-accent);
  --hyper-tabbar-label-inactive: var(--hyper-color-text-secondary);
  --hyper-tabbar-indicator-active: var(--hyper-color-accent);
}

/* hyper-page is a plain custom element (no shadow root): its structural
 * default lives here. The host is the expected scroll container — give it
 * `overflow` + height in app CSS; the scroll policy drives its scrollTop. */
hyper-page { display: block; }
hyper-tab-bar { display: block; }