/*

Project: MinimalCSS
Author: Elevations
Description: A minimal, overseeable CSS Class & Variable Framework built inside Bricks, but with a Page inside Wordpress that visualizes all the classes and styles.
Notes: Taking Inspiration from Finsweet Client First, using this sheet as the Stylesheet overview version.

*/

/*
VARIABLES
-- import to Bricks (created here) - based on 1366px viewport */
:root {

--space-xs: clamp(1.00rem, calc(1.00rem + 0.0020 * (100vw - 380px)), 1.20rem);
--space-s: clamp(1.40rem, calc(1.40rem + 0.0020 * (100vw - 380px)), 1.60rem);
--space-m: clamp(1.80rem, calc(1.80rem + 0.0061 * (100vw - 380px)), 2.40rem);
--space-l: clamp(2.80rem, calc(2.80rem + 0.0041 * (100vw - 380px)), 3.20rem);
--space-xl: clamp(4.20rem, calc(4.20rem + 0.0061 * (100vw - 380px)), 4.80rem);
--space-xxl: clamp(5.80rem, calc(5.80rem + 0.0061 * (100vw - 380px)), 6.40rem);

--logo-width: clamp(12.00rem, calc(12.00rem + 0.0609 * (100vw - 380px)), 18.00rem);
--space-section: clamp(10.00rem, calc(10.00rem + 0.0203 * (100vw - 380px)), 12.00rem);


--h1-size: clamp(4.50rem, calc(4.50rem + 0.0294 * (100vw - 380px)), 7.40rem);
--h2-size: clamp(4.00rem, calc(4.00rem + 0.0223 * (100vw - 380px)), 6.20rem);
--h3-size: clamp(2.80rem, calc(2.80rem + 0.0061 * (100vw - 380px)), 3.40rem);
--h4-size: clamp(2.60rem, calc(2.60rem + 0.0041 * (100vw - 380px)), 3.00rem);
--h5-size: clamp(2.40rem, calc(2.40rem + 0.0041 * (100vw - 380px)), 2.80rem);
--h6-size: clamp(2.20rem, calc(2.20rem + 0.0041 * (100vw - 380px)), 2.60rem);

--text-size-xs: clamp(1.00rem, calc(1.00rem + 0.0020 * (100vw - 380px)), 1.20rem);
--text-size-s: clamp(1.40rem, calc(1.40rem + 0.0020 * (100vw - 380px)), 1.60rem);
--text-size-m: clamp(1.60rem, calc(1.60rem + 0.0041 * (100vw - 380px)), 2.00rem);
--text-size-l: clamp(2.00rem, calc(2.00rem + 0.0041 * (100vw - 380px)), 2.40rem);
--text-size-xl:  clamp(2.80rem, calc(2.80rem + 0.0041 * (100vw - 380px)), 3.20rem);
--text-size-xxl: clamp(3.80rem, calc(3.80rem + 0.0081 * (100vw - 380px)), 4.60rem);
--text-size-xxxl: clamp(4.50rem, calc(4.50rem + 0.0355 * (100vw - 380px)), 8.00rem);

--text-line-height: calc(10px + 2ex);
--heading-line-height: calc(7px + 2ex);

--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

--grid-gap: var(--space-xl) var(--space-l);
--grid-gap-s: var(--space-l) var(--space-m);
--card-gap: var(--space-m);
--content-gap: calc(var(--space-m) * 1.5);
--container-gap: var(--space-xxl);
--padding-section: var(--space-section) var(--space-m);
--offset: 80px;


/* Brand colors - could use hex for ease of use*/
--clr-primary: hsl(235°, 93%, 55%);
--clr-secondary: hsl(235°, 93%, 55%);
--clr-tertiary: hsl(235°, 93%, 55%);
--clr-accent: hsl(235°, 93%, 55%);
--clr-alternate: hsl(235°, 93%, 55%);

/* Background Colors -use prim vars, but can be changed */
--clr-bg-primary: var(--clr-primary);
--clr-bg-secondary: var(--clr-secondary);
--clr-bg-tertiary: var(--clr-tertiary);
--clr-bg-accent: var(--clr-accent);
--clr-bg-alternate: var(--clr-alternate);

/* Text colors */
--clr-text-primary: var(--clr-black);
--clr-text-secondary: var(--clr-secondary);
--clr-text-alternate: var(--clr-white);
--clr-link: var(--clr-tertiary);


--clr-border-primary: var(--clr-primary); 
--clr-border-black: var(--clr-black);


/* Base & Neutral Colors */
--clr-black: hsl(0°, 0%, 0%);
--clr-white: hsl(0°, 0%, 100%);
--clr-neutral-light: hsl(136°, 0%, 89%);
--clr-neutral-dark: hsl(0°, 0%, 17%);

/* System Colors */
--clr-success: hsl(134°, 100%, 32%);
--clr-warning: hsl(48°, 83%, 49%);
--clr-error: hsl(0°, 98%, 36%);


--grid-1: repeat(1, minmax(0, 1fr));
--grid-2: repeat(2, minmax(0, 1fr));
--grid-3: repeat(3, minmax(0, 1fr));
--grid-4: repeat(4, minmax(0, 1fr));
--grid-5: repeat(5, minmax(0, 1fr));
--grid-6: repeat(6, minmax(0, 1fr));
--grid-7: repeat(7, minmax(0, 1fr));
--grid-8: repeat(8, minmax(0, 1fr));
--grid-9: repeat(9, minmax(0, 1fr));
--grid-10: repeat(10, minmax(0, 1fr));
--grid-11: repeat(11, minmax(0, 1fr));
--grid-12: repeat(12, minmax(0, 1fr));
--grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
--grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
--grid-1-4: minmax(0, 1fr) minmax(0, 4fr);
--grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
--grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
--grid-2-4: minmax(0, 2fr) minmax(0, 4fr);
--grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
--grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
--grid-3-4: minmax(0, 3fr) minmax(0, 4fr);
--grid-4-1: minmax(0, 4fr) minmax(0, 1fr);
--grid-4-2: minmax(0, 4fr) minmax(0, 2fr);
--grid-4-3: minmax(0, 4fr) minmax(0, 3fr);

--max-width-full: 100%;
--max-width-s: 20rem;
--max-width-m: 48rem;
--max-width-l: 64rem;
--max-width-xl: 80rem;

}




/* COMPONENT CLASSES */

.h1 {
  font-size: var(--h1-size);
  color: var(--clr-headings);
}

.h2 {
  font-size: var(--h2-size);
  color: var(--clr-headings);
}

.h3 {
  font-size: var(--h3-size);
  color: var(--clr-headings);
}

.h4 {
  font-size: var(--h4-size);
  color: var(--clr-headings);
}

.h5 {
  font-size: var(--h5-size);
  color: var(--clr-headings);
}

.h6 {
  font-size: var(--h6-size);
  color: var(--clr-headings);
}

.p {
  font-size: var(--text-size-body);
  color: var(--clr-body);
}

.a {
  font-size: var(--text-size-body);
  color: var(--clr-links);
}

.btn {
  background-color: var(--clr-primary);
  color: var(--clr-text-alternate); /*alternate mostly white */
}

.btn:hover {
  filter: opacity(0.9) brightness(1.1);
}

.text-size-s {
  font-size: var(--text-size-s)
}


/* UTILITY CLASSES */

.container-medium {
  max-width: var(--max-width-m);
}

.container-large {
  max-width: var(--max-width-l);
}

.container-xlarge {
  max-width: var(--max-width-xl);
}


.hide {
  display: none;
}

.overflow-hidden {
  overflow: hidden;
}

.pointer-events-none {
  pointer-events: none;
}