/*
 * pellicarnos-root.css
 * Defines CSS custom properties for Pellicarnos theme with scalable font size and line height system.
 *
 * @package    Pellicarnos
 * @author     Sky Design Studio Reklamy
 * @license    GPL-2.0-or-later
 * @version    1.0.4
 */

:root {
  /* Font Families */
  --font-family-sans-black: 'latoblack', Arial, Verdana, sans-serif;
  --font-family-sans-bold: 'latobold', Arial, Verdana, sans-serif;
  --font-family-sans-regular: 'latoregular', Arial, Verdana, sans-serif;
  --font-family-sans-light: 'latolight', Arial, Verdana, sans-serif;

  /* Base Font Size */
  --font-size-base: 16px;

  /* Scalable Font Size Scale */
  --fs-050: calc(var(--font-size-base) * 0.50);
  --fs-075: calc(var(--font-size-base) * 0.75);
  --fs-100: var(--font-size-base);
  --fs-112: calc(var(--font-size-base) * 1.125);
  --fs-125: calc(var(--font-size-base) * 1.25);
  --fs-150: calc(var(--font-size-base) * 1.50);
  --fs-187: calc(var(--font-size-base) * 1.875);
  --fs-200: calc(var(--font-size-base) * 2.00);
  --fs-250: calc(var(--font-size-base) * 2.50);
  --fs-300: calc(var(--font-size-base) * 3.00);
  --fs-350: calc(var(--font-size-base) * 3.50);
  --fs-375: calc(var(--font-size-base) * 3.75);
  --fs-400: calc(var(--font-size-base) * 4.00);
  --fs-600: calc(var(--font-size-base) * 6.00);
  --fs-700: calc(var(--font-size-base) * 7.00);

  /* Line Height Scale */
  --lh-tight: 1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;
  --lh-loose: 2;

  /* Color Palette */
  --color-white: #ffffff;
  --color-primary: #2B6038;
  --color-secondary: #69A82F;
  --color-accent:#CC5730;
  --color-text:#262626;
  --color-menu:rgba(43,96,56,.75);

  --color-gray: #999999;
  -color-dark-gray:#212121;
  --color-black: #000000;

  /* Layout Widths */
  --layout-page-max-width: 1250px;
  --layout-sidebar-min-width: 250px;
  --layout-sidebar-max-width: 350px;

  /* Hero Section Dimensions */
  --layout-hero-min-height: 600px;
  --layout-hero-max-height: 1100px;

  /* Content Spacing */
  --spacing-heading: 24px 0;
  --spacing-paragraph: 0 0 16px;
  --spacing-list: 0 0 16px;
  --spacing-list-item: 5px 0;
}

/* Responsive Adjustments */
@media (min-width: 1300px) and (max-width: 1500px) {
  :root {
    --font-size-base: 16px;
    --lh-normal: 1.5;
  }
}

@media (min-width: 800px) and (max-width: 1299px) {
  :root {
    --font-size-base: 14px;
    --lh-normal: 1.5;
  }
}

@media (min-width: 550px) and (max-width: 799px) {
  :root {
    --font-size-base: 14px;
    --lh-normal: 1.5;
  }
}

@media (max-width: 549px) {
  :root {
    --font-size-base: 14px;
    --lh-normal: 1.5;
  }
}