/**
 * PMA Shared Styles
 * Main stylesheet for all Power Tools
 * 
 * Architecture:
 * 1. tokens.css    - Design tokens (colors, spacing, radii, etc.)
 * 2. components.css - Component rules (header, sidebar, pills, badges)
 * 3. This file     - Utilities and overrides
 */

/* ============================================
   IMPORTS
   Order matters: tokens first, then components, then utilities
   ============================================ */

@import './tokens.css';
@import './components.css';
@import './utilities.css';

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  min-height: 100vh;
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

p {
  line-height: var(--leading-normal);
}

code {
  background: var(--color-neutral-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

ul, ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ul li, ol li {
  margin-bottom: var(--space-2);
}

ul li:last-child, ol li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

/* ============================================
   LAYOUT CONTAINERS
   Semantic layout wrappers for pages
   ============================================ */

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-10);
}

.container-lg {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-10);
}

.container-xl {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-10);
}

.main {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-10);
}

.section {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
}

/* ============================================
   SUBTITLE STYLE
   Common pattern for page subtitles
   ============================================ */

.subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-10);
}

/* ============================================
   APP ROOT
   Flex container for sticky footer layout
   ============================================ */

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}