/* ================================================================
   MWPR DESIGN SYSTEM v2.0 — "The Observatory"
   基于：Müller-Brockmann 网格 / Bringhurst 字体 / Itten 色彩 / Tufte 数据可视化
   ================================================================ */

/* === 1. DESIGN TOKENS === */

:root {
  /* --- Color: Itten 七色对比 + Albers 关系色彩 --- */
  /* Primary — 深空蓝：权威、深度、技术 */
  --ds-blue-950: #0a0e27;
  --ds-blue-900: #1a1a2e;
  --ds-blue-800: #16213e;
  --ds-blue-700: #0f3460;
  --ds-blue-600: #1a4a8a;
  --ds-blue-500: #2d6cc0;
  --ds-blue-400: #4a90e2;
  --ds-blue-300: #7ab4f5;
  --ds-blue-200: #a8d4ff;
  --ds-blue-100: #d6ebff;

  /* Secondary — 暖铜：与冷蓝形成补色对比 (Itten contrast of hue) */
  --ds-copper-700: #8b6914;
  --ds-copper-600: #a67c1e;
  --ds-copper-500: #c9a96e;
  --ds-copper-400: #d4bc8a;
  --ds-copper-300: #e0d0a8;
  --ds-copper-200: #ede4c8;
  --ds-copper-100: #f7f2e4;

  /* Accent — 翠绿：技术生命力 */
  --ds-green-600: #1a7a3a;
  --ds-green-500: #2ecc71;
  --ds-green-400: #55d98d;

  /* Semantic */
  --ds-red-600: #c0392b;
  --ds-red-500: #e74c3c;
  --ds-red-400: #f07060;
  --ds-amber-500: #f39c12;
  --ds-amber-400: #f7b731;

  /* Neutral — 纸质感 */
  --ds-white: #fdfdfc;
  --ds-gray-50: #fafaf9;
  --ds-gray-100: #f5f4f1;
  --ds-gray-200: #e8e6e1;
  --ds-gray-300: #d4d1ca;
  --ds-gray-400: #b0ada4;
  --ds-gray-500: #8b887e;
  --ds-gray-600: #6b685f;
  --ds-gray-700: #4a4740;
  --ds-gray-800: #2d2b26;
  --ds-gray-900: #1a1917;

  /* --- Typography: Bringhurst 比例尺 --- */
  --ds-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ds-font-serif: "Noto Serif SC", "Source Han Serif SC", "STSong", Georgia, "Times New Roman", serif;
  --ds-font-mono: "SF Mono", "Fira Code", "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  /* Bringhurst modular scale: 12-14-16-18-21-24-32-40-48-60 */
  --ds-text-xs: 0.75rem;    /* 12px */
  --ds-text-sm: 0.875rem;   /* 14px */
  --ds-text-base: 1rem;     /* 16px */
  --ds-text-md: 1.125rem;   /* 18px */
  --ds-text-lg: 1.3125rem;  /* 21px */
  --ds-text-xl: 1.5rem;     /* 24px */
  --ds-text-2xl: 2rem;      /* 32px */
  --ds-text-3xl: 2.5rem;    /* 40px */
  --ds-text-4xl: 3rem;      /* 48px */
  --ds-text-5xl: 3.75rem;   /* 60px */

  --ds-leading-tight: 1.25;
  --ds-leading-snug: 1.4;
  --ds-leading-normal: 1.6;
  --ds-leading-relaxed: 1.8;
  --ds-leading-loose: 2;

  --ds-font-weight-normal: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;

  /* --- Spacing: 4px 基准网格 (Müller-Brockmann) --- */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;  /* 4px */
  --ds-space-2: 0.5rem;   /* 8px */
  --ds-space-3: 0.75rem;  /* 12px */
  --ds-space-4: 1rem;     /* 16px */
  --ds-space-5: 1.25rem;  /* 20px */
  --ds-space-6: 1.5rem;   /* 24px */
  --ds-space-8: 2rem;     /* 32px */
  --ds-space-10: 2.5rem;  /* 40px */
  --ds-space-12: 3rem;    /* 48px */
  --ds-space-16: 4rem;    /* 64px */
  --ds-space-20: 5rem;    /* 80px */
  --ds-space-24: 6rem;    /* 96px */

  /* --- Border Radius --- */
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 9999px;

  /* --- Shadows (elevation) --- */
  --ds-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --ds-shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --ds-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* --- Transitions --- */
  --ds-transition-fast: 150ms ease;
  --ds-transition-normal: 250ms ease;
  --ds-transition-slow: 400ms ease;

  /* --- Layout --- */
  --ds-content-width: 1100px;
  --ds-content-narrow: 820px;
}


