/* ============================================================
   Dark theme.  html[data-theme="dark"] is set by app.js
   (either explicitly or from the system preference).
   ============================================================ */

html[data-theme="dark"] {
    --bg:            #0f1115;
    --bg-soft:       #0b0d11;
    --surface:       #171a21;
    --surface-2:     #14161c;
    --surface-3:     #1e222b;
    --overlay:       rgba(0, 0, 0, .6);

    --text:          #e6e8ee;
    --text-strong:   #f5f6fa;
    --muted:         #9aa1b1;
    --muted-2:       #6c7385;
    --on-primary:    #ffffff;

    --border:        #232833;
    --border-strong: #333a48;

    --primary:       #f0323a;
    --primary-dark:  #c81a22;
    --primary-soft:  rgba(240, 50, 58, .13);
    --primary-ring:  rgba(240, 50, 58, .26);

    --success:       #34d399;
    --success-soft:  rgba(52, 211, 153, .13);
    --warning:       #fbbf24;
    --warning-soft:  rgba(251, 191, 36, .13);
    --danger:        #f87171;
    --danger-soft:   rgba(248, 113, 113, .13);
    --info:          #60a5fa;
    --info-soft:     rgba(96, 165, 250, .13);
    --violet:        #a78bfa;
    --violet-soft:   rgba(167, 139, 250, .13);
    --teal:          #2dd4bf;
    --teal-soft:     rgba(45, 212, 191, .13);

    --code-bg:       #0c0e13;
    --code-bg-2:     #12151b;
    --code-text:     #e7e9ee;
    --code-border:   #222733;
    --code-gutter:   #4d556a;

    --shadow-xs:     0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm:     0 2px 8px rgba(0, 0, 0, .45);
    --shadow:        0 8px 26px rgba(0, 0, 0, .5);
    --shadow-lg:     0 22px 56px rgba(0, 0, 0, .62);

    --fam-summary-b: rgba(3, 105, 161, .13);
    --fam-summary-a: #38bdf8;
    --fam-table-b:   rgba(124, 58, 237, .13);
    --fam-table-a:   #a78bfa;
    --fam-steps-b:   rgba(180, 83, 9, .13);
    --fam-steps-a:   #fbbf24;
    --fam-lines-b:   rgba(8, 145, 178, .13);
    --fam-lines-a:   #22d3ee;
    --fam-explain-a: #9aa8c0;
    --fam-explain-b: rgba(154, 168, 192, .09);
    --fam-callout-a: #fbbf24;
    --fam-callout-b: rgba(251, 191, 36, .1);
    --fam-exam-a:    #a78bfa;
    --fam-exam-b:    rgba(167, 139, 250, .1);
    --fam-practice-a:#2dd4bf;
    --fam-practice-b:rgba(45, 212, 191, .1);
    --fam-concept-a: #60a5fa;
}

html[data-theme="dark"] mark { background: rgba(251, 191, 36, .28); color: var(--text); }
html[data-theme="dark"] .md-code { color: #ffa8ad; background: var(--surface-3); }
html[data-theme="dark"] .note-item { background: rgba(251, 191, 36, .09); border-color: rgba(251, 191, 36, .25); }
html[data-theme="dark"] .auth-aside {
    background:
        radial-gradient(900px 500px at 12% 8%, rgba(255,255,255,.08), transparent 62%),
        linear-gradient(150deg, #5c0a0e, #2a0507 68%, #120203);
}
html[data-theme="dark"] .adm-hero { background: linear-gradient(135deg, #7d0d12, #45080c 55%, #1a0305); }
html[data-theme="dark"] .brand-mark { box-shadow: 0 4px 14px rgba(240, 50, 58, .3); }
html[data-theme="dark"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
}
html[data-theme="dark"] img.photo { filter: brightness(.92); }

/* keep the theme flash away before app.js runs */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }