/**
 * ZappTrip — semantic design tokens (alias layer).
 * Load after custom.css :root. Do not duplicate raw palette values here.
 * Authoritative values: custom.css + ui-system/design-spec.md
 */

:root {
  /* Color semantics */
  --zapp-ui-color-primary: var(--zapp-primary);
  --zapp-ui-color-primary-dark: var(--zapp-primary-dark);
  --zapp-ui-color-text: var(--zapp-text);
  --zapp-ui-color-muted: var(--zapp-muted);
  --zapp-ui-color-border: var(--zapp-border);
  --zapp-ui-color-surface: var(--zapp-white);
  --zapp-ui-color-canvas: var(--zapp-light);

  /* Radius */
  --zapp-ui-radius-sm: var(--ds-radius-sm);
  --zapp-ui-radius-md: var(--ds-radius-md);
  --zapp-ui-radius-lg: var(--ds-radius-lg);
  --zapp-ui-radius-card: var(--zapp-card-radius);
  --zapp-ui-radius-pill: 999px;

  /* Spacing */
  --zapp-ui-space-section-y: var(--section-py);
  --zapp-ui-space-card-pad: var(--zapp-card-pad);
  --zapp-ui-space-card-pad-lg: var(--zapp-card-pad-lg);

  /* Shadow */
  --zapp-ui-shadow-soft: var(--ds-shadow-soft);
  --zapp-ui-shadow-md: var(--ds-shadow-md);
  --zapp-ui-shadow-card: var(--zapp-card-shadow);

  /* Typography */
  --zapp-ui-font-heading: var(--ds-font-heading);
  --zapp-ui-font-body: var(--ds-font-body);
  --zapp-ui-text-sm: var(--ds-text-sm);
  --zapp-ui-text-base: var(--ds-text-base);
  --zapp-ui-text-lg: var(--ds-text-lg);

  /* Motion */
  --zapp-ui-ease: var(--ds-ease);
  --zapp-ui-duration: var(--ds-duration);
}