/* === 2. TYPOGRAPHY SYSTEM (Bringhurst) === */

.ds-h1 { font-family: var(--ds-font-sans); font-size: var(--ds-text-3xl); font-weight: var(--ds-font-weight-bold); line-height: var(--ds-leading-tight); letter-spacing: -0.02em; color: var(--ds-blue-900); margin: 0 0 var(--ds-space-6); }
.ds-h2 { font-family: var(--ds-font-sans); font-size: var(--ds-text-2xl); font-weight: var(--ds-font-weight-semibold); line-height: var(--ds-leading-snug); color: var(--ds-blue-900); margin: var(--ds-space-12) 0 var(--ds-space-4); padding-bottom: var(--ds-space-2); border-bottom: 2px solid var(--ds-blue-900); }
.ds-h3 { font-family: var(--ds-font-sans); font-size: var(--ds-text-xl); font-weight: var(--ds-font-weight-semibold); color: var(--ds-blue-800); margin: var(--ds-space-8) 0 var(--ds-space-3); }
.ds-h4 { font-family: var(--ds-font-sans); font-size: var(--ds-text-lg); font-weight: var(--ds-font-weight-medium); color: var(--ds-blue-700); margin: var(--ds-space-6) 0 var(--ds-space-2); }
.ds-body { font-family: var(--ds-font-serif); font-size: var(--ds-text-base); line-height: var(--ds-leading-relaxed); color: var(--ds-gray-800); }
.ds-body-lg { font-family: var(--ds-font-serif); font-size: var(--ds-text-md); line-height: var(--ds-leading-relaxed); color: var(--ds-gray-800); }
.ds-caption { font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); color: var(--ds-gray-500); }
.ds-label { font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); font-weight: var(--ds-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-gray-500); }
.ds-mono { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); }


/* === 3. GRID SYSTEM (Müller-Brockmann 12-column) === */

.ds-grid { display: grid; gap: var(--ds-space-6); }
.ds-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

@media (max-width: 768px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
  .ds-grid-auto { grid-template-columns: 1fr; }
}


/* === 4. LAYOUT COMPONENTS === */

.ds-container { max-width: var(--ds-content-width); margin: 0 auto; padding: var(--ds-space-8) var(--ds-space-6); }
.ds-container-narrow { max-width: var(--ds-content-narrow); margin: 0 auto; padding: var(--ds-space-8) var(--ds-space-6); }

.ds-section { padding: var(--ds-space-16) 0; }
.ds-section-sm { padding: var(--ds-space-8) 0; }

.ds-hero { background: linear-gradient(135deg, var(--ds-blue-950) 0%, var(--ds-blue-800) 50%, var(--ds-blue-700) 100%); color: var(--ds-white); padding: var(--ds-space-24) var(--ds-space-6); text-align: center; }
.ds-hero h1 { color: var(--ds-white); font-size: var(--ds-text-4xl); }
.ds-hero p { color: rgba(255,255,255,0.8); font-size: var(--ds-text-md); max-width: 640px; margin: var(--ds-space-4) auto 0; line-height: var(--ds-leading-relaxed); }


/* === 5. CARD SYSTEM === */

