/* ============================================================================
   TYPOGRAPHY SYSTEM - UNIFIED HEADING & TEXT STYLES
   ============================================================================
   
   Purpose:
   - Define consistent heading hierarchy (h1-h6)
   - Define semantic text classes (.page-title, .section-header, etc.)
   - Use design tokens from design-tokens.css
   - Apply glass-morphism design system
   - Maintain ITTF professional look
   
   Created: December 31, 2025
   Last Updated: December 31, 2025
   ============================================================================ */

/* ============================================================================
   IMPORT DESIGN TOKENS
   ============================================================================ */

/* Design tokens are imported in base.html BEFORE this file */
/* Use: var(--color-*), var(--font-*), var(--spacing-*), etc. */

/* ============================================================================
   ROOT TYPOGRAPHY DEFAULTS
   ============================================================================ */

:root {
  /* Font Stack - Tight, performant */
  --font-family-base: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;

  /* Base Font Size (16px) */
  --font-size-base: 1rem;

  /* Heading Scale (tight) */
  --font-size-h1: 1.75rem; /* 28px */
  --font-size-h2: 1.5rem; /* 24px */
  --font-size-h3: 1.25rem; /* 20px */
  --font-size-h4: 1.125rem; /* 18px */
  --font-size-h5: 1rem; /* 16px */
  --font-size-h6: 0.875rem; /* 14px */

  /* Line Heights (aligned to blueprint) */
  --line-height-tight: 1.2;
  --line-height-normal: 1.38;
  --line-height-relaxed: 1.6;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Letter Spacing */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0.01em;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.04em;
  --letter-spacing-widest: 0.08em;

  /* Text Colors (light theme) */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-inverse: var(--color-text-inverse);

  /* Heading Colors */
  --text-heading: var(--color-text-primary);
  --text-heading-secondary: #163832;
  --text-heading-tertiary: var(--color-text-secondary);
}

/* ============================================================================
   H1 - PAGE TITLE
   ============================================================================
   
   Usage: <h1>Tournament Dashboard</h1>
   
   Characteristics:
   - Largest heading size
   - Neon cyan color (glass-morphism style)
   - Heavy weight (bold)
   - Used only for main page title
   - Usually appears once per page
   
   ============================================================================ */

h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: var(--line-height-tight); /* 1.2 */
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-heading);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  word-break: break-word;
  word-wrap: break-word;
}

h1:first-child {
  margin-top: 0;
}

/* ============================================================================
   H2 - SECTION HEADER
   ============================================================================
   
   Usage: <h2>Active Tournaments</h2>
   
   Characteristics:
   - Second largest heading size
   - Neon cyan color (matches h1 for hierarchy)
   - Semi-bold weight
   - Introduces major content sections
   - Multiple per page OK
   
   ============================================================================ */

h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-heading);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  padding-bottom: 0;
}

/* ============================================================================
   H3 - SUBSECTION HEADER
   ============================================================================
   
   Usage: <h3>Recent Results</h3>
   
   Characteristics:
   - Medium heading size
   - Gold color (accent color from design system)
   - Normal weight
   - Introduces subsections
   
   ============================================================================ */

h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-heading-secondary);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

/* ============================================================================
   H4 - COMPONENT HEADER
   ============================================================================
   
   Usage: <h4>Player Statistics</h4>
   
   Characteristics:
   - Small-medium heading size
   - White text color
   - Semi-bold weight
   - Used within cards/sections
   
   ============================================================================ */

h4 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-heading-secondary);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

/* ============================================================================
   H5 - SMALL HEADER
   ============================================================================
   
   Usage: <h5>Match Details</h5>
   
   Characteristics:
   - Small heading size
   - White text
   - Semi-bold weight
   - Used for minor sections
   
   ============================================================================ */

h5 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-heading-tertiary);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

/* ============================================================================
   H6 - TINY HEADER / LABEL
   ============================================================================
   
   Usage: <h6>TOURNAMENT ID</h6>
   
   Characteristics:
   - Smallest heading size
   - White text
   - Bold weight
   - Often all-caps for labels
   
   ============================================================================ */

h6 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--text-heading-tertiary);
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
  text-transform: uppercase;
}

/* ============================================================================
   SEMANTIC TEXT CLASSES
   ============================================================================ */

