/* ============================================================
   CHINA COMPASS — Design System Tokens
   Themes · Typography · Spacing · Colors
   ============================================================ */

/* ---------- Light Theme (default) ---------- */
:root,
[data-theme="light"] {
  /* Surface */
  --bg-primary:    #FAFAF8;
  --bg-secondary:  #F2F1ED;
  --bg-tertiary:   #E8E7E3;
  --bg-card:       #FFFFFF;
  --bg-code:       #F5F5F0;

  /* Text */
  --text-primary:   #1A1A1A;
  --text-secondary: #4A4A4A;
  --text-muted:     #767676;
  --text-inverse:   #FAFAF8;

  /* Accent */
  --accent:         #B8860B;
  --accent-hover:   #9A7209;
  --accent-light:   #F5ECD7;
  --accent-text:    #7A5A07;

  /* Borders */
  --border-light:   #E0DFD9;
  --border-medium:  #C8C7C1;
  --border-strong:  #9A9990;

  /* Severity / Signal Colors */
  --severity-critical: #C41E3A;
  --severity-high:     #D4652F;
  --severity-elevated: #CC9C2A;
  --severity-moderate: #4A90D9;
  --severity-low:      #5B9A6E;

  /* Category Colors */
  --cat-diplomatic:    #4A6FA5;
  --cat-trade:         #B8860B;
  --cat-military:      #8B4049;
  --cat-technology:    #5B7B7A;
  --cat-political:     #7A5FA5;
  --cat-economic:      #3A7A5B;
  --cat-social:        #9A6B3A;
  --cat-legal:         #5A6B7A;

  /* Market colors */
  --market-up:     #2D8B4E;
  --market-down:   #C41E3A;
  --market-flat:   #767676;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:   0 4px 16px rgba(0,0,0,0.10);

  /* Nav */
  --nav-bg:      #FFFFFF;
  --nav-border:  #E0DFD9;
  --nav-text:    #1A1A1A;

  /* Focus */
  --focus-ring:  #B8860B;

  /* Misc */
  --code-bg:     #F5F5F0;
  --callout-bg:  #FFF8E7;
  --callout-border: #E8D59A;
  --disruption-bg: #FFF0F0;
  --disruption-border: #E8A0A0;
  --disruption-text: #8B2020;
}

/* ---------- Dark Theme ---------- */
[data-theme="dark"] {
  --bg-primary:    #121212;
  --bg-secondary:  #1E1E1E;
  --bg-tertiary:   #2A2A2A;
  --bg-card:       #1E1E1E;
  --bg-code:       #2A2A2A;

  --text-primary:   #E8E6E0;
  --text-secondary: #B0AEA6;
  --text-muted:     #808078;
  --text-inverse:   #121212;

  --accent:         #D4A017;
  --accent-hover:   #E8B820;
  --accent-light:   #2A2510;
  --accent-text:    #E8C860;

  --border-light:   #2A2A28;
  --border-medium:  #3A3A38;
  --border-strong:  #5A5A58;

  --severity-critical: #E84860;
  --severity-high:     #E88050;
  --severity-elevated: #E8C040;
  --severity-moderate: #60A0E8;
  --severity-low:      #70B880;

  --cat-diplomatic:    #6090C8;
  --cat-trade:         #D4A017;
  --cat-military:      #B06070;
  --cat-technology:    #78A0A0;
  --cat-political:     #9880C8;
  --cat-economic:      #50A078;
  --cat-social:        #C08850;
  --cat-legal:         #7890A8;

  --market-up:     #40B868;
  --market-down:   #E85060;
  --market-flat:   #808078;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.30);
  --shadow-lg:   0 4px 16px rgba(0,0,0,0.40);

  --nav-bg:      #1A1A1A;
  --nav-border:  #2A2A28;
  --nav-text:    #E8E6E0;

  --focus-ring:  #D4A017;

  --code-bg:     #2A2A2A;
  --callout-bg:  #2A2510;
  --callout-border: #5A4A20;
  --disruption-bg: #2A1515;
  --disruption-border: #5A2020;
  --disruption-text: #E8A0A0;
}

/* ---------- Typography ---------- */
:root {
  /* System font stack — zero web font loading */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;

  /* Scale (major-third 1.25) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Font weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing scale */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

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

  /* Container widths */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

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

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
h3 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
h4 { font-size: var(--text-xl);  margin-bottom: var(--space-3); }
h5 { font-size: var(--text-lg);  margin-bottom: var(--space-2); }
h6 { font-size: var(--text-base); margin-bottom: var(--space-2); }

/* ---------- Body text ---------- */
p {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

strong { font-weight: var(--weight-semibold); }
small  { font-size: var(--text-sm); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--code-bg);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

/* ---------- Lists ---------- */
ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

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

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.text-muted   { color: var(--text-muted); }
.text-accent  { color: var(--accent); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }
.text-lg      { font-size: var(--text-lg); }
.text-2xl     { font-size: var(--text-2xl); }
.font-medium  { font-weight: var(--weight-medium); }
.font-bold    { font-weight: var(--weight-bold); }

.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

img {
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--accent-light);
  color: var(--text-primary);
}