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


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


: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: hsl(220, 100%, 56%);
  --color-primary-hover: hsl(220, 100%, 46%);
  --color-primary-gradient: linear-gradient(180deg, hsl(210, 45%, 94%) 0%, hsl(210, 60%, 88%) 100%);
  --color-secondary: hsl(0, 0%, 100%);
  --color-secondary-hover: hsl(0, 0%, 95%);
  --color-bg: hsl(0, 0%, 100%);
  --color-bg-muted: hsl(0, 0%, 75%);
  --color-text: hsl(0, 0%, 0%);
  --color-border: var(--color-bg-muted);

  --color-divider-slider-bg: hsl(210, 20%, 96%);
  --color-divider-slider-text: hsl(220, 100%, 56%);


  /* 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 Width */
  --border-sm: 1px;       
  --border-md: 2px;       /* base */
  --border-lg: 3px;
  --border-xl: 4px;

  --border: solid var(--border-lg) var(--color-border); 

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

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

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

  /* Carousel */
  --carousel-dot-size: var(--font-size-sm);
  --carousel-scale-sm: 1.2;
  --carousel-scale-md: 1.2;
  --carousel-scale-lg: 1.6;
  --carousel-dot-slot-size: calc(var(--space-sm) * 2 + var(--space-sm) * var(--carousel-scale-lg));
}

body.dark-mode {

  /* Colors */
  --color-primary: hsl(220, 100%, 56%);
  --color-primary-hover: hsl(220, 100%, 46%);
  --color-primary-gradient: linear-gradient(180deg, hsl(210, 45%, 94%) 0%, hsl(210, 60%, 88%) 100%);
  --color-secondary: hsl(0, 0%, 0%);
  --color-secondary-hover: hsl(0, 0%, 10%);
  --color-bg: hsl(0, 0%, 0%);
  --color-bg-muted: hsl(0, 0%, 25%);
  --color-text: hsl(0, 0%, 100%);
  --color-border: var(--color-bg-muted);

  --color-divider-slider-bg: hsl(210, 10%, 15%);
  --color-divider-slider-text: hsl(220, 100%, 70%);

  --border: solid var(--border-lg) var(--color-border); 

}