/* Material Design Tokens */
:root {
  /* Primary Colors - Material Blue */
  --md-primary-50: #e3f2fd;
  --md-primary-100: #bbdefb;
  --md-primary-200: #90caf9;
  --md-primary-300: #64b5f6;
  --md-primary-400: #42a5f5;
  --md-primary-500: #2196f3;
  --md-primary-600: #1e88e5;
  --md-primary-700: #1976d2;
  --md-primary-800: #1565c0;
  --md-primary-900: #0d47a1;

  /* Secondary Colors - Material Deep Purple */
  --md-secondary-50: #ede7f6;
  --md-secondary-100: #d1c4e9;
  --md-secondary-200: #b39ddb;
  --md-secondary-300: #9575cd;
  --md-secondary-400: #7e57c2;
  --md-secondary-500: #673ab7;
  --md-secondary-600: #5e35b1;
  --md-secondary-700: #512da8;
  --md-secondary-800: #4527a0;
  --md-secondary-900: #311b92;

  /* Semantic Colors */
  --md-success-50: #e8f5e8;
  --md-success-500: #4caf50;
  --md-success-700: #388e3c;
  --md-warning-50: #fff3e0;
  --md-warning-500: #ff9800;
  --md-warning-700: #f57c00;
  --md-error-50: #ffebee;
  --md-error-500: #f44336;
  --md-error-700: #d32f2f;
  --md-info-50: #e0f7fa;
  --md-info-500: #00bcd4;
  --md-info-700: #0097a7;

  /* Background Colors - Dark Theme */
  --md-background-color: #121212;
  --md-surface-color: #1e1e1e;
  --md-surface-variant: #2d2d2d;

  /* Text Colors - Dark Theme */
  --md-text-primary: rgba(255, 255, 255, 0.87);
  --md-text-secondary: rgba(255, 255, 255, 0.60);
  --md-text-disabled: rgba(255, 255, 255, 0.38);

  /* Border Colors - Dark Theme */
  --md-border-light: rgba(255, 255, 255, 0.12);
  --md-border-medium: rgba(255, 255, 255, 0.24);
  --md-divider: rgba(255, 255, 255, 0.12);

  /* Font System */
  --md-font-family: Helvetica, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --md-font-family-mono: 'Courier New', Courier, Monaco, Consolas, monospace;

  /* Typography Scale */
  --md-display-large: 400 57px/64px var(--md-font-family);
  --md-display-medium: 400 45px/52px var(--md-font-family);
  --md-display-small: 400 36px/44px var(--md-font-family);
  --md-headline-large: 400 32px/40px var(--md-font-family);
  --md-headline-medium: 400 28px/36px var(--md-font-family);
  --md-headline-small: 400 24px/32px var(--md-font-family);
  --md-title-large: 500 22px/28px var(--md-font-family);
  --md-title-medium: 500 16px/24px var(--md-font-family);
  --md-title-small: 500 14px/20px var(--md-font-family);
  --md-body-large: 400 16px/24px var(--md-font-family);
  --md-body-medium: 400 14px/20px var(--md-font-family);
  --md-body-small: 400 12px/16px var(--md-font-family);
  --md-label-large: 500 14px/20px var(--md-font-family);
  --md-label-medium: 500 12px/16px var(--md-font-family);
  --md-label-small: 500 11px/16px var(--md-font-family);

  /* Elevation */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --md-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --md-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  --md-elevation-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

  /* Spacing */
  --md-space-1: 4px;
  --md-space-2: 8px;
  --md-space-3: 12px;
  --md-space-4: 16px;
  --md-space-5: 20px;
  --md-space-6: 24px;
  --md-space-8: 32px;
  --md-space-10: 40px;
  --md-space-12: 48px;
  --md-space-16: 64px;

  /* Shapes */
  --md-shape-none: 0;
  --md-shape-extra-small: 4px;
  --md-shape-small: 8px;
  --md-shape-medium: 12px;
  --md-shape-large: 16px;
  --md-shape-extra-large: 28px;

  /* Container */
  --md-container-padding: var(--md-space-6);
  --md-section-spacing: var(--md-space-16);
}

