/* CSS Custom Properties (Variables) */
:root {
  /* Colors - Mondrian inspired palette */
  --primary-color: #DD0100;      /* Mondrian Red */
  --secondary-color: #225095;    /* Mondrian Blue */
  --accent-color: #FAC901;       /* Mondrian Yellow */
  --background-color: #FAFAFA;   /* Off-white */
  --text-color: #1A1A1A;         /* Near black */
  --light-text-color: #666666;
  --border-color: #000000;       /* Pure black borders */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --overlay-color: rgba(0, 0, 0, 0.8);
  
  /* Gradients - Mondrian style with geometric blocks */
  --primary-gradient: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 100%);
  --accent-gradient: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-color) 100%);
  --background-gradient: linear-gradient(135deg, var(--background-color) 0%, #F5F5F5 100%);
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.65rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.25rem;
  --font-size-3xl: 1.5rem;
  --font-size-4xl: 1.875rem;
  --font-size-5xl: 2.25rem;
  --font-size-6xl: 3rem;
  
  --font-weight-light: 300;
  --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;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;
  
  /* Layout */
  --max-width: 1200px;
  --container-padding: var(--spacing-md);
  --section-padding: var(--spacing-4xl) 0;
  --border-radius: 0.5rem;
  --border-radius-lg: 1rem;
  --border-radius-xl: 1.25rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 var(--shadow-color);
  --shadow: 0 1px 3px 0 var(--shadow-color), 0 1px 2px 0 var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
  --shadow-xl: 0 20px 25px -5px var(--shadow-color), 0 10px 10px -5px var(--shadow-color);
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* Breakpoints (for reference in media queries) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Dark mode variables */
[data-theme="dark"] {
  --background-color: #1a1a1a;
  --text-color: #ffffff;
  --light-text-color: #cccccc;
  --border-color: #333333;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --overlay-color: rgba(255, 255, 255, 0.1);
}