:root {
  --bg-primary:   #111124;
  --bg-card:      #1A1A35;
  --bg-card-dark: #0C0E1A;
  --accent-teal:  #00dfe8;
  --accent-cyan:  #00dfe8;
  --text-primary: #F0F2F5;
  --text-muted:   #8C94A0;
  --text-white:   #FFFFFF;

  --font-main: 'Montserrat', sans-serif;
  --font-label: 'Montserrat', sans-serif;

  --container-max: 1440px;
  --container-pad: 72px;
  --nav-height: 72px;

  --radius-card: 8px;
  --radius-btn:  6px;
  --radius-badge: 4px;

  --transition: 0.2s ease;

  /* Diagram / infographic tokens */
  --diagram-bg:          #0d1117;
  --diagram-card:        #161b22;
  --diagram-card-alt:    #181c28;
  --diagram-card-before: #13161f;
  --diagram-support:     #0b1117;
  --diagram-border:      rgba(255,255,255,0.08);
  --diagram-border-mid:  rgba(255,255,255,0.1);
  --diagram-border-dash: rgba(255,255,255,0.18);
  --diagram-border-sep:  rgba(255,255,255,0.07);
  --diagram-border-gap:  rgba(255,255,255,0.06);
  --diagram-text-title:  #ffffff;
  --diagram-text-label:  rgba(255,255,255,0.35);
  --diagram-text-dim:    rgba(255,255,255,0.3);
  --diagram-text-body:   rgba(255,255,255,0.4);
  --diagram-text-sub:    rgba(255,255,255,0.45);
  --diagram-text-mid:    rgba(255,255,255,0.6);
  --diagram-arrow:       rgba(255,255,255,0.25);
  --diagram-tech-label:  rgba(255,255,255,0.25);
  --diagram-accent-bg:   rgba(27,227,168,0.05);
  --diagram-accent-border: rgba(27,227,168,0.28);
}

[data-theme="light"] {
  --bg-primary:   #efefef;
  --bg-card:      #e3e3e3;
  --bg-card-dark: #d8d8d8;
  --text-primary: #4d4d4d;
  --text-muted:   #727577;

  /* Diagram / infographic tokens — light */
  --diagram-bg:          #f5f5f7;
  --diagram-card:        #e8e8ec;
  --diagram-card-alt:    #e2e2e6;
  --diagram-card-before: #ececf0;
  --diagram-support:     #f0f0f4;
  --diagram-border:      rgba(0,0,0,0.1);
  --diagram-border-mid:  rgba(0,0,0,0.12);
  --diagram-border-dash: rgba(0,0,0,0.2);
  --diagram-border-sep:  rgba(0,0,0,0.08);
  --diagram-border-gap:  rgba(0,0,0,0.06);
  --diagram-text-title:  #1a1a1a;
  --diagram-text-label:  rgba(0,0,0,0.45);
  --diagram-text-dim:    rgba(0,0,0,0.4);
  --diagram-text-body:   rgba(0,0,0,0.5);
  --diagram-text-sub:    rgba(0,0,0,0.4);
  --diagram-text-mid:    rgba(0,0,0,0.7);
  --diagram-arrow:       rgba(0,0,0,0.3);
  --diagram-tech-label:  rgba(0,0,0,0.35);
  --diagram-accent-bg:   rgba(0,191,174,0.08);
  --diagram-accent-border: rgba(0,191,174,0.35);
}