/* Design System Variables */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Color Palette */
  --color-primary: #37322f;       /* Deep warm brown */
  --color-background: #f7f5f3;    /* Warm off-white */
  --color-secondary: #8B8680;     /* Warm gray */
  --color-white: #ffffff;         /* Pure white */
  
  /* Functional Colors */
  --color-success: #2e5c3e;       /* Muted forest green */
  --color-danger: #9e2a2b;        /* Muted brick red */
  --color-text-main: #37322f;
  --color-text-muted: #8B8680;
  --color-border: #e6e2df;
  
  /* Typography */
  --font-heading: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
  
  /* Spacing Scale - Compact */
  --space-1: 2px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-6: 16px;
  --space-8: 24px;
  --space-12: 32px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(55, 50, 47, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(55, 50, 47, 0.05), 0 2px 4px -1px rgba(55, 50, 47, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(55, 50, 47, 0.05), 0 4px 6px -2px rgba(55, 50, 47, 0.02);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Transitions */
  --transition-base: all 0.2s ease-in-out;
}