/* ==========================================================================
   Shop Fusion Design System
   CSS custom properties, typography, and base resets
   ========================================================================== */

/* --------------------------------------------------------------------------
   Color Palette & Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Primary colors (WCAG AA verified against white/light backgrounds) */
  --sf-primary: #4f46e5;          /* Indigo - 6.3:1 on white */
  --sf-primary-dark: #4338ca;
  --sf-primary-light: #a5b4fc;
  --sf-secondary: #047857;        /* Emerald - 5.5:1 on white */
  --sf-accent: #b45309;           /* Amber - 5.0:1 on white */
  --sf-danger: #dc2626;           /* Red - 4.8:1 on white */

  /* Neutrals */
  --sf-bg: #f8fafc;
  --sf-bg-card: #ffffff;
  --sf-text-primary: #0f172a;
  --sf-text-secondary: #64748b;
  --sf-border: #e2e8f0;

  /* Typography */
  --sf-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sf-font-display: 'Plus Jakarta Sans', var(--sf-font-sans);

  /* Spacing scale */
  --sf-space-1: 0.25rem;
  --sf-space-2: 0.5rem;
  --sf-space-3: 0.75rem;
  --sf-space-4: 1rem;
  --sf-space-5: 1.25rem;
  --sf-space-6: 1.5rem;
  --sf-space-8: 2rem;
  --sf-space-10: 2.5rem;
  --sf-space-12: 3rem;
  --sf-space-16: 4rem;

  /* Shadows */
  --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --sf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Border radius */
  --sf-radius-sm: 0.375rem;
  --sf-radius-md: 0.5rem;
  --sf-radius-lg: 0.75rem;

  /* Transitions */
  --sf-transition-fast: 150ms ease;
  --sf-transition-base: 250ms ease;
}

/* --------------------------------------------------------------------------
   Dark Mode
   -------------------------------------------------------------------------- */
.dark-mode {
  --sf-bg: #0f172a;
  --sf-bg-card: #1e293b;
  --sf-text-primary: #f1f5f9;
  --sf-text-secondary: #94a3b8;
  --sf-border: #334155;
  --sf-primary: #818cf8;         /* Lighter indigo for dark bg - 6.0:1 */
  --sf-primary-dark: #6366f1;
  --sf-secondary: #34d399;       /* Lighter emerald for dark bg */
  --sf-accent: #fbbf24;          /* Lighter amber for dark bg */
  --sf-danger: #f87171;          /* Lighter red for dark bg */
}

/* --------------------------------------------------------------------------
   Base Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sf-font-sans);
  color: var(--sf-text-primary);
  background-color: var(--sf-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font-display);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Accessibility: Focus-Visible Outlines
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--sf-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}