/* ============================================
   KOBYGEN — DESIGN SYSTEM UTILITIES 2026
   Load after tokens.css
   ============================================ */

/* ---- Base typography (site + account + admin) ---- */
html {
    font-size: var(--text-root);
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-weight-body);
    line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6,
.section-title,
.page-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-display-heavy);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
}

h1 { font-size: var(--text-4xl); font-weight: var(--font-weight-display-black); letter-spacing: var(--tracking-display-wide); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); font-weight: var(--font-weight-display); }

button,
input[type="submit"],
input[type="button"],
.btn-primary-glow,
.btn-secondary-glow,
.btn-premium,
.btn-nav-buy {
    font-family: var(--font-display);
    font-weight: var(--font-weight-display);
    letter-spacing: var(--tracking-wide);
}

.comic-burst,
.effect-burst,
.font-accent {
    font-family: var(--font-accent);
}

nav,
.nav-link,
.site-nav {
    font-family: var(--font-display);
}

code, pre, kbd, samp,
.label-mono,
.font-mono {
    font-family: var(--font-mono);
}

/* ---- Focus & accessibility ---- */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Layout utilities ---- */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.stack-sm { gap: var(--space-2); }
.stack-lg { gap: var(--space-6); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

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

.glass-surface-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
}

.surface-elevated {
    background: var(--surface-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ---- Typography utilities ---- */
.text-gradient-cyan {
    background: linear-gradient(135deg, #fff 30%, var(--neon-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

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

.label-mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- Glow accents ---- */
.glow-cyan { box-shadow: var(--glow-cyan); }
.glow-pink { box-shadow: var(--glow-pink); }
.glow-gold { box-shadow: var(--glow-gold); }

/* ---- Progress bars (shared site + account) ---- */
.progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-inset-deep);
}

.progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    pointer-events: none;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-cyan);
    border-radius: inherit;
    transition: width var(--transition-smooth);
    position: relative;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.progress-fill.is-gold {
    background: var(--gradient-gold);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

.progress-fill.is-pink {
    background: var(--gradient-pink);
    box-shadow: 0 0 12px rgba(255, 0, 60, 0.3);
}

/* ---- Premium buttons (2026) ---- */
.btn-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-premium--cyan {
    color: var(--bg-deep);
    background: var(--gradient-cyan);
    box-shadow: 0 4px 20px rgba(0, 240, 255, 0.25);
}

.btn-premium--cyan:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-cyan-strong);
}

.btn-premium--ghost {
    color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.35);
    backdrop-filter: blur(8px);
}

.btn-premium--ghost:hover {
    background: rgba(0, 240, 255, 0.12);
    box-shadow: var(--glow-cyan);
}

/* ---- Toast notifications (site + account) ---- */
.kobygen-toast {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 280px;
    max-width: 420px;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    background: var(--surface-overlay);
    backdrop-filter: blur(var(--glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    transform: translateX(calc(100% + var(--space-8)));
    transition: transform var(--duration-normal) var(--ease-spring);
}

.kobygen-toast.show {
    transform: translateX(0);
}

.kobygen-toast.success {
    border-left: 3px solid var(--neon-green);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.08), var(--surface-overlay));
}

.kobygen-toast.error {
    border-left: 3px solid var(--neon-pink);
    background: linear-gradient(135deg, rgba(255, 0, 60, 0.08), var(--surface-overlay));
}

.kobygen-toast.info {
    border-left: 3px solid var(--neon-cyan);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), var(--surface-overlay));
}

/* ---- Badge pills ---- */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
}

.badge-pill--cyan {
    color: var(--neon-cyan);
    border-color: rgba(0, 240, 255, 0.3);
    background: rgba(0, 240, 255, 0.08);
}

.badge-pill--gold {
    color: var(--neon-gold);
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.08);
}

/* ---- Stat micro grid ---- */
.stat-micro {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-micro-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.stat-micro-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ---- Divider ---- */
.divider-glow {
    height: 1px;
    border: none;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.35), transparent);
    margin: var(--space-6) 0;
}

@media (max-width: 768px) {
    .kobygen-toast {
        left: max(1rem, var(--safe-left, env(safe-area-inset-left, 0px)));
        right: max(1rem, var(--safe-right, env(safe-area-inset-right, 0px)));
        bottom: calc(1rem + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
        min-width: 0;
        max-width: none;
        transform: translateY(calc(100% + var(--space-8)));
    }

    .kobygen-toast.show {
        transform: translateY(0);
    }

    .section-header {
        margin-bottom: 2.5rem;
    }
}

/* ---- Premium layer utilities (--kg-* tokens) ---- */
.kg-glass {
    background: var(--kg-glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--kg-glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), var(--shadow-inset);
}

.kg-glass--strong {
    background: var(--kg-glass-strong);
    backdrop-filter: blur(var(--glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
}

.surface-lux {
    background: var(--kg-surface-lux);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-lg);
    box-shadow: var(--kg-glow);
}

.hover-lift {
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth),
        border-color var(--transition-smooth);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-premium);
    border-color: var(--kg-glass-border-hover);
}

.text-gradient-brand {
    background: linear-gradient(135deg, #fff 20%, var(--neon-cyan) 55%, var(--neon-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
    .kobygen-toast {
        transition: none;
    }

    .progress-fill {
        transition: none;
    }

    .hover-lift:hover {
        transform: none;
    }
}