/* Reset and Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: var(--md-body-large);
  color: var(--md-text-primary);
  background-color: var(--md-background-color);
  line-height: 1.5;
}

/* Typography Classes */
.md-display-large { font: var(--md-display-large); }
.md-display-medium { font: var(--md-display-medium); }
.md-display-small { font: var(--md-display-small); }
.md-headline-large { font: var(--md-headline-large); }
.md-headline-medium { font: var(--md-headline-medium); }
.md-headline-small { font: var(--md-headline-small); }
.md-title-large { font: var(--md-title-large); }
.md-title-medium { font: var(--md-title-medium); }
.md-title-small { font: var(--md-title-small); }
.md-body-large { font: var(--md-body-large); }
.md-body-medium { font: var(--md-body-medium); }
.md-body-small { font: var(--md-body-small); }
.md-label-large { font: var(--md-label-large); }
.md-label-medium { font: var(--md-label-medium); }
.md-label-small { font: var(--md-label-small); }

/* Material Design Navigation */
.md-navigation {
  background-color: var(--md-surface-color);
  box-shadow: var(--md-elevation-1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.md-navigation__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--md-container-padding);
  min-height: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.md-navigation__brand {
  font: var(--md-title-large);
  color: var(--md-text-primary);
  text-decoration: none;
}

.md-navigation__menu {
  display: flex;
  list-style: none;
  gap: var(--md-space-2);
  margin: 0;
  padding: 0;
}

.md-navigation__link {
  display: flex;
  align-items: center;
  padding: var(--md-space-3) var(--md-space-4);
  border-radius: var(--md-shape-extra-large);
  color: var(--md-text-primary);
  text-decoration: none;
  font: var(--md-label-large);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-navigation__link:hover,
.md-navigation__link--active {
  background-color: var(--md-primary-50);
  color: var(--md-primary-700);
}

/* Material Design Container */
.md-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--md-container-padding);
}

/* Material Design Grid */
.md-grid {
  display: grid;
  gap: var(--md-space-6);
}

.md-grid--cols-1 { grid-template-columns: 1fr; }
.md-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.md-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.md-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 899px) {
  .md-grid--cols-3,
  .md-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .md-grid--cols-2,
  .md-grid--cols-3,
  .md-grid--cols-4 { grid-template-columns: 1fr; }
}

/* Material Design Cards */
.md-card {
  background-color: var(--md-surface-color);
  border-radius: var(--md-shape-medium);
  box-shadow: var(--md-elevation-1);
  overflow: hidden;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-card:hover {
  box-shadow: var(--md-elevation-2);
}

.md-card__header {
  padding: var(--md-space-6);
  border-bottom: 1px solid var(--md-divider);
}

.md-card__content {
  padding: var(--md-space-6);
}

.md-card__actions {
  padding: var(--md-space-4) var(--md-space-6);
  display: flex;
  gap: var(--md-space-2);
  justify-content: flex-end;
}

.md-card__title {
  font: var(--md-title-large);
  color: var(--md-text-primary);
  margin: 0 0 var(--md-space-2) 0;
}

.md-card__subtitle {
  font: var(--md-body-medium);
  color: var(--md-text-secondary);
  margin: 0;
}

/* Material Design Buttons */
.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--md-space-6);
  border: none;
  border-radius: var(--md-shape-extra-large);
  font: var(--md-label-large);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.md-button--filled {
  background-color: var(--md-primary-500);
  color: white;
  box-shadow: var(--md-elevation-1);
}

.md-button--filled:hover {
  background-color: var(--md-primary-600);
  box-shadow: var(--md-elevation-2);
}

.md-button--outlined {
  background-color: transparent;
  color: var(--md-primary-500);
  border: 1px solid var(--md-border-medium);
}

.md-button--outlined:hover {
  background-color: var(--md-primary-50);
  border-color: var(--md-primary-500);
}

.md-button--text {
  background-color: transparent;
  color: var(--md-primary-500);
  box-shadow: none;
}

.md-button--text:hover {
  background-color: var(--md-primary-50);
}

