/**
 * Global Typography System & Color Variables
 * Reusable typography classes and centralized color system
 * These can be extended or overridden in component-specific CSS
 */

/* ========================================
   CSS CUSTOM PROPERTIES (COLOR VARIABLES)
   ======================================== */

:root {
	/* Primary Colors */
	--color-primary-text: #2b2b2b;
	--color-secondary-text: #494461;
	--color-white: #ffffff;
	--color-black: #000000;
	
	/* Brand Colors */
	--color-teal: #aae8e8;
	--color-teal-hover: #9dd7d7;
	--color-teal-active: #5ba8a9;
	--color-teal-border: #7bc8c9;
	
	--color-purple: #bb8cf8;
	--color-purple-hover: #a67ae6;
	--color-purple-active: #9258d4;
	
	--color-link-hover: #2795b6;
	
	/* Background Colors */
	--color-bg-white: #ffffff;
	--color-bg-teal: #aae8e8;
	--color-bg-purple: #bb8cf8;
	--color-bg-light-green: #eeffd4;
	--color-bg-light-purple: #E3E4FE;
	--color-bg-light-gray: #f4f4f4;
	
	/* Gray Scale */
	--color-gray-light: #e0e0e0;
	--color-gray-medium: #cccccc;
	--color-gray-dark: #999999;
	--color-gray-darker: #666666;
	
	/* RGBA Colors */
	--color-border-light: rgba(0, 0, 0, 0.1);
	--color-border-medium: rgba(0, 0, 0, 0.2);
	--color-text-muted: rgba(0, 0, 0, 0.55);
	--color-text-muted-light: rgba(43, 43, 43, 0.30);
	--color-placeholder: rgba(43, 43, 43, 0.52);
	
	/* Shadow Colors */
	--color-shadow-light: rgba(0, 0, 0, 0.02);
	--color-shadow-medium: rgba(0, 0, 0, 0.03);
	--color-shadow-dark: rgba(0, 0, 0, 0.04);
	--color-shadow-darker: rgba(0, 0, 0, 0.08);
	--color-shadow-strong: rgba(0, 0, 0, 0.15);
	--color-shadow-stronger: rgba(0, 0, 0, 0.2);
	--color-shadow-strongest: rgba(0, 0, 0, 0.25);
	
	/* Gradient Colors */
	--color-white-rgba: rgba(255, 255, 255, 1);
	--color-teal-rgba: rgba(170, 232, 232, 1);
}

/* ========================================
   FONT FAMILY UTILITIES
   ======================================== */

.font-bricolage {
	font-family: 'Bricolage Grotesque', sans-serif;
}

.font-serif {
	font-family: 'Instrument Serif', serif;
}

/* ========================================
   BODY TEXT / DESCRIPTION
   ======================================== */

.text-body {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.62em;
	letter-spacing: -0.005em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-body {
		font-size: 14px;
		line-height: 1.54em;
	}
}

/* Alternative body text size (16px mobile) */
.text-body-md {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.62em;
	letter-spacing: -0.005em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-body-md {
		font-size: 16px;
		line-height: 1.62em;
	}
}

/* ========================================
   UNIFIED TYPOGRAPHY CLASSES
   ======================================== */

/* Homepage Extra Big Heading (Instrument Serif) - homepage hero */
.typog-h-hero {
	font-family: 'Instrument Serif', serif;
	font-size: 96px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 96px */
	letter-spacing: -1.92px; /* -2% */
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.typog-h-hero {
		font-size: 54px;
		font-style: normal;
		font-weight: 400;
		line-height: 100%; /* 54px */
		letter-spacing: -1.08px; /* -2% */
	}
}

/* H1 Heading (Instrument Serif) - common use (hero sections) */
.typog-h1 {
	font-family: 'Instrument Serif', serif;
	font-size: 96px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 96px */
	letter-spacing: -1.92px; /* -2% */
	color: var(--color-primary-text);
}


@media (max-width: 1023px) {
	.typog-h1 {
		font-size: 48px;
		font-style: normal;
		font-weight: 400;
		line-height: 100%; /* 48px */
		letter-spacing: -0.96px; /* -2% */
	}
}

/* H2 Heading (Bricolage Grotesque) - common use */
.typog-h2 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 52px;
	font-style: normal;
	font-weight: 400;
	line-height: 52px; /* 100% */
	letter-spacing: -2.6px; /* -5% */
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.typog-h2 {
		font-size: 32px;
		font-style: normal;
		font-weight: 400;
		line-height: 35px; /* 109.375% */
		letter-spacing: -1.6px; /* -5% */
	}
}

