/* Base reset and theme tokens */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0A0A0A;
  --onyx: #111111;
  --s1: #171717;
  --s2: #1E1E1E;
  --s3: #262626;
  --border: #2A2A2A;
  --red: #E8001C;
  --red-h: #FF1A35;
  --red-dim: rgba(232, 0, 28, .1);
  --red-glow: rgba(232, 0, 28, .22);
  --tx: #EDEDED;
  --muted: #666;
  --dim: #3A3A3A;
  --icon: #505050;
  --sw: 238px;
  --sc: 58px;
  --scrollbar-size: 10px;
  --scrollbar-track: rgba(255, 255, 255, .035);
  --scrollbar-thumb: rgba(255, 255, 255, .14);
  --scrollbar-thumb-hover: rgba(232, 0, 28, .42);
}

html[data-theme="light"] {
  --bg: #F1F1F1;
  --onyx: #FFFFFF;
  --s1: #F7F7F7;
  --s2: #EFEFEF;
  --s3: #E5E5E5;
  --border: #DCDCDC;
  --tx: #111111;
  --muted: #737373;
  --dim: #B8B8B8;
  --icon: #909090;
  --red-dim: rgba(232, 0, 28, .07);
  --red-glow: rgba(232, 0, 28, .13);
  --scrollbar-track: rgba(17, 17, 17, .05);
  --scrollbar-thumb: rgba(17, 17, 17, .18);
  --scrollbar-thumb-hover: rgba(232, 0, 28, .36);
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

body { position: relative; }
body.has-overlay { overflow: hidden; }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  min-height: 34px;
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

button, input, textarea, select {
  font: inherit;
}

button, [role="button"] {
  touch-action: manipulation;
}

a { color: inherit; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(232, 0, 28, .8);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
