/* ==========================================================
   Utility classes + globální ambient — závisí na tokenech
   z variables.css. Žádné barvy/tokeny zde, jen třídy.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    background: var(--bg-deepest);
    color: var(--text-primary);
}

/* Epický gradient overlay top-right + bottom-left */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 50% at 85% -5%, rgba(66, 153, 225, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 100%, rgba(72, 187, 120, 0.10) 0%, transparent 55%);
}

/* ==========================================================
   Glass card surface
   ========================================================== */
.glass-card {
    position: relative;
    background: var(--glass-card-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-card);
}

.glass-panel {
    background: var(--glass-panel-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ==========================================================
   Gradient text + gradient fill + metric badge
   ========================================================== */
.gradient-accent-bg {
    background: var(--accent-gradient);
    color: #FFFFFF;
}

.gradient-premium-bg {
    background: var(--accent-gradient-premium);
    color: #FFFFFF;
}

.gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.gradient-text-premium {
    background: var(--accent-gradient-premium);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.metric-badge.up    { color: #48BB78; background: rgba(72, 187, 120, 0.14); }
.metric-badge.down  { color: #EE5D50; background: rgba(238, 93, 80, 0.14); }
.metric-badge.flat  { color: var(--text-tertiary); background: var(--overlay-faint); }

.text-muted { color: var(--text-secondary); }
.text-dim   { color: var(--text-tertiary); }