/* R1 native web tokens. Scoped so the existing s001/Expo interfaces are unaffected.
 * Final v5 artwork + PM 2026-09-13 corrections supersede the draft token sheet:
 * major actions are pills; Shop frames start at 2:3; account uses a key, not a head.
 * rem preserves browser/user text scaling. No image pixels imply CSS dimensions.
 */
.ui-root {
  --ui-page: #fcfaf4;
  --ui-surface: #fcfaf4;
  --ui-raised: #fffefa;
  --ui-heading: #174c42;
  --ui-text: #28564d;
  --ui-secondary: #597367;
  --ui-primary: #426c45;
  --ui-primary-hover: #3f6847;
  --ui-primary-pressed: #355c3d;
  --ui-on-primary: #fffdf4;
  --ui-border: #e9e4d7;
  --ui-control-border: #798f82;
  --ui-focus: #124e4a;
  --ui-disabled-fill: #e4e7db;
  --ui-disabled-text: #52634c;
  --ui-danger: #8a3b37;
  --ui-danger-fill: #f8eae6;
  --ui-success: #386240;
  --ui-selection: #e5ebd8;
  --ui-wood: #e9dcc6;
  --ui-unread: #b93d35;
  --ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-display-font: Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --ui-title-size: 1.375rem;
  --ui-title-line: 1.875rem;
  --ui-section-size: 1.25rem;
  --ui-section-line: 1.75rem;
  --ui-body-size: 1rem;
  --ui-body-line: 1.5rem;
  --ui-secondary-size: .8125rem;
  --ui-secondary-line: 1.25rem;
  --ui-space-1: .25rem;
  --ui-space-2: .5rem;
  --ui-space-3: .75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-radius-card: .875rem;
  --ui-radius-field: .625rem;
  --ui-radius-action: 999px;
  /* Shared semantic aliases retain the accepted role values. Other page-owned
   * panel/media/composer/icon geometry stays explicit in its owning sheet. */
  --ui-radius-outer-card: var(--ui-radius-card);
  --ui-radius-pill-action: var(--ui-radius-action);
  --ui-pill-indicator-size: 8px;
  --ui-target-min: max(44px, 2.75rem);
  --ui-action-min: max(48px, 3rem);
  --ui-content-max: 47.5rem;
  --ui-frame-max: 480px;
  --ui-shop-image-ratio: 2 / 3;
  --ui-shadow: 0 2px 8px rgb(99 85 47 / .055), inset 0 1px 0 rgb(255 255 255 / .95);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: var(--ui-body-size);
  line-height: var(--ui-body-line);
  color-scheme: light;
}
