/* Design System Variables */
:root {
  /* Colors */
  --color-primary: #00A8CF;
  --color-secondary: #FD8BBC;
  --color-text: #000000;
  --color-background: #FFFFFF;
  --color-placeholder: #DADADA;

  /* Typography */
  --font-family: 'Avenir', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 500;
  --font-weight-bold: 800;

  --font-size-h1: 31px;
  --font-size-h2: 16px;
  --font-size-body: 16px;

  --line-height: 1.366;

  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;

  /* Layout */
  --max-text-width: 700px;
  --header-z-index: 1000;
  --modal-z-index: 2000;

  /* Breakpoints (for reference, use in media queries) */
  --breakpoint-mobile: 640px;

  /* Heights */
  --collection-height-web: 340px;
  --collection-height-mobile: 190px;
  --artwork-max-height: 700px;
  --header-height: 170px;
  --page-title-height: 500px;
  --bottom-space: 150px;

  /* Effects */
  --shadow-menu: 0px 0px 37.5px rgba(255, 255, 255, 1), 0px 0px 7.4px rgba(255, 255, 255, 0.4);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}