/**
 * Farmella Design System
 * Root CSS Variables & Design Tokens
 * Performance-first, minimal footprint
 */

:root {
  /* ==========================================================================
     COLOR SYSTEM
     ========================================================================== */
  
  /* Primary - Sweet Potato Orange */
  --color-primary-50: #FFF7ED;
  --color-primary-100: #FFEDD5;
  --color-primary-200: #FED7AA;
  --color-primary-300: #FDBA74;
  --color-primary-400: #FB923C;
  --color-primary-500: #E07830;
  --color-primary-600: #C2410C;
  --color-primary-700: #9A3412;
  --color-primary-800: #7C2D12;
  --color-primary-900: #431407;

  /* Secondary - Earth Brown */
  --color-secondary-50: #FAF8F5;
  --color-secondary-100: #F5F0E8;
  --color-secondary-200: #E8DFD0;
  --color-secondary-300: #D4C4AA;
  --color-secondary-400: #B8A07A;
  --color-secondary-500: #5D4E37;
  --color-secondary-600: #4A3E2C;
  --color-secondary-700: #3D3324;
  --color-secondary-800: #2E271B;
  --color-secondary-900: #1F1A12;

  /* Accent - Agriculture Green */
  --color-accent-50: #F0FDF4;
  --color-accent-100: #DCFCE7;
  --color-accent-200: #BBF7D0;
  --color-accent-300: #86EFAC;
  --color-accent-400: #4ADE80;
  --color-accent-500: #4A7C59;
  --color-accent-600: #3D6B4A;
  --color-accent-700: #315A3D;
  --color-accent-800: #264A31;
  --color-accent-900: #1A3A24;

  /* Neutral - Warm Grays */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAFAF9;
  --color-neutral-100: #F5F5F4;
  --color-neutral-200: #E7E5E4;
  --color-neutral-300: #D6D3D1;
  --color-neutral-400: #A8A29E;
  --color-neutral-500: #78716C;
  --color-neutral-600: #57534E;
  --color-neutral-700: #44403C;
  --color-neutral-800: #292524;
  --color-neutral-900: #1C1917;

  /* Semantic Colors */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  
  /* Font Families - System Stack for Performance */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* Font Sizes - Major Third Scale (1.25) */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ==========================================================================
     SPACING
     ========================================================================== */
  
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ==========================================================================
     LAYOUT
     ========================================================================== */
  
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  --gutter: var(--space-4);
  --gutter-lg: var(--space-8);

  /* ==========================================================================
     BORDERS & RADIUS
     ========================================================================== */
  
  --radius-none: 0;
  --radius-sm: 0.125rem;  /* 2px */
  --radius-base: 0.25rem; /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-2: 2px;

  /* ==========================================================================
     SHADOWS
     ========================================================================== */
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ==========================================================================
     Z-INDEX
     ========================================================================== */
  
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;

  /* ==========================================================================
     SECTION SPACING
     ========================================================================== */
  
  --section-py: var(--space-16);
  --section-py-lg: var(--space-24);

  /* ==========================================================================
     COMPONENT TOKENS
     ========================================================================== */
  
  /* Buttons */
  --btn-py: var(--space-3);
  --btn-px: var(--space-6);
  --btn-font-size: var(--text-base);
  --btn-font-weight: var(--font-semibold);
  --btn-radius: var(--radius-lg);
  
  /* Cards */
  --card-padding: var(--space-6);
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-md);
  --card-bg: var(--color-neutral-0);

  /* Forms */
  --input-py: var(--space-3);
  --input-px: var(--space-4);
  --input-radius: var(--radius-lg);
  --input-border: var(--color-neutral-300);
  --input-focus: var(--color-primary-500);

  /* ==========================================================================
     IMAGE ASPECT RATIOS
     ========================================================================== */
  
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-photo: 4 / 3;
  --aspect-portrait: 3 / 4;
  --aspect-hero: 21 / 9;
}

/* Dark mode support - placeholder for future implementation
   Uncomment and define color overrides when needed:
   @media (prefers-color-scheme: dark) {
     :root { --color-neutral-0: #1C1917; }
   }
*/

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}