/* 1. Global Font Setup & Fluid Scaling */
:root {
  /* Modern system font stack for instant loading and high readability */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  
  /* Color Palette Variables */
  --text-main: #111827;       /* Deep slate/black */
  --text-muted: #4b5563;      /* Soft gray for body copy */
  --text-accent: #4f46e5;     /* Indigo for links and highlights */
  
  /* Responsive Fluid Typography via clamp(min, preferred, max) */
/* Original sizes */
/*
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --fs-md: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-lg: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --fs-xl: clamp(2rem, 1.75rem + 1.25vw, 3rem);
  --fs-display: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
*/
	--fs-xs:      clamp(0.75rem, 0.70rem + 0.25vw, 0.85rem);
	--fs-sm:      clamp(0.85rem, 0.80rem + 0.3vw, 0.9rem);
	--fs-base:    clamp(0.9rem, 0.85rem + 0.35vw, 1.05rem);
	--fs-md:      clamp(1.55rem, 1.30rem + 0.5vw, 1.75rem);
	--fs-lg:      clamp(1.75rem, 1.45rem + 0.75vw, 2.25rem);
	--fs-xl:      clamp(2.25rem, 1.85rem + 1.25vw, 2.65rem);
	--fs-display: clamp(2.65rem, 2.0rem + 2.5vw, 4.0rem);

	
}

/* 2. Global Baseline Document Styles */
body {
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.5;                     /* Generous vertical spacing for optimal scanning */
	color: var(--text-main);
	-webkit-font-smoothing: antialiased;  /* Crisp font rendering on macOS/iOS */
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* 3. Modern Heading Architecture */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-main);
  letter-spacing: -0.03em;              /* Tighter letter spacing for large headers */
  text-wrap: balance;                   /* Prevents single-word hanging lines (orphans) */
  margin-bottom: 0.25em;
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-md); }

.h1, .h2, .h3, .h4 {
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-main);
  letter-spacing: -0.03em;              /* Tighter letter spacing for large headers */
  text-wrap: balance;                   /* Prevents single-word hanging lines (orphans) */
  margin-bottom: 0.25em;
}

.h1 { font-size: var(--fs-xl); }
.h2 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.h3 { font-size: var(--fs-md); }

/* Font size utility classes */

.fs-xs{
	font-size: var(--fs-xs);	
}
.fs-sm{
	font-size: var(--fs-sm);	
}
.fs-base{
	font-size: var(--fs-base);	
}
.fs-md{
	font-size: var(--fs-md);	
}
.fs-lg{
	font-size: var(--fs-lg);	
}
.fs-xl{
	font-size: var(--fs-xl);	
}
.fs-display{
	font-size: var(--fs-display);	
}

/* Font weights */
.fw-100{
	font-weight: 100;
}
.fw-200{
	font-weight: 200;
}
.fw-300{
	font-weight: 300;
}
.fw-400{
	font-weight: 400;
}
.fw-500{
	font-weight: 500;
}
.fw-600{
	font-weight: 600;
}
.fw-700{
	font-weight: 700;
}
.fw-800{
	font-weight: 800;
}
.fw-900{
	font-weight: 900;
}

/* 4. Body Content, Utilities & Inline Elements */
p {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  max-width: 100ch;                      /* Limits line length to ~65 characters for maximum reading comfort */
  text-wrap: pretty;                    /* Modern text-wrap tailored for cleaner paragraphs */
}

/* Accentuate important inline styles */
strong {
  font-weight: 700;
  color: var(--text-main);
}

small {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.text-italic{
	font-style: italic;	
}

/* Modern Hyperlink Styling */
a {
  color: var(--text-accent);
  text-decoration: none;
  font-weight: 400;
  /*
  background-image: linear-gradient(var(--text-accent), var(--text-accent));
  background-size: 0% 2px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease; /~ Smooth underline animation on hover ~/
  */
}

/*
a:hover {
  background-size: 100% 2px;
}
*/

/* 5. Utility Classes for Hero Elements */
.text-display {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.05;
}

/* Eye-catching gradient effect inside text elements */
.text-gradient {
  background: linear-gradient(120deg, #4f46e5, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-bottom: 2.75px;
}

/* Elegant editorial lead paragraph */
.text-lead {
  font-size: var(--fs-md);
  color: var(--text-main);
  font-weight: 400;
  line-height: 1.5;
}

.font-card {
  background: #f7f7f7;
  padding: 15px;
  margin-bottom: 15px;
  border-top: 5px solid #0076ff;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}