/**
 * Design tokens — Apple/iOS-inspired: soft neutral surfaces, generous
 * corner radii, translucent panels, restrained accent reserved for state
 * (selection, active tool, warnings). Every other stylesheet reads from
 * these variables rather than hard-coding colour/spacing/radius values.
 */
.eps-root, .eps-wrap {
  --eps-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Neutrals */
  --eps-bg: #F5F5F7;
  --eps-surface: #FFFFFF;
  --eps-surface-translucent: rgba(255, 255, 255, 0.72);
  --eps-surface-sunken: #EDEDF2;
  --eps-border: #D9D9E0;
  --eps-border-strong: #C4C4CE;

  /* Text */
  --eps-text-primary: #1D1D1F;
  --eps-text-secondary: #6E6E73;
  --eps-text-tertiary: #9A9AA1;
  --eps-text-on-accent: #FFFFFF;

  /* Accent — used only for selection / active tool / links, nowhere else */
  --eps-accent: #0071E3;
  --eps-accent-soft: rgba(0, 113, 227, 0.12);
  --eps-accent-strong: #0058B0;

  /* State */
  --eps-warning: #FF3B30;
  --eps-warning-soft: rgba(255, 59, 48, 0.10);
  --eps-success: #34C759;
  --eps-success-soft: rgba(52, 199, 89, 0.12);

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

  /* Spacing scale */
  --eps-space-1: 4px;
  --eps-space-2: 8px;
  --eps-space-3: 12px;
  --eps-space-4: 16px;
  --eps-space-5: 24px;
  --eps-space-6: 32px;

  /* Elevation */
  --eps-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --eps-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --eps-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);

  /* Motion */
  --eps-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --eps-duration-fast: 120ms;
  --eps-duration-base: 200ms;

  font-family: var(--eps-font);
  color: var(--eps-text-primary);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  .eps-root.eps-theme-auto, .eps-root.eps-theme-dark {
    --eps-bg: #1C1C1E;
    --eps-surface: #2C2C2E;
    --eps-surface-translucent: rgba(44, 44, 46, 0.72);
    --eps-surface-sunken: #232325;
    --eps-border: #3A3A3C;
    --eps-border-strong: #48484A;
    --eps-text-primary: #F5F5F7;
    --eps-text-secondary: #AEAEB2;
    --eps-text-tertiary: #8A8A8E;
  }
}

.eps-root * { box-sizing: border-box; }
.eps-root :focus-visible {
  outline: 2px solid var(--eps-accent);
  outline-offset: 2px;
  border-radius: var(--eps-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .eps-root * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}