/* SnapBrain design system — Mist & Ink
   Cool atmospheric surfaces, deep ink type, teal accent.
   Shared by Web + MAUI Blazor hosts. */

:root {
    /* Brand / accent */
    --sb-accent: #0f766e;
    --sb-accent-hover: #0d9488;
    --sb-accent-deep: #115e59;
    --sb-accent-soft: #ecfdf8;
    --sb-accent-muted: #ccfbf1;
    --sb-accent-border: #99f6e4;
    --sb-accent-glow: rgba(15, 118, 110, 0.14);

    /* Ink & neutrals */
    --sb-ink: #0f172a;
    --sb-ink-soft: #1e293b;
    --sb-muted: #64748b;
    --sb-muted-soft: #94a3b8;
    --sb-line: #e2e8f0;
    --sb-line-strong: #cbd5e1;
    --sb-surface: #ffffff;
    --sb-surface-soft: #f8fafc;
    --sb-surface-muted: #f1f5f9;
    --sb-page: #f4f7fb;
    --sb-surface-glass: rgba(255, 255, 255, 0.88);
    --sb-overlay: rgba(15, 23, 42, 0.42);
    --sb-on-accent: #ffffff;
    --sb-muted-strong: #475569;
    --sb-page-glow:
        radial-gradient(1200px 600px at 12% -10%, rgba(45, 212, 191, 0.18), transparent 55%),
        radial-gradient(900px 500px at 88% 0%, rgba(14, 165, 233, 0.12), transparent 50%),
        radial-gradient(700px 420px at 50% 100%, rgba(15, 118, 110, 0.08), transparent 55%),
        linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);

    /* Semantic */
    --sb-success: #059669;
    --sb-success-soft: #ecfdf5;
    --sb-success-border: #a7f3d0;
    --sb-warning: #d97706;
    --sb-warning-soft: #fffbeb;
    --sb-warning-border: #fde68a;
    --sb-danger: #dc2626;
    --sb-danger-soft: #fef2f2;
    --sb-danger-border: #fecaca;
    --sb-info: #0284c7;
    --sb-info-soft: #f0f9ff;
    --sb-info-border: #bae6fd;

    /* Domain accents (vocab / grammar / AI) */
    --sb-vocab: #0f766e;
    --sb-vocab-soft: #ecfdf8;
    --sb-grammar: #0369a1;
    --sb-grammar-soft: #e0f2fe;
    --sb-ai: #0d9488;
    --sb-ai-soft: #f0fdfa;

    /* Layout */
    --sb-radius-sm: 10px;
    --sb-radius: 14px;
    --sb-radius-lg: 18px;
    --sb-radius-xl: 22px;
    --sb-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --sb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --sb-focus: 0 0 0 3px rgba(13, 148, 136, 0.28);

    /* Typography */
    --sb-font-display: "Sora", "Segoe UI", sans-serif;
    --sb-font-body: "Manrope", "Segoe UI", sans-serif;

    /* Action buttons (web app.css may refine) */
    --sb-action-btn-height: 48px;
    --sb-action-btn-radius: 14px;
    --sb-action-btn-font-size: 0.95rem;
    --sb-action-btn-padding-x: 1.1rem;

    /* Motion */
    --sb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sb-duration: 220ms;

    color-scheme: light;
}

html[data-theme="dark"] {
    --sb-accent: #14b8a6;
    --sb-accent-hover: #2dd4bf;
    --sb-accent-deep: #5eead4;
    --sb-accent-soft: #134e4a;
    --sb-accent-muted: #115e59;
    --sb-accent-border: #1f766e;
    --sb-accent-glow: rgba(45, 212, 191, 0.22);

    --sb-ink: #f1f5f9;
    --sb-ink-soft: #e2e8f0;
    --sb-muted: #94a3b8;
    --sb-muted-soft: #64748b;
    --sb-muted-strong: #cbd5e1;
    --sb-line: #1e293b;
    --sb-line-strong: #334155;
    --sb-surface: #111827;
    --sb-surface-soft: #0f172a;
    --sb-surface-muted: #1e293b;
    --sb-page: #0b1220;
    --sb-surface-glass: rgba(17, 24, 39, 0.86);
    --sb-overlay: rgba(2, 6, 23, 0.72);
    --sb-on-accent: #ffffff;
    --sb-page-glow:
        radial-gradient(1000px 520px at 10% -8%, rgba(45, 212, 191, 0.12), transparent 55%),
        radial-gradient(800px 480px at 92% 0%, rgba(56, 189, 248, 0.08), transparent 50%),
        radial-gradient(640px 400px at 50% 110%, rgba(15, 118, 110, 0.12), transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #020617 100%);

    --sb-success: #34d399;
    --sb-success-soft: #064e3b;
    --sb-success-border: #047857;
    --sb-warning: #fbbf24;
    --sb-warning-soft: #422006;
    --sb-warning-border: #b45309;
    --sb-danger: #f87171;
    --sb-danger-soft: #450a0a;
    --sb-danger-border: #7f1d1d;
    --sb-info: #38bdf8;
    --sb-info-soft: #0c4a6e;
    --sb-info-border: #0369a1;

    --sb-vocab: #2dd4bf;
    --sb-vocab-soft: #134e4a;
    --sb-grammar: #38bdf8;
    --sb-grammar-soft: #0c4a6e;
    --sb-ai: #5eead4;
    --sb-ai-soft: #134e4a;

    --sb-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.38);
    --sb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --sb-focus: 0 0 0 3px rgba(45, 212, 191, 0.32);

    color-scheme: dark;
}

html,
body {
    background-color: var(--sb-page);
    background-image: var(--sb-page-glow);
    background-attachment: fixed;
    color: var(--sb-ink);
}

html[data-theme="dark"] .app-loading-progress-item {
    --item-bg: var(--sb-surface-muted);
    --item-stroke: var(--sb-line);
    --title-color: var(--sb-ink);
    --status-color: var(--sb-muted);
}

html[data-theme="dark"] .addcard-review-section-blue,
html[data-theme="dark"] .addcard-review-section-green,
html[data-theme="dark"] .addcard-review-section-pink,
html[data-theme="dark"] .addcard-review-section-purple,
html[data-theme="dark"] .addcard-review-section-gold,
html[data-theme="dark"] .addcard-review-section-orange,
html[data-theme="dark"] .addcard-review-section-lightblue,
html[data-theme="dark"] .addcard-review-section-mint,
html[data-theme="dark"] .addcard-review-section-rose,
html[data-theme="dark"] .addcard-review-section-lilac,
html[data-theme="dark"] .addcard-review-section-teal,
html[data-theme="dark"] .review-section-blue,
html[data-theme="dark"] .review-section-green,
html[data-theme="dark"] .review-section-pink,
html[data-theme="dark"] .review-section-purple,
html[data-theme="dark"] .review-section-gold,
html[data-theme="dark"] .review-section-orange,
html[data-theme="dark"] [class*="editcard-section-"] {
    background: var(--sb-surface-muted);
}

@keyframes sb-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sb-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sb-dot-pulse {
    0%,
    80%,
    100% {
        transform: scale(0.65);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.fa-solid {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.fa-regular {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}

@font-face {
    font-family: "Font Awesome 6 Free";
    src: url("/_content/SnapBrain.Shared/fonts/fa-solid-900.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Font Awesome 6 Free";
    src: url("/_content/SnapBrain.Shared/fonts/fa-regular-400.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}