/* Design System - Base Reset, Body and Global */

/* ── Reset ──────────────────────────────────────────── */

*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    font-size: 16px;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



body {

    background-color: var(--bg-primary);

    color: var(--text-primary);

    font-family: var(--font-sans);

    min-height: 100vh;

    overflow-x: hidden;

    position: relative;

    line-height: 1.5;

}



/* ── Background Glow ───────────────────────────────── */

body::before {
    content: "";
    position: fixed;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    background:
        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.08) 0%, transparent 60%);
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
    animation: slowAmbientDrift 25s ease-in-out infinite alternate;
}

@keyframes slowAmbientDrift {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, 3%); }
}

body[data-theme="soft-light"]::before {
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 206, 177, 0.68) 0%, transparent 36%),
        radial-gradient(circle at 92% 16%, rgba(221, 196, 238, 0.82) 0%, transparent 38%),
        radial-gradient(circle at 80% 88%, rgba(244, 184, 159, 0.44) 0%, transparent 34%),
        linear-gradient(135deg, #f3d5c4 0%, #ddd1ef 48%, #cfc8f2 100%);
}



/* ── Scrollbar ─────────────────────────────────────── */

::-webkit-scrollbar { width: 7px; height: 7px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, 0.2);

}



/* ── Window Drag Region (custom titlebar) ──────────── */

.window-drag-region {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 32px;

    -webkit-app-region: drag;

    z-index: 9999;

    pointer-events: auto;

}



/* Make sure buttons inside the drag region are clickable */

.window-drag-region button,

.window-drag-region a,

.window-drag-region input,

.window-drag-region select {

    -webkit-app-region: no-drag;

}



/* ── Removable Banner Styles ───────────────────────── */

.banner-close-btn {

    position: absolute;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    background: transparent;

    border: none;

    color: #78716c;

    /* muted brown slate matching gold tone */

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

    transition: all var(--transition-fast);

}



.banner-close-btn:hover {

    background: rgba(239, 68, 68, 0.15);

    /* red glow on hover */

    color: #ef4444;

    /* bright red close symbol */

}



/* ── Removable Banner Layout Overrides ─────────────── */

body.banner-hidden .tutorial-banner {

    display: none !important;

}



/* Tool Lock Overlay */
body.app-locked .page:not(#page-settings) { position: relative; pointer-events: none; opacity: 0.6; filter: grayscale(100%); }
body.app-locked .page:not(#page-settings)::after { content: ''; position: absolute; inset: 0; z-index: 9999; cursor: not-allowed; pointer-events: auto; }