@font-face {
  font-family: "CascadiaCode";
  src: url("./assets/fonts/CaskaydiaCoveNerdFont-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "CascadiaCode";
  src: url("./assets/fonts/CaskaydiaCoveNerdFont-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

:root {
  font-family: "CascadiaCode", monospace;
  font-size: 16px;
  overflow: hidden;

  --color-bg-base: #1c2128;
  --color-bg-elevated: #22272e;

  --color-border-subtle: #2d333b;
  --color-border-muted: #444c56;
  --color-border-deep: #111;

  --color-text-primary: #adbac7;
  --color-text-secondary: #768390;
  --color-text-emphasis: #cdd9e5;

  --color-accent: #b39cd0;
  --color-accent-hover: rgba(179, 156, 208, 0.85);
  --color-accent-text-on: #1c2128;

  --color-success: #4ade80;
  --color-error: #d47373;
  --color-error-bg: rgba(212, 115, 115, 0.05);
  --color-error-bg-strong: rgba(212, 115, 115, 0.1);
  --color-error-border: rgba(212, 115, 115, 0.15);

  --color-shadow-key: rgba(0, 0, 0, 0.3);
  --color-spinner-track: rgba(28, 33, 40, 0.2);

  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--color-bg-base);
}

.app-container {
  width: 28.125rem;
  height: 37.5rem;
  box-sizing: border-box;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  overflow-y: auto;
  overflow-x: hidden;
}

.app-container::-webkit-scrollbar {
  width: 0.375rem;
}

.app-container::-webkit-scrollbar-track {
  background: transparent;
}

.app-container::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle);
  border-radius: 0.1875rem;
}

.app-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-muted);
}
