/* ============================================================================
 * OJ HUB — BASE (reset, tipografia, utilitários)
 * ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.5;
  color:var(--text-primary);background:var(--bg-base);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}
h1,h2,h3,h4,h5{font-weight:var(--fw-semibold);line-height:1.25;letter-spacing:-.015em}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)} h5{font-size:var(--fs-base)}
p{line-height:1.6}
a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
button:disabled{cursor:not-allowed}
ul,ol{list-style:none} img,svg{display:block;max-width:100%}
::selection{background:var(--accent-soft);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--r-full);
  border:2px solid var(--bg-deep)}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

.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}

/* texto */
.text-muted{color:var(--text-muted)} .text-secondary{color:var(--text-secondary)}
.text-danger{color:var(--danger)} .text-warning{color:var(--warning)}
.text-success{color:var(--success)} .text-accent{color:var(--accent)}
.text-gold{color:var(--gold)}
.text-xs{font-size:var(--fs-xs)} .text-sm{font-size:var(--fs-sm)}
.text-lg{font-size:var(--fs-lg)} .text-center{text-align:center}
.text-right{text-align:right}
.fw-medium{font-weight:var(--fw-medium)} .fw-semibold{font-weight:var(--fw-semibold)}
.fw-bold{font-weight:var(--fw-bold)}
.uppercase{text-transform:uppercase;letter-spacing:.06em}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* layout helpers */
.flex{display:flex} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap}
.items-center{align-items:center} .items-start{align-items:flex-start}
.items-end{align-items:flex-end} .items-baseline{align-items:baseline}
.justify-between{justify-content:space-between} .justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.flex-1{flex:1 1 0;min-width:0} .flex-none{flex:none}
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)}
.mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.mono{font-family:var(--font-mono);font-size:.94em;letter-spacing:-.01em}
.w-full{width:100%}
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.divider{height:1px;background:var(--border-subtle);margin:var(--sp-4) 0}
.divider-v{width:1px;background:var(--border-subtle);align-self:stretch}

@media(max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}