/* ============================================================
   Blue Serenity Training : Design System V2
   ============================================================ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Design tokens ----------------------------------------- */
:root {
    --bg-primary:    #FAFAFA;
    --text-primary:  #1A1A2E;
    --accent-blue:   #2D5BE3;
    --success:       #16A34A;
    --danger:        #DC2626;
    --neutral:       #F1F5F9;

    /* Dark theme overrides (existing nav/body) */
    --bg-dark:  #070E1C;
    --bg-dark2: #0F2347;
}

/* ---- Base typography --------------------------------------- */
html {
    font-size: 16px;
}

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.15;
}

code, pre, kbd, .font-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

/* ---- Logo sizing ------------------------------------------- */
.site-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

/* ---- Profile field dark background (prevents browser white bg) --- */
.profile-field:not(:disabled) {
    background-color: rgba(13, 21, 38, 0.95);
}
.profile-field:-webkit-autofill,
.profile-field:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0d1526 inset;
    -webkit-text-fill-color: white;
}

/* ---- Accessibility: focus ring ----------------------------- */
*:focus-visible {
    outline: 2px solid #2D5BE3;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Accessibility: base font size via html (16px = 1rem) -- */
/* Do NOT override span/a/button, breaks Tailwind text-xs/sm utility classes */

/* ---- Quiz / feedback colours ------------------------------ */
.quiz-selected  { background-color: rgba(45,91,227,.12) !important; border-color: rgba(96,165,250,.5) !important; color: rgb(var(--accent2)); }
.quiz-correct   { background-color: rgba(22,163,74,.15); border-color: #16A34A; }
.quiz-incorrect { background-color: rgba(220,38,38,.15); border-color: #DC2626; }

/* ---- Badge difficulty colors ------------------------------ */
.badge-easy   { background: rgba(22,163,74,.15); color: #16A34A; border: 1px solid rgba(22,163,74,.3); }
.badge-medium { background: rgba(234,88,12,.15);  color: #EA580C; border: 1px solid rgba(234,88,12,.3); }
.badge-hard   { background: rgba(220,38,38,.15);  color: #DC2626; border: 1px solid rgba(220,38,38,.3); }

/* ---- Utility: chapter progress bar ------------------------ */
.progress-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2D5BE3, #60A5FA);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ---- SVG schema palette ----------------------------------- */
/* Use these classes in inline SVGs */
.svg-blue  { fill: #2D5BE3; }
.svg-navy  { fill: #1A1A2E; }
.svg-green { fill: #16A34A; }
.svg-red   { fill: #DC2626; }