/* =========================
   Цвета
   ========================= */

:root {

    /* Brand */
    --primary: #7C3AED;
    --primary-hover: #8B5CF6;

    /* Dark theme */
    --bg-dark: #0F172A;
    --surface-dark: #1E293B;
    --surface-dark-hover: #273449;

    /* Light theme */
    --bg-light: #F4F6FB;
    --surface-light: #FFFFFF;

    /* Text */
    --text-light: #FFFFFF;
    --text-dark: #1E293B;
    --text-secondary: #94A3B8;

    /* Borders */
    --border-dark: rgba(255,255,255,0.08);
    --border-light: rgba(15,23,42,0.08);
}

/* =========================
   Скругление в интерфейсе
   ========================= */

:root {

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
}

/* =========================
   Тени
   ========================= */

:root {

    --shadow-card-dark:
        0 8px 32px rgba(0,0,0,0.25);

    --shadow-card-light:
        0 8px 32px rgba(15,23,42,0.08);
}

/* =========================
   Размеры
   ========================= */

:root {

    --input-height: 48px;
    --button-height: 48px;

    --container-width: 380px;
    --modal-width: 600px;
}

/* =========================
   Активная тема
   ========================= */

:root,
[data-theme="dark"] {
    --font-main: Inter, Arial, sans-serif;

    --color-bg: var(--bg-dark);
    --color-surface: var(--surface-dark);
    --color-surface-hover: var(--surface-dark-hover);

    --color-text: var(--text-light);
    --color-text-secondary: var(--text-secondary);

    --color-border: var(--border-dark);

    --color-primary: var(--primary);
    --color-primary-hover: var(--primary-hover);

    --shadow-card: var(--shadow-card-dark);
}

[data-theme="light"] {
    --color-bg: var(--bg-light);
    --color-surface: var(--surface-light);
    --color-surface-hover: #F8FAFC;

    --color-text: var(--text-dark);
    --color-text-secondary: #64748B;

    --color-border: var(--border-light);

    --color-primary: var(--primary);
    --color-primary-hover: var(--primary-hover);

    --shadow-card: var(--shadow-card-light);
}