/* ============================================================
   9th Designs — Product Design Standard (foundations layer)
   ------------------------------------------------------------
   The LOCKED dimensions only: radius scale, spacing, elevation,
   motion, type scale, and the Family A `.app-*` component kit.

   Colour is deliberately absent from this file except where the
   kit needs a surface. Every colour is a token, so a page maps
   its own palette in and nothing gets recoloured.

   Loaded by every page. Page stylesheets consume the tokens.
   ============================================================ */

:root {
  /* ── Radius scale (2.4) ─────────────────────────────────── */
  --r-sheet:        26px;  /* pull-up sheets, drawers, mobile nav */
  --r-card:         16px;  /* cards, grouped lists */
  --r-control:      12px;  /* inputs, buttons, small chips */
  --r-tile:         10px;  /* row icon tiles, segmented track */
  --r-thumb:         8px;  /* segmented thumb */
  --r-empty:        18px;  /* empty-state icon tile */
  --r-pill:        999px;  /* pills, toggles, switches */

  /* ── Elevation (2.5) — cool near-navy tint, never black ─── */
  --sh-card:   0 1px 0 rgba(0, 25, 53, 0.04);
  --sh-raised: 0 1px 0 rgba(0, 25, 53, 0.04), 0 6px 18px rgba(0, 25, 53, 0.06);
  --sh-thumb:  0 2px 6px rgba(0, 25, 53, 0.20);
  --sh-sheet:  0 -8px 28px rgba(15, 20, 25, 0.12);
  --sh-fab:    0 8px 24px rgba(15, 20, 25, 0.28);

  /* ── Motion (2.6) ───────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* sheets, drawers, tab bar */
  --ease-glide:  cubic-bezier(0.16, 1, 0.3, 1);    /* tab underline */
  --t-row:    background-color .12s ease;
  --t-input:  border-color .15s, box-shadow .15s;
  --t-button: transform .08s ease, opacity .15s;
  --t-sheet:  .32s;
  --t-glide:  .3s;

  /* ── Spacing & layout (2.3) — 4px base ──────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --gutter:      16px;
  --row-pad-y:   13px;
  --row-h:       52px;
  --content-col: 640px;
  --safe-bottom: max(env(safe-area-inset-bottom), 24px);

  /* ── Type scale (2.2) ───────────────────────────────────── */
  --fs-display:  32px;  --fw-display: 800;  --tr-display: -0.025em;
  --fs-empty:    22px;  --fw-empty:   700;  --tr-empty:   -0.018em;
  --fs-caption:  12px;  --fw-caption: 700;  --tr-caption:  0.06em;
  --fs-row:      16px;  --fw-row:     600;
  --fs-sub:      13px;
  --fs-body:     16px;
  --fs-page-sub: 15px;
  --fs-micro:    11px;  --tr-micro:    0.06em;

  /* ── Kit colour roles — the only variable (section 6) ───── */
  --app-card:    #ffffff;
  --app-ink:     #1f1f1f;
  --app-ink-2:   #3f3f3f;
  --app-mute:    #6b7280;
  --app-mute-2:  #c7c7cc;
  --app-divider: rgba(0, 0, 0, 0.06);
  --app-accent:  #4b5563;
  --app-brand:   #b89a23;
  --app-green:   #34c759;
  --app-danger:  #d94f4a;
  --app-press:   rgba(0, 25, 53, 0.04);
}

/* ── Native hardening (section 5) ─────────────────────────── */
a, button, [role="button"], .app-row, .tappable {
  -webkit-tap-highlight-color: transparent;
}

/* Tap feedback on everything tappable — locked at scale(.98) */
button:active,
.tappable:active {
  transform: scale(.98);
  opacity: .92;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Family A — the App Page kit (section 3)
   Scoped to `.app-page` so it never leaks into page chrome.
   ============================================================ */

.app-page {
  background: transparent;
  color: var(--app-ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--safe-bottom);
}

.app-page-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tr-display);
  line-height: 1.05;
  color: var(--app-ink);
}

.app-page-sub {
  font-size: var(--fs-page-sub);
  color: var(--app-mute);
}

