/* -------------------------
  CSS Variables 
-------------------------- */

:root {

  /* 
    Global CSS Variables
    Use these variables in any CSS file with:
  
      var(--variable-name)
  
    Example:
      padding: var(--space-md);
      font-size: var(--font-size-lg);
      color: var(--color-primary);
      border-radius: var(--radius-sm);
  */

  /* Heights */
  --menu-height: 10vh;
  --section-min-height: calc(100vh - var(--menu-height));
  --footer-end-min-height: 5vh;

  /* Colors */
  --color-primary: hsl(232, 25%, 23%);
  --color-secondary: hsl(50, 96%, 41%);
  --color-bg: hsl(0, 0%, 100%);
  --color-bg-2: hsl(0, 0%, 90%);
  --color-bg-3: hsl(0, 0%, 80%);
  --color-text: hsl(0, 0%, 0%);
  --color-text-2: hsl(0, 0%, 10%);
  --color-text-3: hsl(0, 0%, 20%);
  --color-border: hsl(0, 0%, 35%);
  --color-discount: hsl(5, 75%, 45%);
  --color-shadow: rgba(0, 0, 0, 0.08);

  /* Spacing */
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);   /* 8px -> 12px */
  --space-md: clamp(1rem, 2vw, 1.5rem);      /* 16px -> 24px */ /* base */
  --space-lg: clamp(2rem, 4vw, 3rem);        /* 32px -> 48px */
  --space-xl: clamp(4rem, 6vw, 6rem);        /* 64px -> 96px */
  
  --container-padding-vertical: clamp(3rem, 8vw, 6rem);
  --container-padding-horizontal: clamp(1.5rem, 4vw, 4rem);

  --card-padding-vertical: clamp(1rem, 2.5vw, 2rem);
  --card-padding-horizontal: clamp(1rem, 3vw, 2.5rem);

  /* Border */
  --border-sm: 1px;       
  --border-md: 2px;       /* base */
  --border-lg: 3px;
  --border-xl: 4px;

  --radius-sm: 4px;
  --radius-md: 8px;       /* base */
  --radius-lg: 16px;
  --radius-xl: 24px;

  --box-shadow: 0 4px 12px var(--color-shadow);

  /* Typography */
  --font-family: "Montserrat", sans-serif;

  --font-size-sm: clamp(0.9rem, 1vw, 1.05rem);       /* 14.4px -> 16.8px */
  --font-size-md: clamp(1.0625rem, 1.25vw, 1.25rem); /* 17px -> 20px */ /* base */
  --font-size-lg: clamp(1.375rem, 2vw, 1.75rem);     /* 22px -> 28px */
  --font-size-xl: clamp(2.5rem, 1.705rem + 3.98vw, 4.688rem);          /* 40px -> 75px */

  --font-weight-sm: 400;  /* Regular */
  --font-weight-md: 500;  /* Medium */
  --font-weight-lg: 600;  /* Semibold */
  --font-weight-xl: 700;  /* Bold */

  /* Breakpoints */
  --breakpoint-sm: 640px;   /* Mobile */
  --breakpoint-md: 768px;   /* Tablet */
  --breakpoint-lg: 1024px;  /* Desktop */
  --breakpoint-xl: 1280px;  /* Large Desktop */

}