:root {
  --bg-dark: #0e0e11;
  --bg-menu: #0e0e11;
  --text: #F5E8D8;
  --card: #21242d;
  --border: #232a31;

  --orange: #f7a600;
  --orange-x: #DAA520;


  --bg-menu-dark: #830303;
  --bg-menu-hover: #960000;

  --primary-green: #0b8d4e;
  --primary-light-green: #4cbf50;

  --primary-red: #c42c30;

  --accent-color: #f7a600;
  --accent-hover: #ffb11a;

  --text-light: #e6e6e6;
  --text-muted: #b9c0c7;
  --text-passive: #d6d6d6c5;

  --btn-hover: #1c232b;
  --hover: #242b33;

  --into: #3a3835;

  --passive: #1b2537;
  --active: #2a3b5a;


  --scroll-thumb: #27303a;
  --scroll-thumb-hover: #2f3945;

  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --navbar-h: 60px;
}

/* Reset / Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-shadow: none !important;
}

/* 🚫 absolutely no shadows */
*:focus {
  outline: none;
}

/* 🚫 no default focus border */
html,
body {
  height: 100%;
}

html,
body {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-main);
  background: var(--bg-dark);
  color: var(--text-light);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-container {
  padding-top: var(--navbar-h);
  max-width: 100vw;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  /* 🚫 no border */
  text-decoration: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  transition: filter .16s ease, transform .1s ease;
  background: var(--hover);
  color: var(--text-light);
}

.btn:hover {
  filter: brightness(1.06);
}

.btn:active {
  transform: translateY(1px);
}

.btn-accent {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent-color) 100%);
  color: #111;
}

.btn-accent:hover {
  filter: brightness(1.05);
}

/* No-scroll when sidebar open */
html.no-scroll,
body.no-scroll {
  overflow: hidden;
}

/* Selection */
::selection {
  background: color-mix(in srgb, var(--accent-color), #000 50%);
  color: #111;
}