/* utilities.css */

/* ==========================
   Theme Colors
========================== */
:root {
	/* Colors */
	--primaryColor: #012296;
	--color-primary: #012296;
	--color-white: #ffffff;
	--color-off-white: #E8E3DD;
	--color-accent: #fd9794;
	--color-black: #000000;
	--color-gray: #95938b;
	--color-red: #ff0000;

	/* Section Backgrounds */
	--bg-1: #e8e3dd;
	--bg-2: #df355733;
	--bg-3: #85cc9733;
	--bg-4: var(--color-off-white);

	/* ==========================
	Font Sizes
	========================== */
	--fs-1: clamp(0px, 13vw, 1000px);
	--fs-2: clamp(0px, 8vw, 1000px);
	--fs-3: clamp(0px, 5vw, 1000px);
	--fs-4: clamp(0px, 4vw, 500px);
	--fs-5: clamp(45px, 3.4vw, 60px);
	--fs-6: clamp(0px, 2.2vw, 500px);
	--fs-7: clamp(0px, 1.7vw, 500px);
	--fs-8: clamp(20px, 1.3vw, 25px);
	--fs-9: clamp(18px, 1vw, 19px);
	--fs-10: clamp(15px, 0.9vw, 17px);

	/* ==========================
	Font Weights
	========================== */
	--fw-1: 300;
	--fw-2: 400;
	--fw-3: 500;
	--fw-4: 600;
	--fw-5: 700;

	/* ==========================
	Border Radius
	========================== */
	--rounded-full: 999px;

	/* ==========================
	Spacing
	========================== */
	--space-0: 0;
	--space-1: clamp(4px, 0.5vw, 16px);
	--space-2: clamp(8px, 1vw, 32px);
	--space-3: clamp(16px, 2vw, 48px);
	--space-4: clamp(24px, 3vw, 64px);
	--space-5: clamp(32px, 4vw, 96px);
	--space-6: clamp(48px, 6vw, 120px);
	--space-7: clamp(60px, 7vw, 135px);
	--space-8: clamp(80px, 8vw, 150px);
	--space-9: clamp(90px, 10vw, 200px);
	--space-10: clamp(100px, 12vw, 250px);
	--space-11: clamp(120px, 20vw, 500px);
}


/* ==========================
   Text Classes
========================== */
.text-1 {
  font-size: var(--fs-1);
  font-weight: var(--fw-2);
}
.text-2 {
  font-size: var(--fs-2);
  font-weight: var(--fw-2);
}
.text-3 {
  font-size: var(--fs-3);
  font-weight: var(--fw-3);
}
.text-4 {
  font-size: var(--fs-4);
  font-weight: var(--fw-2);
}
.text-5 {
  font-size: var(--fs-5);
  font-weight: var(--fw-3);
}
.text-6 {
  font-size: var(--fs-6);
  font-weight: var(--fw-2);
}
.text-7 {
  font-size: var(--fs-7);
  font-weight: var(--fw-4);
}
.text-8 {
  font-size: var(--fs-8);
  font-weight: var(--fw-2);
}
.text-9 {
  font-size: var(--fs-9);
  font-weight: var(--fw-1);
}
.text-10 {
	font-size: var(--fs-10);
  font-weight: var(--fw-1);
}

/* ==========================
   Text Colors
========================== */
.text-black {
	color: var(--color-black);
}
.text-gray {
	color: var(--color-gray);
}
.text-white {
	color: var(--color-white);
}
.text-primary {
	color: var(--color-primary);
}
.text-accent {
	color: var(--color-accent);
}

/* ==========================
   Border Radius Classes
========================== */
.rounded-full {
	border-radius: var(--rounded-full);
}

/* ==========================
   Object Classes
========================== */

.object-cover {
	object-fit: cover;
}
.object-contain {
	object-fit: contain;
}

/* ==========================
   Utility Classes
========================== */

.hidden {
	display: none;
}
.cursor-pointer {
	cursor: pointer;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}

/* Debug Borders */
.border-1 {
  border: 1px solid var(--color-red);
}

/* Text Alignment */
.align-1 {
  text-align: left;
}
.align-2 {
  text-align: center;
}
.align-3 {
  text-align: right;
}

/* Font Weights */
.fw-1 {
  font-weight: var(--fw-1);
}
.fw-2 {
  font-weight: var(--fw-2);
}
.fw-3 {
  font-weight: var(--fw-3);
}
.fw-4 {
  font-weight: var(--fw-4);
}
.fw-5 {
  font-weight: var(--fw-5);
}

/* ==========================
   Section Backgrounds
========================== */
.bg-1 {
  background-color: var(--bg-1);
}
.bg-2 {
  background-color: var(--bg-2);
}
.bg-3 {
  background-color: var(--bg-3);
}
.bg-gray {
	background-color: var(--color-gray);
}
.bg-primary {
	background-color: var(--color-primary);
}
.bg-white {
	background-color: var(--color-white);
}
.bg-accent {
	background-color: var(--color-accent);
}
.bg-off-white {
  background-color: var(--color-off-white);
}

/* ==========================
   Spacing Utilities
========================== */
.ml-auto {
  margin-left: auto;
}
.m-1 {
  margin: var(--space-1);
}
.m-2 {
  margin: var(--space-2);
}
.m-3 {
  margin: var(--space-3);
}
.m-4 {
  margin: var(--space-4);
}
.m-5 {
  margin: var(--space-5);
}
.m-6 {
  margin: var(--space-6);
}

