/**
 * Wasatch Screen Repair — Design Tokens (CSS custom properties)
 * Brand: light, airy, fresh-air, premium-but-approachable.
 * These tokens are the single source of truth consumed by components via var(--token).
 * Mirror values exist in tokens.json (W3C/DTCG) and src/tokens.ts (typed).
 */

:root {
  /* ---------------------------------------------------------------- *
   * Color
   * ---------------------------------------------------------------- */
  --color-bg: #FFFFFF;
  --color-surface: #F4F8FC;
  --color-surface-2: #EAF2FA;

  --color-primary: #2E7DD1;
  --color-primary-600: #1F5FA8;
  --color-on-primary: #FFFFFF;

  --color-accent: #27B083;
  --color-accent-600: #1E9170;
  --color-on-accent: #FFFFFF;

  --color-text: #16242E;
  --color-muted: #5A6B79;
  --color-border: #DCE6EF;

  --color-focus: #1F5FA8;

  --color-success: #27B083;
  --color-danger: #C0492F;

  /* Convenience alpha tints derived from the brand blue-grey for soft surfaces */
  --color-tint-blue: rgba(46, 125, 209, 0.08);
  --color-tint-mesh: rgba(46, 125, 209, 0.05);

  /* ---------------------------------------------------------------- *
   * Typography
   * ---------------------------------------------------------------- */
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-size-xs: 0.8rem;     /* ~12.8px */
  --font-size-sm: 0.9rem;     /* ~14.4px */
  --font-size-base: 1rem;     /* 16px    */
  --font-size-md: 1.125rem;   /* 18px    */
  --font-size-lg: 1.375rem;   /* 22px    */
  --font-size-xl: 1.75rem;    /* 28px    */
  --font-size-2xl: 2.25rem;   /* 36px    */
  --font-size-3xl: 3rem;      /* 48px    */

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;

  /* ---------------------------------------------------------------- *
   * Spacing (4px base scale)
   * ---------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------------------------------------------------------------- *
   * Radius
   * ---------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------- *
   * Shadow (soft / airy, low-opacity blue-grey)
   * ---------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(31, 95, 168, 0.06), 0 1px 3px rgba(31, 95, 168, 0.08);
  --shadow-md: 0 6px 16px rgba(31, 95, 168, 0.10), 0 2px 6px rgba(31, 95, 168, 0.06);
  --shadow-lg: 0 18px 40px rgba(31, 95, 168, 0.14), 0 6px 14px rgba(31, 95, 168, 0.08);

  /* ---------------------------------------------------------------- *
   * Layout
   * ---------------------------------------------------------------- */
  --container-max: 1140px;
  --container-pad: var(--space-5);

  /* Breakpoints (exposed as tokens for reference; media queries below) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* Respect users who prefer reduced motion: neutralize all transition tokens. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}