/*
 * Kumo webtest - Login Page Styles
 * 登录页面样式表
 */

/* Import Shared CSS Variables (Design System) */
@import url('../../shared/css/variables.css');

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap');

/* ========== Login-Specific CSS Variables ========== */
:root {
    /* Login-specific aliases for shared variables */
    --background-start: var(--background-start-light);
    --background-end: var(--background-end-light);
    --card-background: var(--bg-card);

    /* Input Field (login-specific) */
    --input-bg: #f9fafb;          /* gray-50 */
    --input-border: #d1d5db;      /* gray-300 */
    --btn-secondary-bg: #ffffff;
    --btn-secondary-border: #d1d5db;

    /* Error State Colors */
    --input-border-error: #ef4444; /* red-500 */
    --text-error: #ef4444; /* red-500 */

    /* Alert/Warning Colors (for error modals) */
    --alert-bg: #fef2f2;          /* red-50 */
    --alert-border: #fecaca;      /* red-200 */
    --alert-text: #dc2626;        /* red-600 */
}

/* Dark Theme */
.dark {
    --background-start: var(--background-start-dark);
    --background-end: var(--background-end-dark);
    --card-background: var(--bg-card);

    /* Input Field (dark mode) */
    --input-bg: #374151;          /* gray-700 */
    --input-border: #4b5563;      /* gray-600 */
    --btn-secondary-bg: #374151;
    --btn-secondary-border: #4b5563;

    /* Alert/Warning Colors (for error modals) */
    --alert-bg: #3f2222;          /* 暗红色背景 */
    --alert-border: #5b2121;      /* 深红边框 */
    --alert-text: #f87171;        /* red-400 */
}

/* ========== Global Styles ========== */
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== Gradient Background ========== */
.gradient-bg {
    background: linear-gradient(to bottom right, var(--background-start), var(--background-end));
}

.dark .gradient-bg {
    background: linear-gradient(to bottom right, var(--background-start), var(--background-end));
}

/* ========== Admin Theme - Purple Gradient ========== */
.admin-gradient-bg {
    background: linear-gradient(to bottom right, #f3e8ff, #fce7f3); /* purple-100, pink-100 */
}

.dark .admin-gradient-bg {
    background: linear-gradient(to bottom right, #1e1b4b, #2e1065); /* indigo-950, purple-950 */
}

.admin-gradient-bg .login-card {
    background-color: #ffffff;
}

.dark .admin-gradient-bg .login-card {
    background-color: #2e1065;
    border-color: #581c87;
}

/* ========== Card Styles ========== */
.login-card {
    background-color: var(--card-background);
    color: var(--text-primary);
}

.dark .login-card {
    background-color: var(--card-background);
    color: var(--text-primary);
    border-color: #374151; /* gray-700 */
}

/* ========== Text Colors ========== */
.text-primary {
    color: var(--text-primary);
}

.dark .text-primary {
    color: var(--text-primary);
}

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

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

/* ========== Input Field Styles ========== */
.input-field {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.dark .input-field {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.input-field::placeholder {
    color: var(--text-secondary);
}

.dark .input-field::placeholder {
    color: var(--text-secondary);
}

/* Input Error State */
.input-field.input-error {
    border-color: var(--input-border-error) !important;
}

.input-field.input-error:focus {
    --tw-ring-color: var(--input-border-error);
}

.text-error-message {
    color: var(--text-error);
    font-size: 0.75rem; /* text-xs */
    margin-top: 0.25rem; /* mt-1 */
    font-weight: 500; /* medium */
}

/* ========== Button Styles ========== */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.dark .btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--btn-secondary-border);
}

.dark .btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--btn-secondary-border);
}

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

.dark .btn-ghost {
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background-color: rgba(0,0,0,0.05);
}

.dark .btn-ghost:hover {
    background-color: rgba(255,255,255,0.05);
}

/* ========== Loading Animation ========== */
/* Using Tailwind's animate-spin utility for consistency */

/* ========== Alert/Error Modal Styles ========== */
.alert-error {
    background-color: var(--alert-bg);
    border-color: var(--alert-border);
}

.dark .alert-error {
    background-color: var(--alert-bg);
    border-color: var(--alert-border);
}

.alert-error-text {
    color: var(--alert-text);
}

.dark .alert-error-text {
    color: var(--alert-text);
}