/* Load Endercloud fonts (DM Sans & Orbitron) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Orbitron:wght@500;600;700;800&display=swap');

/* Endercloud Light Theme */
:root {
    --accent: #2563EB;            /* Endercloud primary blue */
    --accent-hover: #1D4ED8;      /* Deep blue hover state */
    --on-accent: #FFFFFF;         /* Text on accent */
    --bg: #F8FAFC;                /* Page background */
    --surface: #FFFFFF;           /* Cards */
    --raised: #F1F5F9;            /* Menus, inputs, action buttons */
    --border: #E2E8F0;            /* Crisp light border */
    --text: #0F172A;              /* Primary text */
    --muted: #64748B;             /* Secondary muted text */
    --radius: 10px;               /* Corner rounding */
    --font: 'DM Sans', sans-serif;
    --font-heading: 'Orbitron', sans-serif;
}

/* Endercloud Dark Theme */
:root[data-theme="dark"] {
    --accent: #3B82F6;            /* Endercloud dark-mode electric blue */
    --accent-hover: #2563EB;      /* Blue hover state */
    --on-accent: #FFFFFF;         /* Text on accent */
    --bg: #0A0B0F;                /* Main dark page background */
    --surface: #111420;           /* Slightly lifted navy-dark surface for cards */
    --raised: #171B2A;            /* Distinct elevated menus, inputs & top buttons */
    --border: #23293D;            /* Subtle blue-tinted dark border */
    --text: #F8FAFC;              /* Crisp white text */
    --muted: #94A3B8;             /* Cool slate muted text */
}

/* Fix Orbitron number/letter crowding in stat cards & headings (e.g. "17.9 GB", "€0.00") */
h1, h2, h3, h4,
[style*="--font-heading"] {
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

/* Endercloud Custom Scrollbar (replaces the default white Windows scrollbar) */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: var(--bg);
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-hover);
}

/* Brand text selection */
::selection {
    background-color: rgba(59, 130, 246, 0.3);
    color: var(--text);
}