/*
====================================
 Theme Name:   OGAL Theme
 Theme URI:    https://ogalweb.com
 Description:  Kyle's GP Theme
 Author:       Kyle Van Deusen
 Author URI:   https://kylevandeusen.com
 Template:     generatepress
 Version:      0.1
====================================
*/

/* =========================
   CSS CUSTOM PROPERTIES
========================= */

:root {
  /* Container Gutters - Mobile first approach */
  --container-gutter: 1.5rem; /* Mobile: 24px */
  
  /* Spacing Scale */
  --pad-s: 1rem;      /* 16px */
  --pad-m: 1.5rem;    /* 24px */
  --pad-l: 2rem;      /* 32px */
  
  --gap-s: 1rem;      /* 16px */
  --gap-m: 1.5rem;    /* 24px */
  --gap-l: 2rem;      /* 32px */
  --gap-xl: 3rem;      /* 48px */
  --gap-xxl: 6rem;      /* 96px */
	
  --space-s: 0.5rem;  /* 8px */
  --space-m: 1rem;    /* 16px */
  --space-l: 1.5rem;  /* 24px */
}

/* =========================
   RESPONSIVE CONTAINER GUTTERS
========================= */

/* Tablet (769px-1339px): 70px */
@media (min-width: 769px) {
  :root {
    --container-gutter: 4.375rem; /* 70px */
  }
}

/* Desktop (1340px+): 100px */
@media (min-width: 1340px) {
  :root {
    --container-gutter: 6.25rem; /* 100px */
  }
}

/* =========================
   TYPOGRAPHY
========================= */

/* Font Family Utilities */
.ff-body {
    font-family: var(--gp-font--body);
}

.ff-heading {
    font-family: var(--gp-font--headings);
}

/* Heading and utility class font assignment */
h1, h2, h3, h4, h5, h6,
[class^="fs-"] {
    font-family: var(--gp-font--headings);
}

.fs-p {
    font-family: var(--gp-font--body);
}

/* =========================
   FLUID TYPOGRAPHY SCALE
========================= */

h1,
.fs-h1 {
    font-size: clamp(1.75rem, 1rem + 4vw, 3.375rem);      /* 28px - 54px */
}

h2,
.fs-h2 {
    font-size: clamp(1.5rem, 0.75rem + 3vw, 2.25rem);     /* 24px - 36px */
}

h3,
.fs-h3 {
    font-size: clamp(1.25rem, 0.75rem + 2vw, 1.5rem);     /* 20px - 24px */
}

h4,
.fs-h4 {
    font-size: clamp(1.125rem, 0.875rem + 1vw, 1.25rem);  /* 18px - 20px */
}

h5,
.fs-h5 {
    font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem);   /* 16px - 18px */
}

h6,
.fs-h6 {
    font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1rem);    /* 14px - 16px */
}

p,
.fs-p {
    font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1rem);    /* 14px - 16px */
}