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

  /* Colors */
  --color-primary: #b7dc37;
  /* --color-primary-hover: hsl(62, 39%, 38%); */
  --color-bg: hsl(0, 0%, 100%);
  --color-text-secondary: hsl(204, 5%, 21%);
  
  --color-secondary: #194e4a;
  --color-secondary-hover: #0d3b38;
  --color-footer: hsl(204, 40%, 16%);

  /* 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);
  --shadow-primary: 0 10px 15px -3px rgba(51, 128, 255, 0.1), 0 4px 6px -2px rgba(51, 128, 255, 0.05);
  --shadow-none: none;

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

  /* Typography */
  --font-family: "Poppins", 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 */

  --width: 100%;

  --transition-time: 0.2s;
  --transition-hover: background-color var(--transition-time) ease, color var(--transition-time) ease, filter var(--transition-time) ease;

}