@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

:root {
  /* Solarized Dark Colors */
  --base03: #002b36;
  --base02: #073642;
  --base01: #586e75;
  --base00: #657b83;
  --base0: #839496;
  --base1: #93a1a1;
  --base2: #eee8d5;
  --base3: #fdf6e3;
  --yellow: #b58900;
  --orange: #cb4b16;
  --red: #dc322f;
  --magenta: #d33682;
  --violet: #6c71c4;
  --blue: #268bd2;
  --cyan: #2aa198;
  --green: #859900;

  /* Theme mappings */
  --background-color: var(--base03);
  --text-color: var(--base0);
  
  --primary-color: var(--blue);
  --secondary-color: var(--green);
  --muted-color: var(--base01);
  
  --heading-font: "Inconsolata", monospace;
  --body-font: "Inconsolata", monospace;
  
  --base-font-size: 32px;
  --text-size: 18pt;
  --h1-size: 44pt;
  --h2-size: 36pt;
  --h3-size: 26pt;
  
  --box-bg: var(--base02);
  --box-border: var(--base01);
}

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

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

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--heading-font);
  color: var(--yellow);
  text-transform: none;
  font-weight: 700;
}

.reveal h2 { color: var(--orange); }
.reveal h3 { color: var(--blue); }

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

.reveal strong {
  color: var(--base1);
  font-weight: 700;
}

.reveal a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px dotted var(--blue);
}

.reveal a:hover {
  color: var(--cyan);
}

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

.callout {
  border-left: 5px solid var(--magenta);
  background: var(--base02);
  padding: 15px 20px;
  margin: 15px 0;
  color: var(--base1);
}

.callout-blue { border-left-color: var(--blue); }
.callout-green { border-left-color: var(--green); }
.callout-yellow { border-left-color: var(--yellow); }

/* Code Blocks */
pre code {
  background: var(--base02);
  border: 1px solid var(--base01);
  color: var(--base1);
  padding: 15px;
  border-radius: 4px;
}

.reveal ::selection {
  background: var(--magenta);
  color: var(--base3);
}

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