.mt-auto {
  margin-top: auto;
}
.mt-1 {
  margin-top: var(--space-1);
}
.mt-2 {
  margin-top: var(--space-2);
}
.mt-3 {
  margin-top: var(--space-3);
}
.mt-4 {
  margin-top: var(--space-4);
}
.mt-5 {
  margin-top: var(--space-5);
}
.mt-6 {
  margin-top: var(--space-6);
}
.mt-7 {
  margin-top: var(--space-6);
}
.mt-8 {
  margin-top: var(--space-7);
}
.mt-9 {
  margin-top: var(--space-9);
}
.mt-10 {
  margin-top: var(--space-10);
}
.mt-11 {
  margin-top: var(--space-11);
}
.mb-0 {
  margin-bottom: var(--space-0);
}
.mb-1 {
  margin-bottom: var(--space-1);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-3 {
  margin-bottom: var(--space-3);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-5 {
  margin-bottom: var(--space-5);
}
.mb-6 {
  margin-bottom: var(--space-6);
}
.mr-0 {
  margin-right: var(--space-0);
}
.mr-1 {
  margin-right: var(--space-1);
}
.mr-2 {
  margin-right: var(--space-2);
}
.mr-3 {
  margin-right: var(--space-3);
}
.mr-4 {
  margin-right: var(--space-4);
}
.mr-5 {
  margin-right: var(--space-5);
}
.mr-6 {
  margin-right: var(--space-6);
}
.p-0 {
	padding: 0;
}
.p-1 {
  padding: var(--space-1);
}
.p-2 {
  padding: var(--space-2);
}
.p-3 {
  padding: var(--space-3);
}
.p-4 {
  padding: var(--space-4);
}
.p-5 {
  padding: var(--space-5);
}
.p-6 {
  padding: var(--space-6);
}
.pt-0 {
  padding-top: 0;
}
.pt-1 {
  padding-top: var(--space-1);
}
.pt-2 {
  padding-top: var(--space-2);
}
.pt-3 {
  padding-top: var(--space-3);
}
.pt-4 {
  padding-top: var(--space-4);
}
.pt-5 {
  padding-top: var(--space-5);
}
.pt-6 {
  padding-top: var(--space-6);
}
.pt-7 {
  padding-top: var(--space-7);
}
.pt-8 {
  padding-top: var(--space-8);
}
.pt-9 {
  padding-top: var(--space-9);
}
.pt-10 {
  padding-top: var(--space-10);
}
.pt-11 {
  padding-top: var(--space-11);
}
.pb-0 {
  padding-bottom: 0;
}
.pb-1 {
  padding-bottom: var(--space-1);
}
.pb-2 {
  padding-bottom: var(--space-2);
}
.pb-3 {
  padding-bottom: var(--space-3);
}
.pb-4 {
  padding-bottom: var(--space-4);
}
.pb-5 {
  padding-bottom: var(--space-5);
}
.pb-6 {
  padding-bottom: var(--space-6);
}
.pb-7 {
  padding-bottom: var(--space-7);
}
.pb-8 {
  padding-bottom: var(--space-8);
}
.pb-9 {
  padding-bottom: var(--space-9);
}
.pb-10 {
  padding-bottom: var(--space-10);
}
.pb-11 {
  padding-bottom: var(--space-11);
}

.pl-0 {
  padding-left: 0;
}
.pl-1 {
  padding-left: var(--space-1);
}
.pl-2 {
  padding-left: var(--space-2);
}
.pl-3 {
  padding-left: var(--space-3);
}
.pl-4 {
  padding-left: var(--space-4);
}
.pl-5 {
  padding-left: var(--space-5);
}
.pl-6 {
  padding-left: var(--space-6);
}

.pl-7 {
  padding-left: var(--space-7);
}

.pl-8 {
  padding-left: var(--space-8);
}
.pl-9 {
  padding-left: var(--space-9);
}
.pl-10 {
  padding-left: var(--space-10);
}
.pl-11 {
  padding-left: var(--space-11);
}
.pr-0 {
  padding-right: 0;
}
.pr-1 {
  padding-right: var(--space-1);
}
.pr-2 {
  padding-right: var(--space-2);
}
.pr-3 {
  padding-right: var(--space-3);
}
.pr-4 {
  padding-right: var(--space-4);
}
.pr-5 {
  padding-right: var(--space-5);
}
.pr-6 {
  padding-right: var(--space-6);
}
.pr-7 {
  padding-right: var(--space-7);
}
.pr-8 {
  padding-right: var(--space-8);
}
.pr-9 {
  padding-right: var(--space-9);
}
.pr-10 {
  padding-right: var(--space-10);
}
.pr-11 {
  padding-right: var(--space-11);
}

/* Gap Utilities */
.gap-1 {
  gap: var(--space-1);
}
.gap-2 {
  gap: var(--space-2);
}
.gap-3 {
  gap: var(--space-3);
}
.gap-4 {
  gap: var(--space-4);
}
.gap-5 {
  gap: var(--space-5);
}
.gap-6 {
  gap: var(--space-6);
}
.gap-7 {
  gap: var(--space-7);
}
.gap-8 {
  gap: var(--space-8);
}