/* src/css/base.css */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Die Leinwand selbst scrollt nicht */
    
    /* 🔴 Upgrade: High-End System-Schriften (Apple, Windows, Android) */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* 🔴 KORRIGIERT: Zieht sich jetzt die echten zentralen Variablen! */
    background-color: var(--color-bg-base); 
    color: var(--color-text-muted);
    
    /* Verhindert markieren von Text bei UI-Elementen wie der Navi */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   Premium Stealth Scrollbar (Webkit)
   ========================================= */
::-webkit-scrollbar {
    width: 8px; /* Hauchdünn, aber greifbar */
}

::-webkit-scrollbar-track {
    background: transparent; /* Unsichtbare Spur, stört das Parallax-Bild nicht */
}

::-webkit-scrollbar-thumb {
    /* 🔴 MAGIE: color-mix() nimmt dein Master-Blau und mischt es zu 40% mit Transparent! 
       Wenn du das Blau in der colors.css änderst, ändert sich der halbdurchsichtige Balken automatisch mit! */
    background-color: color-mix(in srgb, var(--color-brand-primary) 40%, transparent); 
    
    border-radius: 10px; /* Abgerundete Enden passend zur Navi/Insel */
    border: 2px solid transparent; /* Sorgt für einen kleinen Abstand zum rechten Rand */
    background-clip: padding-box; 
}

::-webkit-scrollbar-thumb:hover {
    /* 🔴 KORRIGIERT: Zieht sich beim Drüberfahren das volle Master-Blau */
    background-color: var(--color-brand-primary); 
}