/* Ownata — Design tokens (colors, spacing, radii, shadows, motion)
   Keep this file small and stable: the rest of the CSS references these variables. */

:root{
  /* --- Brand + neutrals (Tailwind-ish) --- */
  --primary-600: #7C3AED;       /* violet-600 */
  --secondary-600: #9333EA;     /* purple-600 (secondary) */
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E7EB;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-900: #111827;
  --emerald-50: #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-600: #059669;

  /* RGB helpers for rgba() */
  --primary-600-rgb: 124 58 237;
  --secondary-600-rgb: 147 51 234;
  --emerald-600-rgb: 5 150 105;
  --neutral-900-rgb: 17 24 39;

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

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* --- Shadows (match light background) --- */
  --shadow-1: 0 8px 24px rgba(13, 19, 58, 0.08);
  --shadow-2: 0 18px 60px rgba(13, 19, 58, 0.14);
  --shadow-3: 0 28px 90px rgba(13, 19, 58, 0.18);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 300ms;
  --dur-4: 600ms;

  /* --- Focus ring (a11y) --- */
  --focus-ring: 0 0 0 4px rgba(var(--primary-600-rgb), 0.22);
  --focus-ring-2: 0 0 0 6px rgba(var(--emerald-600-rgb), 0.18);

  /* --- Z-index --- */
  --z-header: 100;
  --z-overlay: 1000;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}