/* Typography & Spacing System - Responsive Scale with clamp() */
/* Created: December 15, 2025 - Phase 46.3 */
/* Implements 4px baseline spacing and fluid typography */

:root {
  /* ===== RESPONSIVE TYPOGRAPHY SCALE (using clamp) ===== */
  /* Format: clamp(min, preferred, max) for fluid responsive sizing */

  /* Display sizes (h1-h2 range) */
  --font-size-display-lg: clamp(2.25rem, 5vw + 0.5rem, 3.75rem);    /* h1 */
  --font-size-display-md: clamp(1.875rem, 4vw + 0.5rem, 3rem);      /* h2 */
  --font-size-display-sm: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);     /* h3 */

  /* Heading sizes */
  --font-size-heading-lg: clamp(1.5rem, 2.5vw + 0.25rem, 1.875rem); /* h4 */
  --font-size-heading-md: clamp(1.25rem, 2vw + 0.25rem, 1.5rem);    /* h5 */
  --font-size-heading-sm: clamp(1.125rem, 1.5vw + 0.25rem, 1.25rem);/* h6 */

  /* Body text sizes */
  --font-size-body-lg: clamp(1.125rem, 1vw + 0.5rem, 1.25rem);     /* Large body */
  --font-size-body-md: clamp(1rem, 0.8vw + 0.5rem, 1.125rem);      /* Regular body */
  --font-size-body-sm: clamp(0.875rem, 0.5vw + 0.5rem, 1rem);      /* Small text */
  --font-size-body-xs: clamp(0.75rem, 0.4vw + 0.4rem, 0.875rem);   /* Extra small */

  /* ===== 4PX BASELINE SPACING SCALE ===== */
  /* All units based on 4px baseline for perfect alignment grid */

  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-9: 2.25rem;   /* 36px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-28: 7rem;     /* 112px */
  --space-32: 8rem;     /* 128px */

  /* ===== RESPONSIVE LINE HEIGHT SCALE ===== */
  --line-height-title: 1.2;      /* Headings: tight */
  --line-height-heading: 1.4;    /* Subheadings: snug */
  --line-height-body: 1.6;       /* Paragraphs: comfortable */
  --line-height-loose: 1.8;      /* Large text: relaxed */

  /* ===== LETTER SPACING ===== */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* ===== TEXT TRANSFORM ===== */
  --text-transform-none: none;
  --text-transform-uppercase: uppercase;
  --text-transform-lowercase: lowercase;
  --text-transform-capitalize: capitalize;
}

/* ===== RESPONSIVE TYPOGRAPHY RULES ===== */

/* H1 - Display Large */
h1 {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-title);
  margin-bottom: var(--space-6);
  font-weight: var(--font-weight-bold);
}

/* H2 - Display Medium */
h2 {
  font-size: var(--font-size-display-md);
  line-height: var(--line-height-title);
  margin-bottom: var(--space-5);
  font-weight: var(--font-weight-bold);
}

/* H3 - Display Small */
h3 {
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-4);
  font-weight: var(--font-weight-bold);
}

/* H4 - Heading Large */
h4 {
  font-size: var(--font-size-heading-lg);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-semibold);
}

/* H5 - Heading Medium */
h5 {
  font-size: var(--font-size-heading-md);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-semibold);
}

/* H6 - Heading Small */
h6 {
  font-size: var(--font-size-heading-sm);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
}

/* Paragraph - Body Default */
p {
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-4);
}

/* Small text */
small,
.text-sm {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
}

/* Extra small text */
.text-xs {
  font-size: var(--font-size-body-xs);
  line-height: var(--line-height-body);
}

/* Large text */
.text-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
}

/* ===== RESPONSIVE PADDING UTILITIES (4px baseline) ===== */

