/* ============================================================
   DESIGN TOKENS — Trenggalek AQI (DESIGN.md v2)
   Light theme adaptation · System font · WCAG 2.2 AA
   ============================================================ */

:root {
  /* ── Typography (DESIGN.md) ── */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-size-base: 14px;
  --font-weight-base: 500;
  --line-height-base: 20px;

  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 36px;
  --font-size-3xl: 37.74px;
  --font-size-4xl: 40px;

  /* ── Colors (DESIGN.md adapted for light theme) ── */
  --color-text-primary: #101828;
  --color-text-secondary: #4B5563;
  --color-text-tertiary: #9CA3AF;
  --color-text-inverse: #FFFFFF;

  --color-surface-base: #FFFFFF;
  --color-surface-muted: #F9FAFB;
  --color-surface-raised: #F3F4F6;
  --color-surface-strong: #E5E7EB;

  --color-brand-primary: #0284C7;
  --color-brand-secondary: #06B6D4;
  --color-brand-accent: #F59E0B;
  --color-brand-danger: #EF4444;
  --color-brand-success: #10B981;

  /* ── Spacing (defined manually) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ── Radius (defined manually) ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Motion (defined manually) ── */
  --motion-instant: 150ms;
  --motion-normal: 200ms;
  --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Shadows ── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.12);

  /* ── Focus ring (WCAG 2.2 AA) ── */
  --focus-ring-color: rgba(2, 132, 199, 0.5);
  --focus-ring-width: 2px;
}

/* ── Global resets ── */
body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Focus-visible (WCAG 2.2 AA) — interactive only ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

/* Card */
.card {
  background: var(--color-surface-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition: box-shadow var(--motion-instant) var(--motion-easing);
}
.card:hover {
  box-shadow: var(--shadow-elevated);
}

/* Card flush (no padding) */
.card--flush {
  padding: 0;
}

/* Section spacing */
.section {
  padding-top: calc(var(--space-8) * 1.25);
  padding-bottom: calc(var(--space-8) * 1.25);
}

/* Section header */
.section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.section-header h2,
.section-header h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.section-header p {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Button base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all var(--motion-instant) var(--motion-easing);
  text-decoration: none;
  border: none;
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button variants */
.btn-primary {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}
.btn-primary:active {
  filter: brightness(0.95);
  transform: translateY(0);
}

.btn-secondary {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}
.btn-secondary:hover {
  background: var(--color-surface-strong);
}
.btn-secondary:active {
  background: var(--color-surface-raised);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover {
  background: var(--color-surface-raised);
}
.btn-ghost:active {
  background: var(--color-surface-muted);
}

.btn-outline {
  background: transparent;
  color: var(--color-brand-primary);
  border: 1.5px solid var(--color-brand-primary);
}
.btn-outline:hover {
  background: rgba(2, 132, 199, 0.06);
}
.btn-outline:active {
  background: rgba(2, 132, 199, 0.1);
}

/* Nav link */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--motion-instant) var(--motion-easing);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
  border-radius: 2px;
  transition: transform var(--motion-instant) var(--motion-easing);
}
.nav-link:hover {
  background: rgba(2, 132, 199, 0.04);
  color: var(--color-brand-primary);
}
.nav-link:hover::after {
  transform: translateX(-50%) scaleX(0.7);
}
.nav-link.active {
  background: rgba(2, 132, 199, 0.08);
  color: var(--color-brand-primary);
  font-weight: 600;
}
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Table */
.table {
  width: 100%;
  font-size: var(--font-size-xs);
  border-collapse: collapse;
}
.table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-surface-strong);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-surface-muted);
  color: var(--color-text-secondary);
}
.table tr:hover td {
  background: var(--color-surface-muted);
}
.table tr:last-child td {
  border-bottom: none;
}

/* Glass card (for dark/hero sections) */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}