/**
 * base.css
 * BIXOR Exchange - Global Base Styles
 */

html {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  background:
    radial-gradient(circle at top, rgba(212, 175, 55, 0.12), transparent 28%),
    linear-gradient(180deg, #0a0b0f 0%, #050608 100%);
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: transparent;
  min-height: 100vh;
  overflow-x: hidden;
  letter-spacing: 0;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.34);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast) var(--easing-material);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(230, 198, 91, 0.48);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.34) rgba(255, 255, 255, 0.04);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

small {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

strong {
  font-weight: var(--font-weight-semibold);
}

code,
pre,
.mono {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
}

a {
  color: var(--color-accent);
  transition: color var(--transition-fast) var(--easing-material);
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus-visible,
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus {
  outline: none;
}

::selection {
  background-color: rgba(212, 175, 55, 0.24);
  color: var(--color-text-primary);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

hr {
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-4) 0;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: var(--nav-height);
}

.app-content {
  flex: 1;
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--padding-mobile);
}

@media (min-width: 768px) {
  .app-content {
    padding: 0 var(--padding-desktop);
  }
}

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden { display: none !important; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }