/* WriteQuest Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

:root {
    --color-primary: #6C5CE7;
    --color-primary-light: #A29BFE;
    --color-accent: #F59E0B;
    --color-accent-light: #FCD34D;
    --color-success: #10B981;
    --color-danger: #EF4444;
    --color-text: #1F2937;
    --color-text-secondary: #6B7280;
    --color-text-muted: #9CA3AF;
    --color-bg: #FFFFFF;
    --color-bg-secondary: #F9FAFB;
    --color-border: #E5E7EB;
    --color-card: #FFFFFF;
}

body {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
}

/* Cards — no blur, clean borders */
.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.card-elevated {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}

/* Nav */
.nav-light {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}

/* Buttons */
.btn-primary {
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-accent {
    background: var(--color-accent);
    color: white;
    border-radius: 10px;
    font-weight: 600;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Inputs */
.input-light {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s;
}
.input-light:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}
.input-light::placeholder {
    color: var(--color-text-muted);
}

/* Badge/Tag */
.badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
}
.badge-primary { background: rgba(108, 92, 231, 0.1); color: var(--color-primary); }
.badge-accent { background: rgba(245, 158, 11, 0.1); color: var(--color-accent); }
.badge-success { background: rgba(16, 185, 129, 0.1); color: var(--color-success); }
.badge-danger { background: rgba(239, 68, 68, 0.1); color: var(--color-danger); }

/* Dark writing area (toggle) */
.editor-dark {
    background: #1a1a2e;
    color: #E8E8F0;
    border-radius: 12px;
    border: 1px solid #2a2a3e;
}
.editor-dark::placeholder {
    color: rgba(232, 232, 240, 0.3);
}

/* Score colors */
.score-high { color: var(--color-success); }
.score-mid { color: var(--color-accent); }
.score-low { color: var(--color-danger); }

/* Mascot float animation */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* Mascot wiggle (greeting) */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-6deg) scale(1.05); }
    30% { transform: rotate(5deg) scale(1.05); }
    45% { transform: rotate(-4deg); }
    60% { transform: rotate(3deg); }
    75% { transform: rotate(-1deg); }
}
.mascot-wiggle {
    animation: wiggle 2s ease-in-out;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}
.mascot-wiggle:hover {
    animation: wiggle 0.6s ease-in-out;
}