.ds-card { background: var(--ds-white); border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-lg); padding: var(--ds-space-6); transition: all var(--ds-transition-normal); }
.ds-card:hover { border-color: var(--ds-blue-400); box-shadow: var(--ds-shadow-md); transform: translateY(-2px); }
.ds-card-interactive { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.ds-card-header { margin-bottom: var(--ds-space-4); }
.ds-card-title { font-family: var(--ds-font-sans); font-size: var(--ds-text-md); font-weight: var(--ds-font-weight-semibold); color: var(--ds-blue-900); margin: 0 0 var(--ds-space-1); }
.ds-card-subtitle { font-size: var(--ds-text-sm); color: var(--ds-gray-500); }

.ds-card-accent { border-left: 4px solid var(--ds-blue-900); }
.ds-card-highlight { background: var(--ds-copper-100); border-color: var(--ds-copper-300); }
.ds-card-warn { border-left: 4px solid var(--ds-amber-500); background: var(--ds-gray-50); }


/* === 6. BADGE SYSTEM === */

.ds-badge { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: var(--ds-space-1) var(--ds-space-3); font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); font-weight: var(--ds-font-weight-medium); border-radius: var(--ds-radius-full); white-space: nowrap; }
.ds-badge-blue { background: var(--ds-blue-100); color: var(--ds-blue-700); }
.ds-badge-copper { background: var(--ds-copper-100); color: var(--ds-copper-700); }
.ds-badge-green { background: #e6f7ee; color: var(--ds-green-600); }
.ds-badge-red { background: #fde8e8; color: var(--ds-red-600); }
.ds-badge-amber { background: #fef3cd; color: #856404; }
.ds-badge-gray { background: var(--ds-gray-100); color: var(--ds-gray-600); }


/* === 7. DATA TABLE (Tufte — maximize data-ink ratio) === */

.ds-table { width: 100%; border-collapse: collapse; font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); }
.ds-table thead { background: var(--ds-blue-900); color: var(--ds-white); }
.ds-table th { padding: var(--ds-space-3) var(--ds-space-4); text-align: left; font-weight: var(--ds-font-weight-semibold); font-size: var(--ds-text-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.ds-table td { padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-gray-200); color: var(--ds-gray-800); }
.ds-table tbody tr:nth-child(even) td { background: var(--ds-gray-50); }
.ds-table tbody tr:hover td { background: var(--ds-blue-100); }
.ds-table--compact th, .ds-table--compact td { padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-xs); }


/* === 8. CALLOUT / BLOCKQUOTE (Tufte sidenote style) === */

.ds-callout { border-left: 4px solid var(--ds-blue-900); padding: var(--ds-space-4) var(--ds-space-6); margin: var(--ds-space-6) 0; background: var(--ds-gray-50); border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0; font-family: var(--ds-font-serif); font-style: italic; color: var(--ds-gray-700); }
.ds-callout-title { font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); font-weight: var(--ds-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-gray-500); margin-bottom: var(--ds-space-2); font-style: normal; }
.ds-callout strong { color: var(--ds-blue-900); font-style: normal; }
.ds-key-insight { border-left-color: var(--ds-copper-500); background: var(--ds-copper-100); }


/* === 9. DIVIDER === */

.ds-divider { border: none; border-top: 1px solid var(--ds-gray-200); margin: var(--ds-space-12) 0; }
.ds-divider-thick { border-top: 3px double var(--ds-blue-900); }
.ds-divider-dotted { border-top: 1px dotted var(--ds-gray-400); }


/* === 10. BUTTON === */

.ds-btn { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-5); font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-font-weight-medium); border-radius: var(--ds-radius-md); cursor: pointer; text-decoration: none; transition: all var(--ds-transition-fast); border: 1px solid var(--ds-gray-300); background: var(--ds-white); color: var(--ds-gray-800); }
.ds-btn:hover { border-color: var(--ds-blue-500); color: var(--ds-blue-900); }
.ds-btn-primary { background: var(--ds-blue-900); color: var(--ds-white); border-color: var(--ds-blue-900); }
.ds-btn-primary:hover { background: var(--ds-blue-800); }
.ds-btn-sm { padding: var(--ds-space-1) var(--ds-space-3); font-size: var(--ds-text-xs); }
.ds-btn-lg { padding: var(--ds-space-3) var(--ds-space-6); font-size: var(--ds-text-base); }


/* === 11. CHART CONTAINER === */

.ds-chart { margin: var(--ds-space-8) 0; padding: var(--ds-space-6); background: var(--ds-white); border: 1px solid var(--ds-gray-200); border-radius: var(--ds-radius-lg); overflow-x: auto; }
.ds-chart-title { font-family: var(--ds-font-sans); font-size: var(--ds-text-sm); font-weight: var(--ds-font-weight-semibold); color: var(--ds-gray-700); margin-bottom: var(--ds-space-4); }
.ds-chart-caption { font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); color: var(--ds-gray-500); margin-top: var(--ds-space-3); font-style: italic; }
.ds-chart svg { max-width: 100%; height: auto; }


