/* HABBO ORIGINS - combined stylesheet entry */
@import url("./tokens.css");
@import url("./reset.css");
@import url("./shell.css");
@import url("./components.css");
@import url("./pages.css");

/* Utility classes */
.row { display: flex; align-items: center; gap: var(--s-3); }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.wrap { flex-wrap: wrap; }
.full { width: 100%; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); }
.t-mono { font-family: var(--font-mono); }
.t-pixel { font-family: var(--font-pixel); letter-spacing: var(--tracking-pixel); text-transform: uppercase; }
.t-muted { color: var(--fg-muted); }
.t-faint { color: var(--fg-faint); }
.t-secondary { color: var(--fg-secondary); }
.t-primary { color: var(--fg-primary); }
.t-brand { color: var(--brand-orange); }
.t-warn { color: var(--state-warn); }
.t-error { color: var(--state-error); }
.t-online { color: var(--state-online); }
.t-c { text-align: center; }
.t-r { text-align: right; }
.t-uc { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.t-xs { font-size: var(--t-xs); }
.t-sm { font-size: var(--t-sm); }
.t-md { font-size: var(--t-md); }
.t-lg { font-size: var(--t-lg); }
.t-xl { font-size: var(--t-xl); }
.t-h4 { font-size: var(--t-h4); }
.t-h3 { font-size: var(--t-h3); }
.t-h2 { font-size: var(--t-h2); }
.b { font-weight: 700; }
.hidden { display: none !important; }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; }

/* fade-in for route entry */
.route-enter { animation: route-in 0.32s var(--ease-out) backwards; }
@keyframes route-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}