/**
 * Typography System - Phase 1 Foundation
 *
 * Based on thoughtful-text-styling.md specification v1.1.0
 * Implements research-based typography for optimal readability
 *
 * Phase 1 includes: * - System font stacks (zero load time)
 * - Fluid typography with clamp()
 * - Optimal line length (65ch)
 * - WCAG AA compliant line heights
 * - 8px vertical rhythm grid
 * - WCAG AA color contrast
 * - OpenType features
 * - Accessibility features
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

:root {
  /* === Font Stacks === */
  --font-body: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    oxygen-sans, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", menlo, monaco,
    consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
  --font-heading: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
    roboto, "Helvetica Neue", arial, sans-serif;

  /* === Fluid Typography (clamp) ===
     Base: Scales from 16px at 375px viewport to 18px at 1440px viewport
     Formula: clamp(min, preferred, max)
     Preferred: min-size + (viewport-width × growth-factor)
     Example: 0.9rem + 0.47vw = 0.9rem base + 0.47% of viewport width */

  --text-base: clamp(1rem, 0.9rem + 0.47vw, 1.125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);

  /* Headings: Larger growth factors for more dramatic scaling */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24px → 30px */
  --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem); /* 30px → 36px */
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem); /* 36px → 48px */

  /* === Vertical Rhythm (8px grid) === */
  --space-unit: 0.5rem; /* 8px */
  --space-1: calc(var(--space-unit) * 1); /* 8px */
  --space-2: calc(var(--space-unit) * 2); /* 16px */
  --space-3: calc(var(--space-unit) * 3); /* 24px */
  --space-4: calc(var(--space-unit) * 4); /* 32px */
  --space-6: calc(var(--space-unit) * 6); /* 48px */
  --space-8: calc(var(--space-unit) * 8); /* 64px */

  /* === Color Contrast (WCAG AA) === */

  /* Light Mode */
  --text-primary: #1a202c; /* 15.6:1 on white */
  --text-secondary: #4a5568; /* 7.0:1 on white */
  --text-tertiary: #718096; /* 4.6:1 on white */
  --bg-primary: #fff;
  --bg-secondary: #f7fafc;

  /* Links */
  --link-color: #2563eb; /* 5.9:1 on white */
  --link-hover: #1d4ed8; /* 7.4:1 on white */
  --link-visited: #7c3aed;

  /* Code */
  --code-bg: #1e293b;
  --code-text: #e2e8f0; /* 12.6:1 on code-bg */
  --code-bg-inline: rgb(0 0 0 / 0.05);
  --code-inline-color: #c52a2d; /* Changed from #d73a49 for WCAG AA contrast (4.7:1) on #f2f2f2 */

  /* Focus indicators */
  --focus-ring-color: var(--link-color);
  --focus-ring-offset: 2px;
  --focus-ring-width: 3px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f7fafc; /* 13.5:1 on #1a202c */
    --text-secondary: #e2e8f0; /* 11.2:1 */
    --text-tertiary: #cbd5e0; /* 8.1:1 */
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --link-color: #60a5fa; /* 7.5:1 on #1a202c */
    --link-hover: #93c5fd; /* 10.1:1 */
    --code-bg-inline: rgb(255 255 255 / 0.1);
    --code-inline-color: #f9826c;
  }
}

/* ============================================
   Base Typography
   ============================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6; /* WCAG 1.4.12 minimum: 1.5 */
  color: var(--text-primary);

  /* OpenType Features */
  font-variant-ligatures: common-ligatures contextual;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;

  /* Smooth text rendering
     Note: Vendor prefixes required for font-smoothing as it's not standardized.
     These properties significantly improve text rendering quality on macOS/iOS
     and have no standard equivalent. Autoprefixer doesn't handle font-smoothing
     as it's a non-standard property. */
  /* stylelint-disable-next-line value-no-vendor-prefix */
  -webkit-font-smoothing: antialiased;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

/* ============================================
   Headings
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25; /* Tighter for headings */
  letter-spacing: -0.02em; /* Tighter tracking for large text */
  color: var(--text-primary);
  margin-block: 1.5em 0.5em;
}

h1 {
  font-size: var(--text-4xl);
  margin-block-start: 0; /* No top margin for first heading */
}

h2 {
  font-size: var(--text-3xl);
  margin-block: var(--space-6) var(--space-3); /* 48px before h2 */ /* 24px after h2 */
}

h3 {
  font-size: var(--text-2xl);
  margin-block: var(--space-4) var(--space-2); /* 32px before h3 */ /* 16px after h3 */
}

h4 {
  font-size: var(--text-lg);
  margin-block-start: var(--space-3);
}

h5 {
  font-size: var(--text-base);
  margin-block-start: var(--space-3);
}

