/*
 * Ui engine — base tokens (theme-agnostic).
 *
 * Scales that are shared across all themes: spacing, border-radius,
 * typography sizes/weights/line-heights. Color and shadow tokens belong in
 * each theme file, since they are part of visual identity.
 *
 * Consuming apps import this first, then a theme:
 *
 *   @import "ui/base";
 *   @import "ui/themes/customer";
 */

:root {
  /* Spacing scale (px) */
  --spacing-0: 0;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;

  /* Border radius scale (px) */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;

  /* Font families */
  --font-family-headline: "Space Grotesk", system-ui, sans-serif;
  --font-family-paragraph: "Work Sans", system-ui, sans-serif;

  /* Font sizes (px) */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights (px) */
  --line-height-18: 18px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-26: 26px;
  --line-height-28: 28px;
  --line-height-30: 30px;
  --line-height-32: 32px;
  --line-height-34: 34px;
  --line-height-38: 38px;
  --line-height-44: 44px;

  /* Letter spacing */
  --letter-spacing-0: 0;

  /* Breakpoints (for use in @media queries and container queries) */
  --breakpoint-sm: 640px;   /* mobile landscape */
  --breakpoint-md: 768px;   /* tablet */
  --breakpoint-lg: 1024px;  /* desktop */
  --breakpoint-xl: 1280px;  /* wide desktop */

  /* Touch target minimum — Apple HIG / Material both mandate 44px.
     Apply to any interactive control (button, link, input, tap area). */
  --touch-target-min: 44px;

  /* Input font-size — 16px prevents iOS from auto-zooming on focus.
     Components should default to this on inputs. */
  --input-font-size: var(--font-size-16);
}