/* Design Tokens - Brand Colors and Spacing */

:root {
  /* Brand Colors */
  --color-beige: #E6D3A9;
  --color-gold: #C5AE5F;
  --color-olive: #66571E;
  --color-brown: #302814;

  /* Extended Nature Palette */
  --color-moss: #4A5D4F;
  --color-sage: #9FB8A3;
  --color-terracotta: #C77D5C;
  --color-cloud: #F5F3ED;
  --color-pine: #3D4F3D;

  /* Semantic Colors - Default Light Mode */
  --color-background: #F5F3ED;
  --color-background-alt: #E6DED0;
  --color-text: var(--color-brown);
  --color-text-muted: rgba(48, 40, 20, 0.7);
  --color-heading: var(--color-olive);
  --color-accent: var(--color-olive);
  --color-card-bg: rgba(255, 255, 255, 0.6);
  --color-card-border: rgba(74, 93, 79, 0.15);
  --color-hero-text: var(--color-brown);

  /* Spacing Scale - Refined for luxury feel */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 2.5rem;   /* 40px - increased */
  --spacing-lg: 5rem;     /* 80px - increased */
  --spacing-xl: 8rem;     /* 128px - increased */
  --spacing-2xl: 10rem;   /* 160px - increased */

  /* Layout */
  --max-width: 1200px;
  --content-padding: var(--spacing-md);

  /* Border */
  --border-radius: 8px;
  --border-width: 1px;

  /* Transitions */
  --transition-speed: 0.3s;
  --transition-timing: ease-in-out;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(48, 40, 20, 0.1);
  --shadow-md: 0 4px 8px rgba(48, 40, 20, 0.15);
  --shadow-lg: 0 8px 16px rgba(48, 40, 20, 0.2);

  /* Animation Timing */
  --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-grow: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-slow: 1.2s;
  --duration-medium: 0.6s;
  --duration-fast: 0.3s;

  /* Seasonal Colors (Autumn) */
  --color-beige-autumn: #D4BC82;
  --color-gold-autumn: #9C8B3A;
  --color-olive-autumn: #4D4216;
  --color-brown-autumn: #241C0F;
}

/* Dark Mode Override */
[data-theme="dark"] {
  --color-background: var(--color-brown);
  --color-background-alt: #3D2E1A;
  --color-text: var(--color-beige);
  --color-text-muted: rgba(230, 211, 169, 0.7);
  --color-heading: var(--color-gold);
  --color-accent: var(--color-gold);
  --color-card-bg: rgba(20, 18, 14, 0.6);
  --color-card-border: rgba(183, 167, 83, 0.2);
  --color-hero-text: var(--color-beige);
}

/* Responsive spacing adjustments */
@media (max-width: 768px) {
  :root {
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-2xl: 5rem;
    --content-padding: var(--spacing-sm);
  }
}