/* P-0 to P-32 (0px to 128px, in 4px increments) */
.p-0  { padding: var(--space-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); }
.p-7  { padding: var(--space-7); }
.p-8  { padding: var(--space-8); }
.p-9  { padding: var(--space-9); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-14 { padding: var(--space-14); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }
.p-28 { padding: var(--space-28); }
.p-32 { padding: var(--space-32); }

/* Padding X (horizontal) */
.px-1  { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3  { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8  { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }

/* Padding Y (vertical) */
.py-1  { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* Padding individual sides */
.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-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }

.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-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }

.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-6  { padding-left: var(--space-6); }
.pl-8  { padding-left: var(--space-8); }

.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-6  { padding-right: var(--space-6); }
.pr-8  { padding-right: var(--space-8); }

/* ===== RESPONSIVE MARGIN UTILITIES (4px baseline) ===== */

/* M-0 to M-32 (0px to 128px, in 4px increments) */
.m-0  { margin: var(--space-0); }
.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); }
.m-7  { margin: var(--space-7); }
.m-8  { margin: var(--space-8); }
.m-9  { margin: var(--space-9); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-14 { margin: var(--space-14); }
.m-16 { margin: var(--space-16); }
.m-20 { margin: var(--space-20); }
.m-24 { margin: var(--space-24); }
.m-28 { margin: var(--space-28); }
.m-32 { margin: var(--space-32); }

/* Margin X (horizontal) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1  { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2  { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3  { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4  { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-6  { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-8  { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); }

/* Margin Y (vertical) */
.my-1  { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6  { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8  { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }

/* Margin individual sides */
.mt-0  { margin-top: var(--space-0); }
.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-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.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-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.ml-1  { margin-left: var(--space-1); }
.ml-2  { margin-left: var(--space-2); }
.ml-3  { margin-left: var(--space-3); }
.ml-4  { margin-left: var(--space-4); }
.ml-6  { margin-left: var(--space-6); }
.ml-8  { margin-left: var(--space-8); }

.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-6  { margin-right: var(--space-6); }
.mr-8  { margin-right: var(--space-8); }

/* ===== GAP UTILITIES (for flex/grid layouts) ===== */

.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-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

/* ===== RESPONSIVE TEXT UTILITIES ===== */

.font-thin       { font-weight: var(--font-weight-thin); }
.font-extralight { font-weight: var(--font-weight-extralight); }
.font-light      { font-weight: var(--font-weight-light); }
.font-normal     { font-weight: var(--font-weight-normal); }
.font-medium     { font-weight: var(--font-weight-medium); }
.font-semibold   { font-weight: var(--font-weight-semibold); }
.font-bold       { font-weight: var(--font-weight-bold); }
.font-extrabold  { font-weight: var(--font-weight-extrabold); }
.font-black      { font-weight: var(--font-weight-black); }

.leading-tight   { line-height: var(--line-height-title); }
.leading-snug    { line-height: var(--line-height-heading); }
.leading-normal  { line-height: var(--line-height-body); }
.leading-relaxed { line-height: var(--line-height-loose); }

.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide  { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* ===== RESPONSIVE BREAKPOINT UTILITIES ===== */

/* Mobile First (< 480px) - default styles */
/* These are the mobile defaults */

/* Tablet Portrait (480px - 767px) */
@media (min-width: 480px) {
  .sm\:p-4  { padding: var(--space-4); }
  .sm\:p-6  { padding: var(--space-6); }
  .sm\:m-4  { margin: var(--space-4); }
  .sm\:m-6  { margin: var(--space-6); }
  .sm\:mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
  .sm\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
  .sm\:text-lg { font-size: var(--font-size-body-lg); }
  .sm\:gap-4  { gap: var(--space-4); }
  .sm\:gap-6  { gap: var(--space-6); }
}

/* Tablet Landscape (768px - 1199px) */
@media (min-width: 768px) {
  .md\:p-4  { padding: var(--space-4); }
  .md\:p-6  { padding: var(--space-6); }
  .md\:p-8  { padding: var(--space-8); }
  .md\:m-6  { margin: var(--space-6); }
  .md\:m-8  { margin: var(--space-8); }
  .md\:mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
  .md\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .md\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .md\:text-lg { font-size: var(--font-size-body-lg); }
  .md\:gap-4  { gap: var(--space-4); }
  .md\:gap-6  { gap: var(--space-6); }
  .md\:gap-8  { gap: var(--space-8); }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
  .lg\:p-6  { padding: var(--space-6); }
  .lg\:p-8  { padding: var(--space-8); }
  .lg\:p-10 { padding: var(--space-10); }
  .lg\:m-8  { margin: var(--space-8); }
  .lg\:m-10 { margin: var(--space-10); }
  .lg\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
  .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
  .lg\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .lg\:text-lg { font-size: var(--font-size-body-lg); }
  .lg\:gap-6  { gap: var(--space-6); }
  .lg\:gap-8  { gap: var(--space-8); }
  .lg\:gap-10 { gap: var(--space-10); }
}

/* ===== ACCESSIBILITY: REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
  /* All animations already disabled by design-system.css */
  /* Typography remains fully functional for readability */
}

/* ===== DARK MODE TYPOGRAPHY ADJUSTMENTS ===== */

@media (prefers-color-scheme: dark) {
  /* Line height might need slight adjustment for dark backgrounds */
  p,
  .text-sm,
  .text-xs,
  .text-lg {
    line-height: 1.65;
  }

  h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    line-height: var(--line-height-title);
    margin-bottom: var(--space-3);
  }

  p {
    orphans: 3;
    widows: 3;
    margin-bottom: var(--space-2);
  }
}

/* ===== UTILITY COMBINATIONS ===== */

/* Commonly used component spacing patterns */
.card-padding { padding: var(--space-4) var(--space-6); }
.section-spacing { margin-bottom: var(--space-12); padding: var(--space-8) var(--space-6); }
.content-padding { padding: var(--space-6); }
.tight-spacing { margin-bottom: var(--space-2); }
.normal-spacing { margin-bottom: var(--space-4); }
.loose-spacing { margin-bottom: var(--space-8); }

/* End of typography-spacing-system.css */