/* ============================================================
   base.css — reset + :root tokens + body
   ============================================================ */

:root {
  --bg:        #0A0C12;
  --surface:   #13161F;
  --surface2:  #1C202D;
  --border:    rgba(255, 255, 255, 0.07);
  --border2:   rgba(255, 255, 255, 0.12);
  --text:      #F0F2F8;
  --text2:     #8B90A0;
  --text3:     #555A6A;
  --amber:     #F0A500;
  --green:     #22C55E;
  --red:       #EF4444;
  --blue:      #4F8EF7;

  --font:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'DM Mono', ui-monospace, 'SF Mono', monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --sidebar-w: 220px;
  --topbar-h:  60px;
  --bottomnav-h: 60px;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

textarea {
  resize: vertical;
}

::placeholder {
  color: var(--text3);
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollbars — keep the dark mood */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface2) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }