/* CSS Variables for SK-GLASS Lighting Series */
:root {
  /* Colors */
  --primary-color: #000;
  --secondary-color: #fff;
  --accent-color: #bababa;
  --light-bg: #EDEDED;
  --grey-bg: #f9f9f9;
  --dark-bg: #bababa;
  --text-color: #000;
  --text-light: #ffffff;

  /* Typography */
  --font-family: 'Akrobat', sans-serif;
  --font-size-base: 18px;
  --font-size-small: 14px;
  --font-size-large: 24px;
  --font-size-h1: 60px;
  --font-size-h2: 50px;
  --font-size-h3: 24px;
  --line-height: 1.2;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 30px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  --spacing-xxl: 120px;
  --section-margin: 140px;

  /* Border radius */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-full: 90px;

  /* Shadows */
  --shadow-light: 1px 1px 8px #0000001f;
  --shadow-form: 0px -3px 17px #00000057;

  /* Transitions */
  --transition-fast: 0.3s;
  --transition-slow: 1s;

  /* Container widths */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
  --container-limited: 880px;

  /* Button styles */
  --btn-padding: 14px 24px;
  --btn-padding-sm: 10px 16px;
  --btn-padding-lg: 18px 32px;

  /* Form styles */
  --form-border: 1px solid #c4c4c4;
  --form-padding: 10px;

  /* Gallery */
  --gallery-gap: 1px;
  --gallery-item-height: 400px;
  --gallery-border-radius: 6px;

  /* Header */
  --header-padding: 17px 50px;
  --header-gradient: linear-gradient(180deg, #00000073, transparent);

  /* Mobile breakpoints */
  --mobile-xs: 340px;
  --mobile-sm: 620px;
  --mobile-md: 700px;
  --mobile-lg: 800px;
  --mobile-xl: 900px;
  --tablet: 1400px;
}

/* Mobile adaptations */
@media (max-width: 1400px) {
  :root {
    --header-padding: 17px 10px;
  }
}

@media (max-width: 900px) {
  :root {
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    --section-margin: 100px;
  }
}

@media (max-width: 800px) {
  :root {
    --font-size-h1: 30px;
    --font-size-h2: 30px;
    --font-size-h3: 18px;
    --section-margin: 80px;
  }
}