/* ============================================================
   tokens.css
   Design tokens, reset, and global utilities.
   Change a color here and it changes everywhere.
   ============================================================ */

:root{
  /* --- accents --- */
  --clay:        #c1443a;
  --clay-dim:    #8f3129;
  --brass:       #4f8fff;
  --brass-dim:   #3563b0;
  --sage:        #5f9a78;

  /* --- severity scale (log entry bars + tags) --- */
  --sev-warning: #4f8fff;
  --sev-strike1: #d9a441;
  --sev-strike2: #e0812f;
  --sev-tempban: #c1443a;
  --sev-ban72:   #9c2b46;

  /* --- surfaces, darkest to lightest --- */
  --walnut-900:  #05070c;
  --walnut-800:  #0a0e16;
  --walnut-700:  #10151f;
  --walnut-600:  #182233;
  --walnut-500:  #2a3c56;

  /* --- text --- */
  --parchment:     #eaf1ff;
  --parchment-dim: #93a6c4;
  --ink:           #05070c;

  --shadow: 0 10px 30px rgba(0,0,0,.55);

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* ---------- utilities ---------- */
.hidden{ display:none !important; }

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

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

button:focus-visible, .tab-btn:focus-visible, a:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--walnut-900); }
::-webkit-scrollbar-thumb{ background:var(--walnut-500); border-radius:5px; }