h6 {
  font-size: var(--text-sm);
  margin-block-start: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Remove top margin for first heading in containers */
:is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

/* ============================================
   Paragraphs & Text Blocks
   ============================================ */

p {
  margin-block: var(--space-3); /* 24px between paragraphs */
  text-align: left; /* Never justify - harms readability */

  /* CSS Text Level 4 - Progressive enhancement
     Browser Support (2025): Chrome 117+, Safari/Firefox not yet
     Fallback: Layout works without it */
  text-wrap: pretty;

  /* Manual hyphenation with soft hyphens (­) for better control */
  hyphenate-limit-chars: 10 4 4; /* word-length before after */
  hyphens: manual;
}

p:first-of-type {
  margin-block-start: 0;
}

p:last-child {
  margin-block-end: 0;
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ============================================
   Line Length & Measure
   ============================================ */

article,
.chapter-content,
.content,
main article {
  /* Responsive max-width using clamp for smooth scaling
     Scales from ~90% on mobile to 65ch on desktop
     Research: 50-75 CPL optimal, 66 CPL sweet spot */
  max-width: clamp(30ch, 90%, 65ch);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);

  /* Performance optimization */
  contain: content;
}

/* ============================================
   Links
   ============================================ */

a {
  color: var(--link-color);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
  transition: color 150ms ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 0.12em;
}

a:visited {
  color: var(--link-visited);
}

/* External links indicator */
a[href^="http"]::after
{
  content: " ↗";
  font-size: 0.8em;
  vertical-align: super;
  opacity: 0.6;
}

/* ============================================
   Lists
   ============================================ */

ul,
ol {
  padding-inline-start: var(--space-4); /* 32px indent */
  margin-block: var(--space-3);
}

li {
  margin-block: 0.75em;
  padding-inline-start: 0.5em;
}

/* Custom markers using ::marker pseudo-element
   IMPORTANT: Test with screen readers to ensure markers don't interfere */
ul {
  list-style: none;
}

/* Ordered lists keep default numbers */
ol {
  list-style-type: decimal;
}

li > ul,
li > ol {
  margin-block: 0.5em; /* Nested lists */
}

ul li::marker {
  content: "▸ ";
  color: var(--text-secondary);
}

ul ul li::marker {
  content: "▹ ";
}

/* ============================================
   Code Typography
   ============================================ */

code,
pre {
  font-family: var(--font-mono);
  font-variant-numeric: slashed-zero tabular-nums;
  font-feature-settings: "calt" 1; /* Coding ligatures */
}

/* Inline Code */
code {
  font-size: 0.9em;
  padding: 0.2em 0.4em;
  background-color: var(--code-bg-inline);
  border-radius: 3px;
  color: var(--code-inline-color);
  font-weight: 400;
}

/* Code Blocks */
pre {
  font-size: 0.875rem;
  line-height: 1.7; /* 1.4-1.6 for code clarity */
  padding: 1.5rem;
  margin-block: var(--space-4); /* 32px spacing */
  overflow-x: auto;
  background-color: var(--code-bg);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: var(--code-text);
}

/* ============================================
   Accessibility Features
   ============================================ */

/* Focus Indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;

  /* stylelint-disable-next-line property-no-deprecated -- clip required for older browsers */
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bg-primary);
  color: var(--link-color);
  padding: 0.5rem 1rem;
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* Dyslexia-Friendly Mode (user-configurable)
   Enable with: document.body.classList.add('dyslexia-mode') */
body.dyslexia-mode,
.dyslexia-friendly {
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.8;
  text-align: left;
  max-width: 70ch;
}

/* ============================================
   Responsive Typography
   ============================================ */

/* NOTE: With clamp() for fluid typography, we rely on viewport-based
   scaling rather than fixed breakpoint changes. Media queries only
   adjust layout, not font-size directly. */

/* Mobile: 320px - 767px */
@media (width <= 767px) {
  article,
  .chapter-content,
  .content,
  main article {
    max-width: 100%;
    padding-inline: 1rem;
  }

  /* Headings can use fixed sizes for predictability */
  h1 {
    font-size: 2rem;
  }

  /* Tighter spacing on mobile */
  h2 {
    font-size: 1.5rem;
    margin-block: var(--space-4) var(--space-2);
  }

  h3 {
    font-size: 1.25rem;
  }

  p {
    margin-block: var(--space-2);
  }
}

/* Tablet: 768px - 1023px */
@media (width >= 768px) and (width <= 1023px) {
  article,
  .chapter-content,
  .content,
  main article {
    max-width: 70ch;
  }
}

/* Desktop: 1024px+ */
@media (width >= 1024px) {
  article,
  .chapter-content,
  .content,
  main article {
    max-width: 65ch;
  }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 20pt;
  }

  h3 {
    font-size: 16pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Show URLs for external links */
  a[href^="http"]::after
{
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  pre,
  code {
    border: 1px solid #999;
    break-inside: avoid;
  }
}