/*------------------------------------------------------------------
  Mailbox design tokens — light / dark via [data-bs-theme]
  Load after Bootstrap, before mailbox.css
-------------------------------------------------------------------*/
:root {
    --mb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mb-font-display: "Outfit", var(--mb-font-sans);
    --mb-radius: 10px;
    --mb-radius-sm: 6px;
    --mb-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    --mb-shadow-lg: 0 12px 48px rgba(15, 23, 42, 0.12);
    --mb-bg: #eef2f7;
    --mb-bg-elevated: #e4e9f1;
    --mb-surface: #ffffff;
    --mb-surface-2: #f8fafc;
    --mb-text: #1e293b;
    --mb-text-muted: #64748b;
    --mb-border: rgba(15, 23, 42, 0.08);
    --mb-border-strong: rgba(15, 23, 42, 0.12);
    --mb-accent: #0d9488;
    --mb-accent-hover: #0f766e;
    --mb-accent-soft: rgba(13, 148, 136, 0.12);
    --mb-accent-contrast: #ffffff;
    --mb-nav-rail: #0f172a;
    --mb-nav-rail-text: #e2e8f0;
    --mb-navbar-bar: #ffffff;
    --mb-danger: #dc2626;
    --mb-link: #0d9488;
    --mb-row-hover: rgba(13, 148, 136, 0.06);
    --mb-unread-bar: var(--mb-accent);
    --mb-text-snippet: #64748b;
    --mb-tag-bg: var(--mb-surface-2);
    --mb-tag-border: var(--mb-border-strong);
    --bs-body-bg: var(--mb-bg);
    --bs-body-color: var(--mb-text);
    --bs-border-color: var(--mb-border-strong);
    --bs-primary: var(--mb-accent);
    --bs-primary-rgb: 13, 148, 136;
    --bs-secondary-color: var(--mb-text-muted);
    --bs-tertiary-bg: var(--mb-surface-2);
}

[data-bs-theme="dark"] {
    --mb-bg: #0b0f14;
    --mb-bg-elevated: #12181f;
    --mb-surface: #141b24;
    --mb-surface-2: #1a2330;
    --mb-text: #e8edf4;
    /* Brighter than slate-400 for readable meta/snippet text on dark surfaces */
    --mb-text-muted: #b8c9dc;
    --mb-text-snippet: #c9d6e8;
    --mb-border: rgba(248, 250, 252, 0.08);
    --mb-border-strong: rgba(248, 250, 252, 0.12);
    --mb-accent: #2dd4bf;
    --mb-accent-hover: #5eead4;
    --mb-accent-soft: rgba(45, 212, 191, 0.15);
    --mb-accent-contrast: #0f172a;
    --mb-nav-rail: #06080c;
    --mb-nav-rail-text: #cbd5e1;
    --mb-navbar-bar: rgba(20, 27, 36, 0.92);
    --mb-danger: #f87171;
    --mb-link: #2dd4bf;
    --mb-row-hover: rgba(45, 212, 191, 0.08);
    --mb-unread-bar: #2dd4bf;
    /* Label/tag chips on dark panels */
    --mb-tag-bg: color-mix(in srgb, var(--mb-surface-2) 92%, var(--mb-accent) 8%);
    --mb-tag-border: rgba(45, 212, 191, 0.22);
    --mb-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --mb-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
    --bs-body-bg: var(--mb-bg);
    --bs-body-color: var(--mb-text);
    --bs-border-color: var(--mb-border-strong);
    --bs-primary: var(--mb-accent);
    --bs-primary-rgb: 45, 212, 191;
    --bs-secondary-color: var(--mb-text-muted);
    --bs-tertiary-bg: var(--mb-surface-2);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --mb-motion-duration: 0.01ms;
    }
}