/* === 12. STAT COUNTER === */

.ds-stat-group { display: flex; gap: var(--ds-space-8); flex-wrap: wrap; justify-content: center; margin: var(--ds-space-8) 0; }
.ds-stat { text-align: center; }
.ds-stat-value { font-family: var(--ds-font-sans); font-size: var(--ds-text-3xl); font-weight: var(--ds-font-weight-bold); color: var(--ds-blue-900); line-height: 1.2; }
.ds-stat-label { font-size: var(--ds-text-xs); color: var(--ds-gray-500); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--ds-space-1); }


/* === 13. METRIC ROW === */

.ds-metric-row { display: flex; gap: var(--ds-space-6); flex-wrap: wrap; }
.ds-metric { flex: 1; min-width: 120px; padding: var(--ds-space-4); background: var(--ds-gray-50); border-radius: var(--ds-radius-md); text-align: center; }
.ds-metric-value { font-size: var(--ds-text-xl); font-weight: var(--ds-font-weight-bold); color: var(--ds-blue-900); }
.ds-metric-label { font-size: var(--ds-text-xs); color: var(--ds-gray-500); margin-top: var(--ds-space-1); }
.ds-metric-trend-up { color: var(--ds-red-500); }
.ds-metric-trend-down { color: var(--ds-green-500); }


/* === 14. TIMELINE === */

.ds-timeline { position: relative; padding-left: var(--ds-space-8); margin: var(--ds-space-8) 0; }
.ds-timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--ds-gray-300); }
.ds-timeline-item { position: relative; margin-bottom: var(--ds-space-6); }
.ds-timeline-item::before { content: ''; position: absolute; left: calc(-1 * var(--ds-space-8) + 3px); top: var(--ds-space-2); width: 10px; height: 10px; border-radius: 50%; background: var(--ds-blue-900); border: 2px solid var(--ds-white); box-shadow: var(--ds-shadow-sm); }
.ds-timeline-date { font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); font-weight: var(--ds-font-weight-semibold); color: var(--ds-gray-500); text-transform: uppercase; letter-spacing: 0.06em; }
.ds-timeline-title { font-family: var(--ds-font-sans); font-size: var(--ds-text-base); font-weight: var(--ds-font-weight-semibold); color: var(--ds-blue-900); margin: var(--ds-space-1) 0; }
.ds-timeline-desc { font-size: var(--ds-text-sm); color: var(--ds-gray-600); line-height: var(--ds-leading-normal); }


/* === 15. RESPONSIVE === */

@media (max-width: 768px) {
  :root {
    --ds-text-3xl: 2rem;
    --ds-text-2xl: 1.5rem;
    --ds-text-xl: 1.25rem;
  }
  .ds-container, .ds-container-narrow { padding: var(--ds-space-6) var(--ds-space-4); }
  .ds-stat-group { gap: var(--ds-space-4); }
  .ds-stat-value { font-size: var(--ds-text-2xl); }
  .ds-metric-row { flex-direction: column; }
  .ds-table { font-size: var(--ds-text-xs); }
  .ds-table th, .ds-table td { padding: var(--ds-space-2); }
}


/* === 16. PRINT === */

@media print {
  :root { --ds-font-serif: "STSong", Georgia, serif; --ds-font-sans: "Helvetica Neue", Arial, sans-serif; }
  .ds-hero { background: none !important; color: #000 !important; padding: var(--ds-space-8) 0; }
  .ds-hero h1, .ds-hero p { color: #000 !important; }
  .ds-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .ds-btn, .navbar, footer { display: none !important; }
  .ds-chart { border: 1px solid #ccc; break-inside: avoid; }
}

/* === 17. UTILITY === */
.ds-text-center { text-align: center; }
.ds-text-right { text-align: right; }
.ds-mt-0 { margin-top: 0; }
.ds-mb-0 { margin-bottom: 0; }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-mb-6 { margin-bottom: var(--ds-space-6); }
.ds-mb-8 { margin-bottom: var(--ds-space-8); }
.ds-gap-4 { gap: var(--ds-space-4); }
.ds-gap-6 { gap: var(--ds-space-6); }