/* ── Theme: ProtocolDock ─────────────────────────────────────── */
/* Matches protocoldock.com frontend: clean white, indigo accent */
/* Logo is dark — visible on white background                    */
:root {
    --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-heading: 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* All backgrounds are white/very light — logo visible */
    --bg:       #ffffff;
    --surface:  #f8fafc;
    --card-bg:  #ffffff;
    --input-bg: #f8fafc;

    /* Text: very dark — high contrast on white */
    --text:       #0f172a;
    --text-muted: #475569;
    --heading:    #0f172a;

    /* Indigo accent — matches PD brand */
    --accent:       #4f46e5;
    --accent-hover: #4338ca;
    --accent-dark:  #3730a3;
    --accent-bg:    #eef2ff;
    --accent-light: #818cf8;

    --border:  #e2e8f0;
    --gold:    #f59e0b;

    /* Navigation: WHITE background, dark text — exactly like the screenshot */
    --nav-bg:             #ffffff;
    --nav-border:         #e2e8f0;
    --nav-shadow:         rgba(0,0,0,0.06);
    --nav-brand:          #0f172a;
    --nav-link:           #475569;
    --nav-link-active:    #4f46e5;
    --nav-link-active-bg: #eef2ff;
    --nav-toggle-border:  #cbd5e1;
    --nav-toggle-color:   #475569;

    /* Hero: WHITE background, dark text — like the PD marketing hero */
    --hero-bg:       #ffffff;
    --hero-overlay:  none;
    --hero-h1:       #0f172a;
    --hero-sub:      #475569;
    --hero-body:     #64748b;
    --hero-accent-text: #4f46e5;
    --hero-tag-bg:   #eef2ff;
    --hero-tag-border: #c7d2fe;
    --hero-tag-color: #4f46e5;
    --hero-stats-bg:     #f8fafc;
    --hero-stats-border: #e2e8f0;

    /* ProtocolDock page hero: white so logo is clear */
    --pd-hero-bg:      #ffffff;
    --pd-hero-border:  #e2e8f0;
    --pd-hero-heading: #0f172a;
    --pd-hero-sub:     #475569;
    --pd-hero-muted:   #94a3b8;

    --card-shadow:       0 1px 4px rgba(0,0,0,0.06);
    --card-shadow-hover: 0 6px 20px rgba(0,0,0,0.09);

    /* Footer: dark navy like PD's footer */
    --footer-text:       rgba(255,255,255,0.7);
    --footer-link:       rgba(255,255,255,0.7);
    --footer-link-hover: #ffffff;

    --alert-ok-bg: #f0fdf4; --alert-ok-border: #16a34a; --alert-ok-text: #166534;
    --alert-err-bg: #fef2f2; --alert-err-border: #dc2626; --alert-err-text: #991b1b;
}

/* PD theme: nav has light background so adjust btn-dark contrast */
body.theme-protocoldock .btn-dark {
    border-color: #cbd5e1;
    color:        #64748b;
}
body.theme-protocoldock .btn-dark:hover { color: #0f172a; border-color: #94a3b8; }

/* PD theme: page-header text is dark (not white) since hero is white */
body.theme-protocoldock .page-header-desc { color: #64748b; }

html[data-mode="dark"] {
    --bg:       #0f172a;
    --surface:  #1e293b;
    --card-bg:  #1e293b;
    --input-bg: #0f172a;

    --text:       #e2e8f0;
    --text-muted: #94a3b8;
    --heading:    #f8fafc;

    --accent:       #818cf8;
    --accent-hover: #a5b4fc;
    --accent-dark:  #6366f1;
    --accent-bg:    rgba(129,140,248,0.15);
    --accent-light: #c7d2fe;

    --border: #334155;

    /* Dark mode: sidebar goes dark */
    --nav-bg:             #1e293b;
    --nav-border:         #334155;
    --nav-shadow:         rgba(0,0,0,0.3);
    --nav-brand:          #f8fafc;
    --nav-link:           #94a3b8;
    --nav-link-active:    #818cf8;
    --nav-link-active-bg: rgba(129,140,248,0.15);
    --nav-toggle-border:  #475569;
    --nav-toggle-color:   #94a3b8;

    --hero-bg:       #0f172a;
    --hero-h1:       #f8fafc;
    --hero-sub:      rgba(248,250,252,0.72);
    --hero-body:     rgba(248,250,252,0.8);
    --hero-accent-text: #a5b4fc;
    --hero-tag-bg:   rgba(129,140,248,0.15);
    --hero-tag-border: rgba(129,140,248,0.3);
    --hero-tag-color: #a5b4fc;
    --hero-stats-bg:     rgba(255,255,255,0.05);
    --hero-stats-border: rgba(255,255,255,0.08);

    --pd-hero-bg:      #0d1117;
    --pd-hero-border:  rgba(255,255,255,0.06);
    --pd-hero-heading: #f8fafc;
    --pd-hero-sub:     rgba(248,250,252,0.7);
    --pd-hero-muted:   rgba(248,250,252,0.45);

    --card-shadow:       0 1px 6px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 6px 20px rgba(0,0,0,0.4);

    --footer-text: rgba(255,255,255,0.6);
    --footer-link: rgba(255,255,255,0.6);

    --alert-ok-bg: rgba(22,163,74,0.15); --alert-ok-text: #86efac;
    --alert-err-bg: rgba(220,38,38,0.15); --alert-err-text: #fca5a5;
}

html[data-mode="dark"] body.theme-protocoldock .btn-dark {
    border-color: #475569;
    color:        #94a3b8;
}