.app-section-header {
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  color: var(--app-mute);
  text-transform: uppercase;
  letter-spacing: var(--tr-caption);
  padding: 22px var(--gutter) var(--sp-2);
}

.app-section-footer {
  font-size: var(--fs-sub);
  color: var(--app-mute);
  padding: var(--sp-2) var(--gutter) 14px;
}

.app-list {
  background: var(--app-card);
  margin: 0 var(--gutter);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
  list-style: none;
  padding: 0;
}

.app-list + .app-section-header { padding-top: 28px; }

.app-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--row-pad-y) var(--gutter);
  min-height: var(--row-h);
  width: 100%;
  text-align: left;
  color: var(--app-ink);
  text-decoration: none;
  transition: var(--t-row);
}

.app-row + .app-row { box-shadow: inset 0 1px 0 0 var(--app-divider); }
.app-row:active,
.app-row:hover { background: var(--app-press); }

.app-row__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-tile);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-row__body  { min-width: 0; flex: 1; }
.app-row__title { font-size: var(--fs-row); font-weight: var(--fw-row); line-height: 1.25; }
.app-row__sub   { font-size: var(--fs-sub); color: var(--app-mute); margin-top: 2px; }
.app-row__caret { width: 8px; height: 13px; color: var(--app-mute-2); flex-shrink: 0; }

.app-card {
  background: var(--app-card);
  border-radius: var(--r-card);
  padding: var(--gutter);
  box-shadow: var(--sh-card);
}

/* ── Inputs (3.2) — 16px so iOS never zooms ───────────────── */
.app-input,
.app-textarea,
.app-select {
  font-size: var(--fs-body);
  color: var(--app-ink);
  background: var(--app-card);
  border: 1px solid var(--app-divider);
  border-radius: var(--r-control);
  padding: var(--sp-3) 14px;
  width: 100%;
  appearance: none;
  transition: var(--t-input);
}

.app-input:focus,
.app-textarea:focus,
.app-select:focus {
  outline: none;
  border-color: var(--app-ink);
  box-shadow: 0 0 0 3px rgba(0, 25, 53, 0.12);
}

.app-textarea { min-height: 100px; resize: vertical; line-height: 1.5; }

.app-field-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--row-pad-y) var(--gutter);
  min-height: var(--row-h);
}

/* ── Switch (3.3) ─────────────────────────────────────────── */
.app-switch {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--app-mute-2);
  transition: background-color .18s ease;
  flex-shrink: 0;
}
.app-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--sh-thumb);
  transition: transform .18s ease;
}
.app-switch.is-on { background: var(--app-green); }
.app-switch.is-on::after { transform: translateX(18px); }

/* ── Buttons & pills (3.4) ────────────────────────────────── */
.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 14px 20px;
  background: var(--app-accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-control);
  letter-spacing: -.005em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--t-button);
}
.app-button:active { transform: scale(.98); opacity: .92; }
.app-button--ghost {
  background: transparent;
  color: var(--app-ink);
  border: 1px solid var(--app-divider);
}

.app-pill {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  background: rgba(0, 25, 53, 0.06);
  color: var(--app-ink);
}
.app-pill--brand { background: rgba(184, 154, 35, .12); color: var(--app-brand); }

/* ── Empty state (3.4 / section 5) ────────────────────────── */
.app-empty { text-align: center; }
.app-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-empty);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-empty__title {
  font-size: var(--fs-empty);
  font-weight: var(--fw-empty);
  letter-spacing: var(--tr-empty);
}
.app-empty__body {
  font-size: var(--fs-page-sub);
  color: var(--app-mute);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Cross-cutting patterns (section 5)
   ============================================================ */

/* Glassmorphism recipe — blur + 80–95% surface + hairline */
.glass {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.hairline { height: 0.5px; background: rgba(0, 25, 53, 0.08); }

/* Floating action button */
.app-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: var(--sh-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--t-button);
}

/* Segmented control */
.app-segment {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-tile);
  background: rgba(0, 25, 53, 0.05);
}
.app-segment__item {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-thumb);
  transition: var(--t-row);
}
.app-segment__item.is-active {
  background: #fff;
  box-shadow: var(--sh-card);
}