/* PAGE TITLE - Same as h1 but as class */
.page-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
  margin-bottom: var(--spacing-md);
}

/* SECTION HEADER - Same as h2 but as class */
.section-header {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--text-heading);
  margin-bottom: var(--spacing-sm);
  padding-bottom: 0;
}

/* SUBHEADER - Alternative section title */
.subheader {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading-secondary);
  margin-bottom: var(--spacing-xs);
}

/* COMPONENT TITLE - For card headers */
.component-title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading);
  margin-bottom: var(--spacing-xs);
}

/* SMALL TITLE - For minor sections */
.small-title {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading-secondary);
}

/* LABEL - For data labels */
.label {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

/* ============================================================================
   BODY TEXT STYLES
   ============================================================================ */

p {
  font-size: var(--font-size-base); /* 1rem / 16px */
  font-weight: var(--font-weight-normal); /* 400 */
  line-height: var(--line-height-normal); /* 1.5 */
  color: var(--text-primary);
  margin-bottom: var(--spacing-md); /* 1.5rem */
  word-break: break-word;
  word-wrap: break-word;
}

p:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   EMPHASIS & STRONG TEXT
   ============================================================================ */

strong,
b {
  font-weight: var(--font-weight-bold); /* 700 */
  color: var(--text-primary);
}

em,
i {
  font-style: italic;
}

/* ============================================================================
   LISTS
   ============================================================================ */

ul,
ol {
  margin-bottom: var(--spacing-md); /* 1.5rem */
  padding-left: var(--spacing-lg); /* 2rem */
}

li {
  margin-bottom: var(--spacing-sm); /* 0.5rem */
  line-height: var(--line-height-normal); /* 1.5 */
}

/* ============================================================================
   LINKS
   ============================================================================ */

a {
  color: var(--color-primary-cyan);
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
  color: var(--color-accent-magenta);
  text-shadow: none;
}

a:active {
  color: var(--color-accent-blue);
}

/* ============================================================================
   CODE & MONOSPACE TEXT
   ============================================================================ */

code,
pre {
  font-family: var(--font-family-mono);
  font-size: 0.95rem;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  color: var(--text-primary);
}

code {
  padding: 2px 6px;
}

pre {
  padding: var(--spacing-md);
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
}

/* ============================================================================
   BLOCKQUOTE
   ============================================================================ */

blockquote {
  border-left: 4px solid var(--color-primary-cyan);
  padding-left: var(--spacing-md);
  margin-left: 0;
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
  background: #f8f8fb;
  font-style: italic;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Tablets & smaller screens */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 2rem; /* 32px */
    --font-size-h2: 1.6rem; /* 25.6px */
    --font-size-h3: 1.4rem; /* 22.4px */
    --font-size-h4: 1.2rem; /* 19.2px */
    --font-size-h5: 1.1rem; /* 17.6px */
    --font-size-h6: 1rem; /* 16px */
  }

  h1,
  h2 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  :root {
    --font-size-h1: 1.5rem; /* 24px */
    --font-size-h2: 1.3rem; /* 20.8px */
    --font-size-h3: 1.1rem; /* 17.6px */
    --font-size-h4: 1rem; /* 16px */
    --font-size-h5: 0.95rem; /* 15.2px */
    --font-size-h6: 0.9rem; /* 14.4px */
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
  }
}

/* ============================================================================
   DARK MODE (Already dark by default - Spinpro uses dark theme)
   ============================================================================ */

/* If light mode support is added in future, use: */
@media (prefers-color-scheme: light) {
  :root {
    --text-primary: rgba(10, 14, 39, 1);
    --text-secondary: rgba(10, 14, 39, 0.7);
    --text-muted: rgba(10, 14, 39, 0.5);
    --text-inverse: rgba(255, 255, 255, 1);
  }

  h1,
  h2 {
    color: var(--color-primary-navy);
  }

  h3 {
    color: var(--color-accent-gold);
  }

  h4,
  h5,
  h6 {
    color: var(--text-inverse);
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Ensure sufficient contrast for visual impairments */
@media (prefers-contrast: more) {
  h1,
  h2 {
    font-weight: var(--font-weight-extrabold); /* 800 */
    letter-spacing: var(--letter-spacing-wide);
  }

  body {
    line-height: var(--line-height-relaxed); /* 1.75 */
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* End of typography.css */