/* ═══════════════════════════════════════════════════════════════════════
   MYSYSAD — SHARED THEME TOKENS
   ═══════════════════════════════════════════════════════════════════════
   Copyright © 2025 MYSYSAD.COM. All Rights Reserved.

   Single source of truth for theme tokens and scrollbar styling, shared
   across pages so the next page added to the site can't ship with
   missing-scrollbar or hardcoded-color bugs.

   Linked from <head> in:
     - index.html (the tools dashboard)
     - news.html  (the news aggregator)
     - any future page

   Page-specific styles still live in each page's inline <style>. Only
   genuinely cross-cutting design tokens belong here — keep this file
   small to keep it boring.
   ───────────────────────────────────────────────────────────────────── */

:root {
    /* Surfaces & text */
    --bg:        #0a0b0e;
    --surface:   #111318;
    --surface2:  #181c22;
    --border:    #252930;
    --text:      #edf2f7;
    --muted:     #8a96aa;

    /* Brand & status */
    --accent:        #00e5ff;
    --accent-hover:  #33eaff;
    --accent2:       #7fff00;
    --red:           #ff4444;
    --yellow:        #ffc107;
    --green:         #00e676;
    --orange:        #ff6600;   /* used by news.html for warm-tag accents */
    --reddit:        #ff4500;   /* used by news.html for r/ source badge */

    /* Typography */
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Space Grotesk', sans-serif;

    /* Scrollbar */
    --scrollbar-thumb:       #5a6478;
    --scrollbar-thumb-hover: #7a8499;
    --scrollbar-track:       #1c2028;
}

/* Light-mode overrides. Selector matches either <html class="light-mode">
   (set by the FOUC-prevention script before paint) or <body class="light-mode">
   (kept for backward compatibility). Either path produces the same cascade. */
html.light-mode,
body.light-mode {
    --bg:        #f4f5f7;
    --surface:   #ffffff;
    --surface2:  #edf0f4;
    --border:    #d1d8e0;
    --text:      #1a2030;
    --muted:     #6b7998;

    --accent:        #0284c7;
    --accent-hover:  #0369a1;
    --accent2:       #16a34a;
    --yellow:        #d97706;
    --red:           #dc2626;
    --green:         #059669;

    --scrollbar-thumb:       #b8c1cc;
    --scrollbar-thumb-hover: #97a3b3;
    --scrollbar-track:       #e6eaf0;
}

/* Scrollbar rules. Two-layer approach for cross-browser support:
     • scrollbar-color / scrollbar-width (Firefox 64+, modern spec)
     • ::-webkit-scrollbar               (Chrome/Safari/Edge legacy, still required)
   Both stay in sync via the variables above. */
html { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; }
::-webkit-scrollbar           { width: 12px; height: 12px; }
::-webkit-scrollbar-track     { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb     {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid var(--scrollbar-track);  /* inner padding effect */
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner    { background: var(--scrollbar-track); }
