/* tokyo-night.css */
:root {
  /* Base Colors */
  --tkn-bg: #1a1b26;
  --tkn-bg-secondary: #16161e;
  --tkn-ui-1: #24283b;
  --tkn-ui-2: #414868;
  --tkn-ui-3: #2f3549;

  /* Text Colors */
  --tkn-text: #c0caf5;
  --tkn-text-secondary: #a9b1d6;
  --tkn-text-tertiary: #9aa5ce;

  /* Accent & Highlight */
  --tkn-accent-blue: #7aa2f7;
  --tkn-accent-cyan: #7dcfff;
  --tkn-accent-purple: #bb9af7;
  --tkn-accent-pink: #ff75a0;
  --tkn-accent-red: #f7768e;
  --tkn-accent-orange: #ff9e64;
  --tkn-accent-yellow: #e0af68;
  --tkn-accent-green: #9ece6a;

  /* Borders & Spacing */
  --tkn-border: #3a3f58;
  --tkn-highlight: rgba(42, 47, 65, 0.7);
}

/* Apply Tokyo Night theme to body and elements */
body {
  background-color: var(--tkn-bg);
  color: var(--tkn-text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--tkn-accent-blue);
}

a {
  color: var(--tkn-accent-cyan);
  text-decoration: none;
}

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

pre, code {
  background-color: var(--tkn-ui-1);
  color: var(--tkn-text);
  border-radius: 6px;
  padding: 2px 4px;
  font-family: 'Courier New', monospace;
}

pre {
  padding: 12px;
  overflow-x: auto;
  border: 1px solid var(--tkn-border);
}

button, .btn {
  background-color: var(--tkn-ui-2);
  color: var(--tkn-text);
  border: 1px solid var(--tkn-border);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover, .btn:hover {
  background-color: var(--tkn-accent-blue);
  color: #ffffff;
}