/* ==========================================================================
   Compress Image — Design Tokens
   Single source of truth for color, spacing, radius, shadow and motion.
   ========================================================================== */

:root {
  /* Brand colors */
  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-secondary: #3B82F6;
  --color-bg-light: #F8FAFC;
  --color-white: #FFFFFF;
  --color-border: #E5E7EB;
  --color-text: #111827;
  --color-text-secondary: #6B7280;

  /* Accent tints derived from brand blue (used sparingly for tool icon chips) */
  --color-primary-tint-10: rgba(37, 99, 235, 0.08);
  --color-primary-tint-15: rgba(37, 99, 235, 0.14);
  --color-primary-ring: rgba(37, 99, 235, 0.25);

  /* Status (kept minimal, used only for tool categories) */
  --color-success: #059669;
  --color-success-tint: rgba(5, 150, 105, 0.1);
  --color-warn: #D97706;
  --color-warn-tint: rgba(217, 119, 6, 0.1);

  /* Typography */
  --font-display: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --fs-display: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

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

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

  /* Shadow (soft, premium — never harsh) */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 16px 48px rgba(17, 24, 39, 0.12);
  --shadow-primary: 0 12px 28px rgba(37, 99, 235, 0.22);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* Layout */
  --container-max: 1440px;
  --header-height: 76px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}