/* =====================================================
   Digital AI — Fluid Typography System
   Uses clamp() for viewport-responsive type scale
   ===================================================== */

:root {
  /* Fluid type scale: clamp(min, preferred, max) */
  --fluid-xs:    clamp(0.64rem,  calc(0.60rem + 0.2vw),  0.75rem);
  --fluid-sm:    clamp(0.75rem,  calc(0.72rem + 0.3vw),  0.875rem);
  --fluid-base:  clamp(0.875rem, calc(0.85rem + 0.25vw), 1rem);
  --fluid-lg:    clamp(1rem,     calc(0.95rem + 0.5vw),  1.125rem);
  --fluid-xl:    clamp(1.125rem, calc(1.05rem + 0.75vw), 1.25rem);
  --fluid-2xl:   clamp(1.25rem,  calc(1.1rem  + 1.25vw), 1.5rem);
  --fluid-3xl:   clamp(1.5rem,   calc(1.2rem  + 2.5vw),  1.875rem);
  --fluid-4xl:   clamp(1.75rem,  calc(1.3rem  + 3.5vw),  2.25rem);
  --fluid-5xl:   clamp(2rem,     calc(1.4rem  + 5vw),    3rem);
  --fluid-6xl:   clamp(2.5rem,   calc(1.5rem  + 7vw),    3.75rem);
  --fluid-hero:  clamp(2.5rem,   calc(1rem    + 8vw),    5rem);
}

/* ── Typography Scale Classes ── */
.text-xs    { font-size: var(--fluid-xs);   line-height: var(--leading-relaxed); }
.text-sm    { font-size: var(--fluid-sm);   line-height: var(--leading-normal); }
.text-base  { font-size: var(--fluid-base); line-height: var(--leading-normal); }
.text-lg    { font-size: var(--fluid-lg);   line-height: var(--leading-normal); }
.text-xl    { font-size: var(--fluid-xl);   line-height: var(--leading-snug); }
.text-2xl   { font-size: var(--fluid-2xl);  line-height: var(--leading-snug); }
.text-3xl   { font-size: var(--fluid-3xl);  line-height: var(--leading-tight); }
.text-4xl   { font-size: var(--fluid-4xl);  line-height: var(--leading-tight); }
.text-5xl   { font-size: var(--fluid-5xl);  line-height: var(--leading-tight); }
.text-6xl   { font-size: var(--fluid-6xl);  line-height: var(--leading-tight); }
.text-hero  { font-size: var(--fluid-hero); line-height: 1.1; }

/* ── Heading Styles ── */
h1, .h1 { font-family: var(--font-heading); font-size: var(--fluid-5xl); font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: -0.025em; color: var(--text-primary); }
h2, .h2 { font-family: var(--font-heading); font-size: var(--fluid-4xl); font-weight: var(--font-bold); line-height: var(--leading-tight); letter-spacing: -0.025em; color: var(--text-primary); }
h3, .h3 { font-family: var(--font-heading); font-size: var(--fluid-3xl); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: var(--text-primary); }
h4, .h4 { font-family: var(--font-heading); font-size: var(--fluid-2xl); font-weight: var(--font-semibold); line-height: var(--leading-snug); color: var(--text-primary); }
h5, .h5 { font-family: var(--font-heading); font-size: var(--fluid-xl); font-weight: var(--font-medium); line-height: var(--leading-normal); color: var(--text-primary); }
h6, .h6 { font-family: var(--font-heading); font-size: var(--fluid-lg); font-weight: var(--font-medium); line-height: var(--leading-normal); color: var(--text-primary); }

/* ── Body Styles ── */
body, .body-base { font-family: var(--font-body); font-size: var(--fluid-base); line-height: var(--leading-normal); color: var(--text-primary); }
.body-sm  { font-family: var(--font-body); font-size: var(--fluid-sm);  line-height: var(--leading-normal); color: var(--text-secondary); }
.body-lg  { font-family: var(--font-body); font-size: var(--fluid-lg);  line-height: var(--leading-relaxed); color: var(--text-primary); }
.caption  { font-family: var(--font-body); font-size: var(--fluid-xs);  line-height: var(--leading-normal); color: var(--text-tertiary); }
.overline { font-family: var(--font-body); font-size: var(--fluid-xs);  line-height: var(--leading-normal); color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--font-medium); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

/* ── Font Weight Utilities ── */
.font-regular   { font-weight: var(--font-regular); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }

/* ── Color Utilities ── */
.text-primary-color   { color: var(--text-primary); }
.text-secondary-color { color: var(--text-secondary); }
.text-tertiary-color  { color: var(--text-tertiary); }
.text-disabled-color  { color: var(--text-disabled); }
.text-brand-color     { color: var(--text-brand); }
.text-error-color     { color: var(--text-error); }
.text-success-color   { color: var(--text-success); }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}