/* ============================================================
   Morvixa — Design tokens & base styles
   Dark, modern, emerald-green accent
   ============================================================ */

:root {
    /* Surfaces */
    --bg:            #0c0d11;
    --bg-grad-1:     #101218;
    --bg-grad-2:     #0a0b0f;
    --surface:       #15171d;
    --surface-2:     #1c1f27;
    --surface-3:     #242832;
    --border:        rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);

    /* Accent — fresh emerald green */
    --accent:        #34d399;
    --accent-2:      #10b981;
    --accent-soft:   rgba(52, 211, 153, 0.12);
    --accent-border: rgba(52, 211, 153, 0.22);
    --accent-shadow: rgba(16, 185, 129, 0.30);
    --accent-grad:   linear-gradient(135deg, #3ee9a8 0%, #10b981 100%);
    --on-accent:     #04241a;

    /* Text */
    --text:          #f4f5f7;
    --text-dim:      #aeb4c0;
    --muted:         #767d8c;

    /* Status */
    --success:       #4ade80;
    --success-soft:  rgba(74, 222, 128, 0.12);
    --danger:        #f87171;
    --danger-soft:   rgba(248, 113, 113, 0.12);
    --warning:       #fbbf24;
    --info:          #60a5fa;

    /* Shape */
    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow:    0 8px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);

    /* Layout */
    --sidebar-w: 264px;
    --topbar-h:  64px;

    --font: 'IRANYekanX', 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
            Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--font);
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(52,211,153,0.06), transparent 60%),
        linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

::selection { background: var(--accent-soft); color: var(--accent); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

/* Utility */
.muted { color: var(--muted); }
.dim   { color: var(--text-dim); }
.grow  { flex: 1; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: 12px;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease, opacity .2s;
    color: var(--text);
    background: var(--surface-2);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--accent-grad);
    color: var(--on-accent);
    box-shadow: 0 8px 24px var(--accent-shadow);
}
.btn-primary:hover { box-shadow: 0 10px 30px var(--accent-shadow); }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { box-shadow: 0 8px 24px rgba(248,113,113,.3); }
.btn-success { background: var(--success); color: #06280f; }

/* Pills / chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-dim);
}
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-success { background: var(--success-soft); color: var(--success); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-success { background: var(--success); box-shadow: 0 0 8px var(--success); }
.dot-danger  { background: var(--danger); }