:root {
  --color-bg: #121212;
  --color-surface: #121212;
  --color-nav: #212121;
  --color-primary: #00bcd4;
  --color-error: #ef5350;
  --color-success: #66bb6a;
  --color-warning: #ffca28;
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-disabled: rgba(255, 255, 255, 0.38);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-overlay-06: rgba(255, 255, 255, 0.06);
  --color-severity-high: #ff7043;
  --color-badge-success-bg: rgba(102, 187, 106, 0.16);
  --color-badge-warning-bg: rgba(255, 202, 40, 0.16);
  --color-badge-error-bg: rgba(239, 83, 80, 0.16);
  --color-badge-primary-bg: rgba(0, 188, 212, 0.16);
  --color-alert-warning-bg: rgba(255, 202, 40, 0.08);
  --color-alert-warning-border: rgba(255, 202, 40, 0.24);
  --color-ai-banner-bg: rgba(255, 202, 40, 0.06);
  --radius: 4px;
  --navbar-height: 70px;
  --content-max-width: 1280px;
  --content-max-width-detail: 960px;
}

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

body {
  font-family: 'Noto Sans', sans-serif;
  background: var(--color-bg);
  color: var(--color-text-primary);
  min-height: 100vh;
  line-height: 1.5;
}

/* Convention card hover transition */
.convention-card {
  transition: border-color 150ms ease-in;
}

.convention-card:hover {
  border-color: var(--color-primary) !important;
}

/* Tab active indicator */
.tab-active {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}

/* Table styles */
.doc-table {
  width: 100%;
  border-collapse: collapse;
}

.doc-table th {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-secondary);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.doc-table td {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-primary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.doc-table tr:last-child td {
  border-bottom: none;
}

/* Bar chart */
.bar-track {
  height: 8px;
  background: var(--color-overlay-06);
  border-radius: var(--radius);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius);
}

/* Severity chips */
.severity-critical { background: var(--color-error); color: #000; }
.severity-high { background: var(--color-severity-high); color: #000; }
.severity-medium { background: var(--color-warning); color: #000; }
.severity-low { background: var(--color-border); color: var(--color-text-secondary); }

/* Health chips */
.chip-on-track { background: var(--color-success); color: #000; }
.chip-needs-attention { background: var(--color-warning); color: #000; }
.chip-at-risk { background: var(--color-error); color: #000; }
.chip-early { background: var(--color-border); color: var(--color-text-secondary); }

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}