/* variables.css — глобальные CSS-переменные для палитры A (синий → фиолетовый) */
:root{
    /* Colors */
    --bg-dark-0: #07111f;
    --bg-dark-1: #0d1b2d;
    --primary-500: #2563eb; /* blue */
    --primary-700: #1e40af;
    --accent-500: #7c3aed; /* purple */
    --surface-0: #0f172a;
    --muted-500: #64748b;

    --white: #ffffff;
    --black: #0b1220;

    /* light theme */
    --light-surface: #f8fbff;
    --light-muted: #475569;

    /* semantic */
    --success: #10b981;
    --danger: #ef4444;

    /* shadows */
    --shadow-1: 0 10px 24px rgba(37,99,235,0.12);

    /* spacing */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 24px;

    /* radii */
    --radius-pill: 999px;
    --radius-card: 18px;

    /* fonts */
    --font-sans: Inter, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial;
}

/* Dark theme overrides */
body[data-theme="dark"]{
    --bg-page: linear-gradient(135deg,var(--bg-dark-0) 0%, var(--bg-dark-1) 45%, #11243f 100%);
    --surface: rgba(10,20,36,0.9);
    --text-main: #e8eef8;
    --text-muted: #9fb0cd;
}

/* Light theme overrides */
body[data-theme="light"]{
    --bg-page: linear-gradient(135deg,var(--light-surface) 0%, #eef4ff 42%, #e0ebff 100%);
    --surface: rgba(255,255,255,0.98);
    --text-main: var(--black);
    --text-muted: var(--light-muted);
}

/* Common UI utilities */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.primary-btn {
    background: linear-gradient(135deg,var(--primary-500), var(--accent-500));
    color: var(--white);
    border: none;
    box-shadow: var(--shadow-1);
}

.secondary-btn {
    background: rgba(255,255,255,0.06);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.06);
}

.ghost-btn {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 9px 12px;
    border-radius: 12px;
    font-weight: 700;
}

/* Light theme button adjustments */
body[data-theme="light"] .secondary-btn,
body[data-theme="light"] .ghost-btn{
    background: var(--surface);
    color: var(--text-main);
}

/* small icon style inside buttons */
.btn .icon { font-size: 1.1rem; }