/* 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;

  --font-size-h1-mobile: 26px;
  --font-size-title: 21px;
  --font-size-details: 15px;
  --font-size-details-mobile: 12px;

  --line-height: 1.366;
  --line-height-header: 36px;

  /* 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;
  --prints-image-height:  56vh;

  /* 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;
}