@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ===========================
   Catppuccin Theme Variables
   =========================== */

/* Mocha (dark) - default */
:root, [data-theme="dark"] {
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-surface2: #585b70;
  --ctp-text: #cdd6f4;
  --ctp-subtext0: #a6adc8;
  --ctp-subtext1: #bac2de;
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;
  --ctp-red: #f38ba8;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-mauve: #cba6f7;
  --ctp-rosewater: #f5e0dc;
}

/* Latte (light) */
[data-theme="light"] {
  --ctp-base: #eff1f5;
  --ctp-mantle: #e6e9ef;
  --ctp-crust: #dce0e8;
  --ctp-surface0: #ccd0da;
  --ctp-surface1: #bcc0cc;
  --ctp-surface2: #acb0be;
  --ctp-text: #4c4f69;
  --ctp-subtext0: #6c6f85;
  --ctp-subtext1: #5c5f77;
  --ctp-overlay0: #9ca0b0;
  --ctp-overlay1: #8c8fa1;
  --ctp-red: #d20f39;
  --ctp-peach: #fe640b;
  --ctp-yellow: #df8e1d;
  --ctp-green: #40a02b;
  --ctp-teal: #179299;
  --ctp-blue: #1e66f5;
  --ctp-lavender: #7287fd;
  --ctp-mauve: #8839ef;
  --ctp-rosewater: #dc8a78;
}

* { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; }

/* ===========================
   Base Styles
   =========================== */
body {
  background-color: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.3px !important;
  transition: background-color 0.3s, color 0.3s;
}
.container {
  background-color: var(--ctp-base) !important;
  transition: background-color 0.3s;
}
a {
  color: var(--ctp-blue) !important;
}
a:hover {
  color: var(--ctp-lavender) !important;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--ctp-text) !important;
}
h1 { font-size: 1.3em !important; }
h2 { font-size: 1.1em !important; }
strong, b {
  color: var(--ctp-rosewater) !important;
}

/* ===========================
   Menu / Navigation
   =========================== */
.menu {
  border-top-color: var(--ctp-surface1) !important;
  border-bottom-color: var(--ctp-surface1) !important;
}
.menu ul {
  display: flex !important;
  text-align: left !important;
}
.menu ul li.menu-first-child {
  margin-right: auto !important;
}
.menu ul li a {
  color: var(--ctp-text) !important;
}
.menu ul li a:hover {
  color: var(--ctp-blue) !important;
}
.menu-first-child span {
  color: var(--ctp-green) !important;
}

/* ===========================
   Code & Syntax Highlighting
   =========================== */
code {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-red) !important;
}
pre {
  background-color: var(--ctp-mantle) !important;
  border-color: var(--ctp-surface1) !important;
}
pre code {
  color: var(--ctp-text) !important;
}
.highlight {
  background-color: var(--ctp-mantle) !important;
}
.highlight .s, .highlight .s1, .highlight .s2 {
  color: var(--ctp-green) !important;
  background-color: transparent !important;
}
.highlight .na {
  color: var(--ctp-blue) !important;
  background-color: transparent !important;
}
.highlight .pi {
  color: var(--ctp-peach) !important;
  background-color: transparent !important;
}
.highlight .nn { color: var(--ctp-yellow) !important; background-color: transparent !important; }
.highlight .k, .highlight .kd { color: var(--ctp-mauve) !important; background-color: transparent !important; }
.highlight .kt { color: var(--ctp-yellow) !important; background-color: transparent !important; }
.highlight .nf { color: var(--ctp-blue) !important; background-color: transparent !important; }
.highlight .nb { color: var(--ctp-rosewater) !important; background-color: transparent !important; }
.highlight .nc { color: var(--ctp-yellow) !important; background-color: transparent !important; }
.highlight .no { color: var(--ctp-peach) !important; background-color: transparent !important; }
.highlight .c, .highlight .c1, .highlight .cm { color: var(--ctp-overlay0) !important; background-color: transparent !important; }
.highlight .o { color: var(--ctp-teal) !important; background-color: transparent !important; }
.highlight .p { color: var(--ctp-text) !important; background-color: transparent !important; }
.highlight .m, .highlight .mi, .highlight .mf { color: var(--ctp-peach) !important; background-color: transparent !important; }
.highlight .sr, .highlight .ss { color: var(--ctp-green) !important; background-color: transparent !important; }
.highlight .err { color: var(--ctp-red) !important; background-color: transparent !important; }

