/**
 * Edu AI Hub — shared design tokens (landing + chat + LMS)
 */
:root {
    /* Typography */
    --edu-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --edu-display-font: 'Fredoka', 'Nunito', sans-serif;

    /* Ink & surfaces */
    --edu-ink: #14213d;
    --edu-muted: #64748b;
    --edu-muted-light: #6b7280;
    --edu-white: #ffffff;
    --edu-bg: #f9fafb;
    --edu-border: #e5e7eb;
    --edu-gray-50: #f9fafb;
    --edu-gray-100: #f3f4f6;
    --edu-gray-200: #e5e7eb;

    /* Kid accents */
    --edu-sky: #2bb3ff;
    --edu-coral: #ff5c8a;
    --edu-coral-dark: #ff8a5c;
    --edu-sun: #ffd166;
    --edu-mint: #37d67a;

    /* Purple scale */
    --edu-purple-50: #f5f3ff;
    --edu-purple-100: #ede9fe;
    --edu-purple-200: #ddd6fe;
    --edu-purple-300: #c4b5fd;
    --edu-purple-400: #a78bfa;
    --edu-purple-500: #8b5cf6;
    --edu-purple-600: #7c3aed;
    --edu-purple-700: #6d28d9;
    --edu-purple-800: #5b21b6;
    --edu-purple-900: #4c1d95;

    /* Layout tokens */
    --edu-radius: 16px;
    --edu-radius-lg: 24px;
    --edu-radius-btn: 12px;
    --edu-shadow-soft: 0 4px 24px rgba(124, 58, 237, 0.08);
    --edu-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06);
    --edu-shadow-card: 0 12px 28px rgba(20, 33, 61, 0.08);

    /* Gradients */
    --edu-hero-gradient: linear-gradient(135deg, #e9fbff 0%, #fff7d6 46%, #fff0f5 100%);
    --edu-cta-gradient: linear-gradient(135deg, var(--edu-coral) 0%, var(--edu-coral-dark) 100%);
    --edu-highlight-gradient: linear-gradient(135deg, var(--edu-coral), var(--edu-sky));
    --edu-brand-gradient: linear-gradient(135deg, var(--edu-purple-600) 0%, var(--edu-purple-500) 50%, #6366f1 100%);
    --edu-sidebar-gradient: linear-gradient(180deg, var(--edu-purple-800) 0%, var(--edu-purple-600) 100%);

    /* Sidebar / cards (chat + LMS) */
    --edu-sidebar-card-bg: rgba(43, 179, 255, 0.08);
    --edu-sidebar-card-border: rgba(43, 179, 255, 0.22);
    --edu-sidebar-active-tint: rgba(124, 58, 237, 0.08);
    --edu-sidebar-accent-bar: var(--edu-purple-600);
}

/* Zippy mascot (shared landing + chat) */
.zippy-character {
    --zc-ink: #26262B;
    --zc-amber: #E8A862;
    --zc-mint: #CFE6EC;
    --zc-coral: #E8536B;

    display: inline-block;
    width: 200px;
    aspect-ratio: 200 / 220;
}

.zippy-character svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.zippy-character .zc-eye {
    transform-box: fill-box;
    animation: zc-blink 4.6s ease-in-out infinite;
}

.zippy-character .zc-eye:nth-of-type(2) {
    animation-delay: 0.03s;
}

.zippy-character .zc-arm-wave {
    transform-box: view-box;
    animation: zc-wave 6s ease-in-out infinite;
}

@keyframes zc-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    96%           { transform: scaleY(0.08); }
}

@keyframes zc-wave {
    0%, 18%, 100% { transform: rotate(0deg); }
    3%  { transform: rotate(-20deg); }
    6%  { transform: rotate(16deg); }
    9%  { transform: rotate(-14deg); }
    12% { transform: rotate(10deg); }
    15% { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .zippy-character .zc-eye,
    .zippy-character .zc-arm-wave {
        animation: none !important;
    }
}

/* Bootstrap overrides on themed surfaces */
.edu-themed .btn-primary,
.alt-landing-body .btn-primary,
.tutorly-chat-page .btn-primary,
.lms-body .btn-primary {
    background: var(--edu-cta-gradient);
    border: none;
    color: var(--edu-white);
    font-weight: 700;
    border-radius: var(--edu-radius-btn);
    box-shadow: var(--edu-shadow-soft);
}

.edu-themed .btn-primary:hover,
.alt-landing-body .btn-primary:hover,
.tutorly-chat-page .btn-primary:hover,
.lms-body .btn-primary:hover {
    background: linear-gradient(135deg, #ff4a7d 0%, #ff7a45 100%);
    color: var(--edu-white);
    border: none;
}

.edu-themed .btn-outline-primary,
.alt-landing-body .btn-outline-primary,
.tutorly-chat-page .btn-outline-primary,
.lms-body .btn-outline-primary {
    border-color: var(--edu-purple-600);
    color: var(--edu-purple-600);
    border-radius: var(--edu-radius-btn);
    font-weight: 700;
}

.edu-themed .btn-outline-primary:hover,
.alt-landing-body .btn-outline-primary:hover,
.tutorly-chat-page .btn-outline-primary:hover,
.lms-body .btn-outline-primary:hover {
    background: var(--edu-purple-50);
    border-color: var(--edu-purple-700);
    color: var(--edu-purple-700);
}

.edu-themed .text-muted,
.lms-body .text-muted {
    color: var(--edu-muted) !important;
}

.edu-themed .badge.bg-primary,
.lms-body .badge.bg-primary {
    background: var(--edu-purple-600) !important;
}