:root {
  --color-primary: #173f36;
  --color-on-primary: #fff;
  --color-primary-hover: #245849;
  --color-primary-soft: #dfece7;
  --color-background: #f5f6f7;
  --color-surface: #ffffff;
  --color-text: #17211e;
  --color-text-muted: #68736f;
  --color-success: #277a55;
  --color-warning: #a55b13;
  --color-danger: #a43737;
  --color-border: #d9dedb;
  --color-warning-soft: #fff0dc;
  --color-danger-soft: #fbe5e5;
  --color-success-soft: #dff2e8;
  --radius-sm: var(--radius-10);
  --radius-md: var(--radius-16);
  --radius-lg: 8px;
  --spacing-xs: var(--space-6);
  --spacing-sm: var(--space-8);
  --spacing-md: var(--space-12);
  --spacing-lg: var(--space-16);
  --font-size-sm: var(--ui-font-help);
  --font-size-base: var(--ui-font-body);
  --font-size-lg: var(--ui-font-subtitle);
  --shadow: 0 10px 30px rgba(23, 33, 30, .08);
  --tap-size: var(--ui-control-height);

  /* Accepted site density, in CSS pixels independently of root rem sizing. */
  --ui-font-body: calc(14px - 1pt);
  --ui-font-button: calc(14px - 2pt);
  --ui-font-select: calc(16px - 2pt);
  --ui-font-input: calc(16px - 1pt);
  --ui-font-help: calc(12px - 1pt);
  --ui-font-nav-mobile: calc(11px - 1pt);
  --ui-font-title: calc(22px - 1pt);
  --ui-font-title-desktop: calc(24px - 1pt);
  --ui-font-subtitle: calc(16px - 1pt);
  --ui-control-height: 28px;
  --ui-row-gap: 8px;
  --ui-column-gap: 16px;
  --ui-block-gap: 12px;
  --ui-field-gap: 6px;
  --ui-panel-padding: 8px;
  --ui-dialog-padding: 12px;
  --ui-page-padding: 10px;

  /* Shared density scale. Component geometry stays in its stylesheet. */
  --space-unit: 1px;
  --space-1: calc(var(--space-unit) * 1);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-7: calc(var(--space-unit) * 7);
  --space-8: calc(var(--space-unit) * 8);
  --space-9: calc(var(--space-unit) * 9);
  --space-10: calc(var(--space-unit) * 10);
  --space-11: calc(var(--space-unit) * 11);
  --space-12: calc(var(--space-unit) * 12);
  --space-13: calc(var(--space-unit) * 13);
  --space-14: calc(var(--space-unit) * 14);
  --space-16: calc(var(--space-unit) * 16);
  --space-18: calc(var(--space-unit) * 18);
  --space-20: calc(var(--space-unit) * 20);
  --space-22: calc(var(--space-unit) * 22);
  --space-24: calc(var(--space-unit) * 24);
  --space-28: calc(var(--space-unit) * 28);
  --space-30: calc(var(--space-unit) * 30);
  --space-38: calc(var(--space-unit) * 38);
  --space-48: calc(var(--space-unit) * 48);
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --filter-row-gap: var(--space-8);
  --filter-padding: var(--ui-panel-padding);
  --field-label-gap: var(--ui-field-gap);
  --expo-nav-height: 64px;
  /* EXPO palette and interaction tokens; shared by all EXPO pages. */

  --expo-blue: #175cd3;
  --expo-blue-soft: #eff6ff;
  --expo-canvas: #f5f6f7;
  --expo-image: #e9e7e2;
  --expo-ink: var(--color-text);
  --expo-muted: #5f6b67;
  --expo-border: #dde2df;
  --expo-focus: #2e90fa;
  --expo-radius: var(--radius-8);
  --expo-motion-fast: 120ms;
  --expo-photo-label-bg: #e6e6e6;
  --expo-photo-label-ink: #000;

}

/* Nordic Indigo & Slate: EXPO visual tokens; component layout stays in expo.css. */
:root.expo-app {
  color-scheme: light;
  --color-primary: #4338ca;
  --color-on-primary: #fff;
  --color-primary-hover: #3730a3;
  --color-primary-soft: #eef2ff;
  --color-background: #f8fafc;
  --color-surface: #fff;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --color-success: #10b981;
  --color-success-soft: #ecfdf5;
  --color-warning: #f59e0b;
  --color-warning-soft: #fef3c7;
  --color-danger: #ef4444;
  --color-danger-soft: #fee2e2;
  --expo-focus: #4f46e5;
  --expo-border-hover: #cbd5e1;
  --expo-border-selected: #e0e7ff;
  --expo-border-warning: #f59e0b;
  --expo-border-subtle: #f1f5f9;
  --expo-icon-muted: #94a3b8;
  --expo-photo-icon-size: 16px;
  --expo-photo-icon-small-size: 14px;
  --expo-photo-icon-stroke: 1.4;
  --expo-photo-action-size: 28px;
  --expo-photo-action-small-size: 20px;
  --expo-photo-action-ink: #0f172a;
  --expo-photo-action-bg: rgba(255, 255, 255, .8);
  --expo-photo-action-hover: #e0e7ff;
  --expo-photo-action-shadow: 0 1px 2px rgba(255, 255, 255, .9);
  --expo-photo-label-bg: rgba(15, 23, 42, .75);
  --expo-photo-label-ink: #fff;
  --expo-counter-bg: rgba(15, 23, 42, .78);
  --expo-overlay-ink: #fff;
  --expo-backdrop: rgba(15, 23, 42, .46);
  --expo-dialog-backdrop: rgba(15, 23, 42, .5);
  --expo-viewer-bg: #0f172a;
  --expo-viewer-backdrop: rgba(15, 23, 42, .85);
  --expo-preview-action-bg: rgba(255, 255, 255, .92);
  --expo-preview-open-bg: rgba(255, 255, 255, .84);
  --shadow: 0 8px 28px rgba(15, 23, 42, .05);
  --expo-sheet-shadow: -12px 0 40px rgba(15, 23, 42, .05);
  --expo-segment-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  --expo-dialog-shadow: 0 16px 50px rgba(15, 23, 42, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-primary: #aad2bd;
    --color-on-primary: #152c22;
    --color-primary-hover: #bfdfce;
    --color-primary-soft: #30473c;
    --color-background: #171d1b;
    --color-surface: #222b27;
    --color-text: #edf3ef;
    --color-text-muted: #b3c2ba;
    --color-border: #43534a;
    --color-success: #9bd2af;
    --color-warning: #f0bf7d;
    --color-danger: #ffa99e;
    --color-warning-soft: #3b3020;
    --color-danger-soft: #442923;
    --color-success-soft: #253e30;
    --expo-blue: #a6caff;
    --expo-blue-soft: #243d58;
    --expo-image: #2c3630;
  }
}