/**
 * CSS Custom Properties (Variables)
 * Design tokens for the Sjamaan.nl theme
 */

:root {
  /* ==========================================================================
     Color System - Primary Purple
     ========================================================================== */
  --primary-50: #faf7ff;
  --primary-100: #f3edff;
  --primary-200: #e9ddff;
  --primary-300: #d6c1ff;
  --primary-400: #b794ff;
  --primary-500: #9854ff;
  --primary-600: #8b4d8b;
  --primary-700: #6d2c70;
  --primary-800: #4c1d4f;
  --primary-900: #2d112f;
  --primary-950: #1a0a1b;

  /* ==========================================================================
     Status Colors
     ========================================================================== */
  --status-error: #ef4444;
  --status-sold-out: var(--primary-800);

  /* ==========================================================================
     Color System - Neutral (Beige/Tan)
     ========================================================================== */
  --neutral-50: #fdfcf9;
  --neutral-100: #f9f7f1;
  --neutral-200: #f5f1eb;
  --neutral-300: #e8e0d5;
  --neutral-400: #d4c4b0;
  --neutral-500: #b8a082;
  --neutral-600: #9c7c54;
  --neutral-700: #7a5d3c;
  --neutral-800: #5c4529;
  --neutral-900: #3d2e1a;
  --neutral-950: #2a1f12;

  /* ==========================================================================
     Color System - Accent (Orange)
     ========================================================================== */
  --accent-50: #fff7ed;
  --accent-100: #ffedd5;
  --accent-200: #fed7aa;
  --accent-300: #fdba74;
  --accent-400: #fb923c;
  --accent-500: #f97316;
  --accent-600: #ea580c;
  --accent-700: #c2410c;
  --accent-800: #9a3412;
  --accent-900: #7c2d12;
  --accent-950: #431407;

  /* ==========================================================================
     Color System - Surface (Brown/Tan)
     ========================================================================== */
  --surface-50: #faf9f7;
  --surface-100: #f2f0ec;
  --surface-200: #e6e1d9;
  --surface-300: #d5cdc0;
  --surface-400: #b8a690;
  --surface-500: #a08060;
  --surface-600: #8b5a3c;
  --surface-700: #704528;
  --surface-800: #5a3620;
  --surface-900: #3f251a;
  --surface-950: #2d1912;

  /* ==========================================================================
     Semantic Color Tokens
     ========================================================================== */
  --color-brand-primary: var(--primary-600);
  --color-brand-secondary: var(--neutral-700);
  --color-brand-accent: var(--accent-500);

  --color-text-primary: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;

  --color-background-body: #ffffff;
  --color-background-alt: var(--neutral-50);
  --color-background-section: var(--neutral-100);

  --color-border: var(--neutral-300);
  --color-border-light: var(--neutral-200);

  /* ==========================================================================
     Spacing Scale (8px base)
     ========================================================================== */
  --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 */

  /* ==========================================================================
     Typography Scale
     ========================================================================== */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;

  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==========================================================================
     Border Radius
     ========================================================================== */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;

  /* ==========================================================================
     Shadows
     ========================================================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ==========================================================================
     Container Widths
     ========================================================================== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* ==========================================================================
     Grid Breakpoints (for reference in media queries)
     ========================================================================== */
  /* sm: 640px */
  /* md: 768px */
  /* lg: 1024px */
  /* xl: 1280px */
  /* 2xl: 1536px */
}