/*
 * Agroshopp Design System
 * Base styles and CSS custom properties
 */

:root {
  /* Colors */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-text: #0F172A;
  --color-text-2: #475569;
  --color-border: #E2E8F0;
  --color-primary: #16A34A;
  --color-primary-hover: #15803D;
  --color-info: #2563EB;
  --color-warning: #F59E0B;
  --color-error: #DC2626;

  /* Typography */
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 16px;

  /* Spacing (8pt grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Base typography */
html {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

body {
  font-family: 'Inter var', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Headings */
h1 { font-size: var(--font-size-h1); font-weight: 600; line-height: 1.2; }
h2 { font-size: var(--font-size-h2); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--font-size-h3); font-weight: 600; line-height: 1.4; }
h4 { font-size: var(--font-size-h4); font-weight: 600; line-height: 1.5; }

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Smooth transitions */
* {
  transition-property: color, background-color, border-color, opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 150ms;
}

/* Remove transition for elements that shouldn't animate */
*:not(button):not(a):not(input):not(.transition) {
  transition: none;
}