/* =============================================================
   THEME — design tokens, theme overrides, base reset, scrollbars
   This file owns the foundational layer of the hub: colour
   variables, font registrations, the four palettes (dark / light /
   sky / terra), the over-legacy hard reset, and the scrollbar
   styling. Loaded BEFORE hub.css.
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family: nexa;        src: url(../fonts/Nexa/NexaRegular.otf); }
@font-face { font-family: nexa-bold;   src: url(../fonts/Nexa/NexaBold.otf); }
@font-face { font-family: nexa-light;  src: url(../fonts/Nexa/NexaLight.otf); }
@font-face { font-family: nexa-black;  src: url(../fonts/Nexa/NexaBlack.otf); }
@font-face { font-family: quan;        src: url(../fonts/Quan/Quan.otf); }
@font-face { font-family: quan-bold;   src: url(../fonts/Quan/Quan-Bold.otf); }

/* =============================================================
   THEME TOKENS
   ============================================================= */
:root {
    /* Terminal dark (default) */
    --t-bg:            #0a0a0d;
    --t-bg-raised:     #111116;
    --t-bg-panel:      #15151b;
    --t-bg-hover:      #1c1c24;
    --t-border:        #23232c;
    --t-border-strong: #2e2e3a;
    --t-text:          #e7e7ee;
    --t-text-dim:      #8a8a96;
    --t-text-mute:     #5a5a66;
    --t-accent:        #ff2e63;   /* pink accent from the nav bar */
    --t-accent-soft:   #ff2e6322;
    --t-accent-hot:    #ff4d7d;
    --t-ok:            #4ade80;
    --t-online-dot:    #4ade80;

    /* Brand colors from original */
    --PlanaoColor:  #52B2F4;
    --PolarColor:   #3AF0B2;
    --OTGColor:     #FF1C58;
    --LEGITColor:   #6974F8;
    --YoutubeColor: #ff4040;
    --TwitchColor:  #a070ff;
    --DiscordColor: #5865F2;
    --ShopColor:    #e9b558;

    /* Legacy var names kept so original bundle.js still works */
    --navBackgroundColor: var(--t-bg-raised);
    --navBackgroundColorOpacity: rgba(17,17,22,0.75);
    --navHoverColor: var(--t-accent);
    --navExpandBtnColor: var(--t-accent);
    --navTextColor: var(--t-text);
    --unlicensedLogoColor: var(--t-text);
    --lineSeparatorColor: var(--t-border);
    --navTitleTextColor: var(--t-text-dim);
    --borderRadius: 6px;
    --errorBoxColor: var(--t-accent);
    --popUpTimer: 98%;
    --settingsColor: var(--t-text-dim);

    --mono: "JetBrains Mono", "Fira Code", "SF Mono", "Menlo", Consolas, monospace;
    --nav-h: 48px;
    /* Accent strip above the nav is removed; keep the var at 0 so all
       calc(... + var(--accent-line-h)) offsets across the file collapse
       cleanly to zero. */
    --accent-line-h: 0px;
}

/* Light theme override */
html[data-theme="light"] {
    --t-bg:            #f5f5f2;
    --t-bg-raised:     #ffffff;
    --t-bg-panel:      #ffffff;
    --t-bg-hover:      #ecece6;
    --t-border:        #dcdcd4;
    --t-border-strong: #b8b8b0;
    --t-text:          #0f0f14;
    --t-text-dim:      #5c5c66;
    --t-text-mute:     #8a8a94;
    --t-accent:        #ff2e63;
    --t-accent-soft:   #ff2e6315;
    --t-accent-hot:    #e41e4f;
}

/* Sky theme — soft white + blue. Cool, airy, low-contrast surfaces
   with a vivid sky-blue accent. */
html[data-theme="sky"] {
    --t-bg:            #eef4f9;
    --t-bg-raised:     #ffffff;
    --t-bg-panel:      #ffffff;
    --t-bg-hover:      #e1ecf4;
    --t-border:        #d2e1eb;
    --t-border-strong: #a8c0d3;
    --t-text:          #0f2538;
    --t-text-dim:      #4d6985;
    --t-text-mute:     #809aae;
    --t-accent:        #4a9fff;
    --t-accent-soft:   #4a9fff1f;
    --t-accent-hot:    #2581e5;
}

/* Terra theme — earth-tone palette. Warm beige/linen surfaces with
   a soft sage-green accent and walnut text. */
html[data-theme="terra"] {
    --t-bg:            #ebe5d6;
    --t-bg-raised:     #f4efe2;
    --t-bg-panel:      #f7f2e6;
    --t-bg-hover:      #ddd5c0;
    --t-border:        #c8bfa9;
    --t-border-strong: #a89e85;
    --t-text:          #2a2620;
    --t-text-dim:      #5e5746;
    --t-text-mute:     #897e62;
    --t-accent:        #6b8e5a;
    --t-accent-soft:   #6b8e5a22;
    --t-accent-hot:    #557345;
}

/* =============================================================
   BASE
   ============================================================= */
* { box-sizing: border-box; }

html {
    background: var(--t-bg);
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    color: var(--t-text);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Body transparent so the fixed #background image layer shows through. */
body {
    background: transparent;
}

a { color: inherit; text-decoration: none; cursor: pointer; }
ul, li, p, h1, h2, h3, h4 { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--t-accent); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL: hide the scrollbar across the whole app. Every scrollable
   container (html, body, .mt-scroll, overlays, list panels, …) keeps
   its scroll behavior — wheel, touch, keyboard, scrollTo() — but the
   indicator stops drawing.

   `!important` is required because individual components (.mt-overlay-body,
   .privacy-policy-container, etc.) ship class-scoped rules with higher
   specificity than the universal `*` selector. Without it those win and
   the scrollbar comes back inside overlays / lists.
   ───────────────────────────────────────────────────────────────────── */
html, body, * {
    scrollbar-width: none !important;          /* Firefox */
    scrollbar-color: transparent transparent !important;
    -ms-overflow-style: none !important;       /* legacy IE / Edge */
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-corner {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    display: none !important;
}