/* H2 Smaller (Bricolage Grotesque) - alternate smaller H2 */
.typog-h2-sm {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 42px;
	font-style: normal;
	font-weight: 400;
	line-height: 46px; /* 109.5% */
	letter-spacing: -1.26px; /* -3% */
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.typog-h2-sm {
		font-size: 28px;
		font-style: normal;
		font-weight: 400;
		line-height: 30px; /* 107.1% */
		letter-spacing: -0.84px; /* -3% */
	}
}

/* H3 Heading (Instrument Serif) - common use */
.typog-h3 {
	font-family: 'Instrument Serif', serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 36px */
	letter-spacing: -0.36px;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.typog-h3 {
		font-size: 27px;
		font-style: normal;
		font-weight: 400;
		line-height: 100%; /* 27px */
		letter-spacing: -0.27px;
	}
}

/* H4 Heading (Bricolage Grotesque) - common use */
.typog-h4 {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 161%; /* 32.2px */
	letter-spacing: -0.1px;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.typog-h4 {
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: 145%; /* 23.2px */
		letter-spacing: -0.08px;
	}
}


/* ========================================
   SERIF HEADINGS (Instrument Serif)
   ======================================== */

.text-heading-serif {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1em;
	letter-spacing: -0.01em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-heading-serif {
		font-size: 26px;
		line-height: 1em;
	}
}



/* ========================================
   BOLD SUBTITLES / TITLES
   ======================================== */

.text-subtitle-bold {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.61em;
	letter-spacing: -0.005em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-subtitle-bold {
		font-size: 16px;
		line-height: 1.45em;
	}
}

/* Alternative subtitle size (18px mobile) */
.text-subtitle-bold-md {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.61em;
	letter-spacing: -0.005em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-subtitle-bold-md {
		font-size: 18px;
		line-height: 1.61em;
	}
}

/* ========================================
   BUTTON TEXT
   ======================================== */

.text-button {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.45em;
	letter-spacing: 0.02em;
	color: var(--color-white);
}

@media (max-width: 1023px) {
	.text-button {
		font-size: 12px;
		line-height: 1.45em;
	}
}

/* ========================================
   NAVIGATION TEXT
   ======================================== */

.text-nav-label {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.45em;
	letter-spacing: -0.005em;
	color: var(--color-primary-text);
}

.text-nav-link {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 161%; /* 22.54px */
	letter-spacing: -0.07px;
	color: var(--color-primary-text);
}

.text-nav-link-direct {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.45em;
	letter-spacing: -0.005em;
	color: var(--color-primary-text);
}

/* ========================================
   STATS / NUMBERS
   ======================================== */

.text-stats-number {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 82px;
	line-height: 100%;
	letter-spacing: -0.02em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-stats-number {
		font-size: 48px;
		line-height: 100%;
	}
}

.text-stats-label {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 161%;
	letter-spacing: -0.005em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-stats-label {
		font-size: 16px;
		line-height: 145%;
	}
}

/* ========================================
   FORM INPUT TEXT
   ======================================== */

.text-form-input {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.62em;
	letter-spacing: -0.005em;
	color: var(--color-primary-text);
}

/* ========================================
   SPECIAL CASES
   ======================================== */

/* Download text (large display text) */
.text-download {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.095em;
	letter-spacing: -0.03em;
	color: var(--color-white);
}

@media (max-width: 1023px) {
	.text-download {
		font-size: 30px;
		line-height: 1.095em;
	}
}

/* Card title (Instrument Serif, medium) */
.text-card-title {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1em;
	letter-spacing: -0.01em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-card-title {
		font-size: 27px;
		line-height: 1em;
	}
}

/* Alternative card title (28px mobile) */
.text-card-title-md {
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1em;
	letter-spacing: -0.01em;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.text-card-title-md {
		font-size: 28px;
		line-height: 1em;
	}
}

/* ========================================
   COLOR UTILITIES
   ======================================== */

.text-color-primary {
	color: var(--color-primary-text);
}

.text-color-secondary {
	color: var(--color-secondary-text);
}

.text-color-white {
	color: var(--color-white);
}

.text-color-muted {
	color: var(--color-text-muted);
}