/* ===========================
   Blockquotes & Dividers
   =========================== */
blockquote {
  border-left: 4px solid var(--ctp-blue) !important;
  color: var(--ctp-subtext1) !important;
  padding: 12px 20px !important;
  margin: 20px 0 !important;
  margin-left: 0 !important;
  font-style: italic !important;
  background: transparent !important;
}
hr {
  border-color: var(--ctp-surface1) !important;
}

/* ===========================
   Tables
   =========================== */
table {
  border-color: var(--ctp-surface1) !important;
}
th {
  background-color: var(--ctp-surface0) !important;
  border-color: var(--ctp-surface1) !important;
  color: var(--ctp-text) !important;
}
td {
  border-color: var(--ctp-surface1) !important;
}

/* ===========================
   Selection
   =========================== */
::selection {
  background-color: var(--ctp-surface2) !important;
  color: var(--ctp-text) !important;
}

/* ===========================
   Terminal Window
   =========================== */
.terminal-window {
  border: 1px solid var(--ctp-surface1);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: border-color 0.3s;
}
.terminal-bar {
  background-color: var(--ctp-mantle);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--ctp-surface1);
  transition: background-color 0.3s;
}
.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.terminal-dot.red { background-color: var(--ctp-red); }
.terminal-dot.yellow { background-color: var(--ctp-yellow); }
.terminal-dot.green { background-color: var(--ctp-green); }
.terminal-title {
  color: var(--ctp-overlay0);
  font-size: 11px;
  margin-left: 8px;
}
.terminal-body {
  padding: 15px 20px;
}

/* ===========================
   Terminal Statusbar
   =========================== */
.terminal-statusbar {
  background-color: var(--ctp-mantle);
  border-top: 1px solid var(--ctp-surface1);
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  transition: background-color 0.3s;
}
.terminal-statusbar-left,
.terminal-statusbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-pill {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}
.status-pill.green { background-color: var(--ctp-green); color: var(--ctp-base); }
.status-pill.purple { background-color: var(--ctp-mauve); color: var(--ctp-base); }
.status-pill.yellow { background-color: var(--ctp-yellow); color: var(--ctp-base); }
.status-pill.blue { background-color: var(--ctp-blue); color: var(--ctp-base); }
.status-text {
  color: var(--ctp-overlay0);
}
.status-sep {
  color: var(--ctp-surface1);
}

/* ===========================
   Theme Toggle Button
   =========================== */
.theme-toggle {
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--ctp-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.theme-toggle:hover {
  background: var(--ctp-surface1);
}
[data-theme="light"] body,
[data-theme="light"] .container,
[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] span {
  color: #4c4f69 !important;
}
[data-theme="light"] .menu-first-child span {
  color: #40a02b !important;
}
[data-theme="light"] .cursor-blink {
  color: #40a02b !important;
}

/* ===========================
   Scroll to Top
   =========================== */
.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: var(--ctp-surface0);
  color: var(--ctp-text);
  border: 1px solid var(--ctp-surface1);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  z-index: 100;
}
.scroll-top:hover {
  background-color: var(--ctp-surface1);
}
.scroll-top.visible {
  display: flex;
}
/* ===========================
   Mobile Responsiveness
   =========================== */
@media (max-width: 600px) {
  .terminal-statusbar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px;
    font-size: 10px;
  }
  .terminal-statusbar-left,
  .terminal-statusbar-right {
    gap: 4px;
  }
  .scroll-top {
    bottom: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  img {
      max-width: 100% !important;
      width: auto !important;
      height: auto !important;
  }
}