@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap');

:root {
  /* VS Code Dark Theme Colors */
  --background-color: #1e1e1e;
  --sidebar-color: #252526;
  --activity-bar: #333333;
  --status-bar: #007acc;
  --tab-active-bg: #1e1e1e;
  --tab-inactive-bg: #2d2d2d;
  
  --text-color: #d4d4d4;
  --comment-color: #6a9955;
  --keyword-color: #569cd6;
  --string-color: #ce9178;
  --number-color: #b5cea8;
  --class-color: #4ec9b0;
  --function-color: #dcdcaa;
  
  --primary-color: #007acc;
  --secondary-color: #569cd6;
  --muted-color: #858585;
  
  --heading-font: "Fira Code", Consolas, monospace;
  --body-font: "Fira Code", Consolas, monospace;
  
  --base-font-size: 32px;
  --text-size: 16pt;
  --h1-size: 42pt;
  --h2-size: 32pt;
  --h3-size: 24pt;
  
  --box-bg: #252526;
  --box-border: #454545;
}

body, .reveal-viewport {
  background-color: var(--background-color);
}

.reveal {
  font-family: var(--body-font);
  color: var(--text-color);
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  font-family: var(--heading-font);
  color: var(--keyword-color);
  text-transform: none;
  font-weight: 500;
}

.reveal h1 { color: var(--function-color); }
.reveal h2 { color: var(--class-color); }

.reveal p, .reveal li {
  font-size: var(--text-size);
  color: var(--text-color);
  line-height: 1.6;
}

/* VS Code UI Elements simulation */
.reveal .slides section {
  padding: 40px 60px;
  text-align: left;
  border-left: 5px solid var(--activity-bar); /* Simulated activity bar */
}

/* Syntax Highlighting style text */
.keyword { color: var(--keyword-color); }
.string { color: var(--string-color); }
.comment { color: var(--comment-color); font-style: italic; }
.function { color: var(--function-color); }
.class { color: var(--class-color); }
.number { color: var(--number-color); }

/* Components */
.box {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-radius: 4px; /* Slightly squarer */
  padding: 20px;
}

.callout {
  border-left: 4px solid var(--primary-color);
  background: #2d2d30;
  padding: 15px 20px;
  border-radius: 2px;
}

.callout-blue { border-left-color: #569cd6; background: rgba(86, 156, 214, 0.1); }
.callout-orange { border-left-color: #ce9178; background: rgba(206, 145, 120, 0.1); }
.callout-green { border-left-color: #6a9955; background: rgba(106, 153, 85, 0.1); }

/* Status Bar simulation at bottom */
body::after {
  content: "  main*  Ln 12, Col 45  UTF-8  TypeScript  Prettier";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22px;
  background-color: var(--status-bar);
  color: white;
  font-family: var(--body-font);
  font-size: 12px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  z-index: 1000;
  pointer-events: none;
}

code {
  font-family: "Fira Code", monospace !important;
  background: #2d2d2d;
  padding: 2px 6px;
  border-radius: 4px;
  color: #d7ba7d;
}

pre code {
  background: #1e1e1e;
  border: 1px solid #454545;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.section-divider h2 {
  border-bottom: 1px solid var(--box-border);
  padding-bottom: 20px;
  display: inline-block;
}

/* Mermaid diagrams */
.mermaid { width: 100%; }
.mermaid svg { max-width: 100%; height: auto; }