/* Header Hero Section - Dark Theme */
.md-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: var(--md-space-16) 0;
  text-align: center;
}

.md-hero h1 {
  font: var(--md-display-medium);
  color: var(--md-text-primary);
  margin-bottom: var(--md-space-4);
}

.md-hero p {
  font: var(--md-title-medium);
  color: var(--md-text-secondary);
  margin-bottom: var(--md-space-8);
}

/* Status Badges */
.md-status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--md-space-2) var(--md-space-4);
  border-radius: var(--md-shape-extra-large);
  font: var(--md-label-medium);
  font-weight: 500;
}

.md-status-badge--success {
  background-color: var(--md-success-50);
  color: var(--md-success-700);
}

.md-status-badge--info {
  background-color: var(--md-info-50);
  color: var(--md-info-700);
}

.md-status-badge--warning {
  background-color: var(--md-warning-50);
  color: var(--md-warning-700);
}

.md-status-badge--error {
  background-color: var(--md-error-50);
  color: var(--md-error-700);
}

/* Table */
.md-data-table {
  width: 100%;
  background-color: var(--md-surface-color);
  border-radius: var(--md-shape-medium);
  box-shadow: var(--md-elevation-1);
  overflow: hidden;
}

.md-data-table__table {
  width: 100%;
  border-collapse: collapse;
}

.md-data-table__header {
  background-color: var(--md-surface-variant);
}

.md-data-table__header-cell {
  padding: var(--md-space-4) var(--md-space-6);
  text-align: left;
  font: var(--md-label-large);
  color: var(--md-text-primary);
  border-bottom: 1px solid var(--md-divider);
}

.md-data-table__cell {
  padding: var(--md-space-4) var(--md-space-6);
  font: var(--md-body-medium);
  color: var(--md-text-primary);
  border-bottom: 1px solid var(--md-divider);
}

.md-data-table__row:hover {
  background-color: var(--md-surface-variant);
}

/* API Documentation Specific */
.md-endpoint-card {
  margin-bottom: var(--md-space-6);
}

.md-method-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--md-space-1) var(--md-space-3);
  border-radius: var(--md-shape-extra-large);
  font: var(--md-label-small);
  font-weight: 600;
  margin-right: var(--md-space-4);
}

.md-method-badge--get {
  background-color: var(--md-success-50);
  color: var(--md-success-700);
}

.md-method-badge--post {
  background-color: var(--md-primary-50);
  color: var(--md-primary-700);
}

.md-method-badge--put {
  background-color: var(--md-warning-50);
  color: var(--md-warning-700);
}

.md-method-badge--delete {
  background-color: var(--md-error-50);
  color: var(--md-error-700);
}

.md-endpoint-url {
  font-family: var(--md-font-family-mono);
  background-color: var(--md-surface-variant);
  padding: var(--md-space-2) var(--md-space-4);
  border-radius: var(--md-shape-small);
  display: inline-block;
  margin: var(--md-space-2) 0;
  font-size: 14px;
}

.md-json-preview {
  background-color: #1e293b;
  color: #94a3b8;
  padding: var(--md-space-4);
  border-radius: var(--md-shape-small);
  font-family: var(--md-font-family-mono);
  font-size: 14px;
  overflow-x: auto;
  margin: var(--md-space-4) 0;
}

/* Utility Classes */
.text-center { text-align: center; }
.mb-6 { margin-bottom: var(--md-space-6); }
.mb-8 { margin-bottom: var(--md-space-8); }
.mb-16 { margin-bottom: var(--md-space-16); }
.mt-4 { margin-top: var(--md-space-4); }
.mt-8 { margin-top: var(--md-space-8); }

/* Footer */
.md-footer {
  background-color: var(--md-surface-color);
  border-top: 1px solid var(--md-divider);
  padding: var(--md-space-8) 0;
  margin-top: var(--md-space-16);
  text-align: center;
}

.md-footer p {
  font: var(--md-body-medium);
  color: var(--md-text-secondary);
  margin-bottom: var(--md-space-2);
}

.md-footer a {
  color: var(--md-primary-500);
  text-decoration: none;
}

.md-footer a:hover {
  text-decoration: underline;
}