/**
 * ARIA Creative - Global Overrides & Scrollbar Styles
 * Uses design tokens from base.css
 */

/* ========================================
   SCROLLBAR STYLES
   ======================================== */

html, body {
    scrollbar-color: var(--color-bg-muted) var(--color-bg-primary);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: var(--color-bg-primary);
    display: block;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
    margin: 0;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-bg-muted);
    border: 1px solid var(--color-bg-surface);
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-border-strong);
}

::-webkit-scrollbar-corner {
    background: var(--color-bg-primary);
}

/* ========================================
   GLOBAL RESETS
   ======================================== */

html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--color-bg-primary);
}

/* ========================================
   TYPOGRAPHY REFINEMENTS
   ======================================== */

h1, h2, h3 {
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h1 { font-weight: var(--font-extrabold); }
h2 { font-weight: var(--font-bold); }
h3 { font-weight: var(--font-bold); }

:is(p, li) {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ========================================
   CLEAN RENDERING OVERRIDES
   Removes unwanted visual effects
   ======================================== */

h1, h2, h3, h4, h5, h6,
p,
.main-nav a,
.btn {
    background-image: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* ========================================
   SELECTION STYLES
   ======================================== */

::selection {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

::-moz-selection {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}