/* bootstrap-theme.css
   JustSpillIt theme layer for Bootstrap 5.3.3
   - Only CSS variables (no component selectors)
   - Uses Bootstrap color mode variables (dark)
*/

:root,
[data-bs-theme="dark"] {
    /* --- Brand palette (your source of truth) --- */
    --jsi-bg: #121212;
    --jsi-bg-top: #171717;
    --jsi-fg: #f1f1ee;
    --jsi-muted: rgba(241, 241, 238, 0.72);
    --jsi-border: rgba(241, 241, 238, 0.14);
    --jsi-surface: rgba(255, 255, 255, 0.04);
    --jsi-surface-2: rgba(255, 255, 255, 0.06);

    --jsi-blue: #6b8fcf;
    --jsi-blue-soft: rgba(107, 143, 207, 0.22);
    --jsi-blue-ring: rgba(107, 143, 207, 0.35);

    --jsi-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* --- Bootstrap core (body / typography) --- */
    --bs-font-sans-serif: var(--jsi-font);

    --bs-body-bg: var(--jsi-bg);
    --bs-body-color: var(--jsi-fg);

    /* RGB companions used by Bootstrap in many places */
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-body-color-rgb: 241, 241, 238;

    /* Text emphasis / muted */
    --bs-emphasis-color: var(--jsi-fg);
    --bs-emphasis-color-rgb: 241, 241, 238;

    --bs-secondary-color: var(--jsi-muted);
    --bs-secondary-color-rgb: 241, 241, 238;

    --bs-tertiary-color: rgba(241, 241, 238, 0.55);
    --bs-tertiary-color-rgb: 241, 241, 238;

    /* --- Surfaces / backgrounds used by components --- */
    --bs-secondary-bg: var(--jsi-bg-top);
    --bs-secondary-bg-rgb: 23, 23, 23;

    --bs-tertiary-bg: rgba(255, 255, 255, 0.03);
    --bs-tertiary-bg-rgb: 255, 255, 255;

    /* Cards, dropdowns, modals, etc often use these */
    --bs-body-bg-subtle: rgba(255, 255, 255, 0.03);
    --bs-body-color-subtle: rgba(241, 241, 238, 0.9);

    /* --- Borders --- */
    --bs-border-color: var(--jsi-border);
    --bs-border-color-translucent: rgba(241, 241, 238, 0.14);

    /* --- Links --- */
    --bs-link-color: rgba(241, 241, 238, 0.9);
    --bs-link-hover-color: var(--jsi-fg);

    /* --- Brand / Primary --- */
    --bs-primary: var(--jsi-blue);
    --bs-primary-rgb: 107, 143, 207;

    /* Optional: tune "subtle" backgrounds for primary utility classes */
    --bs-primary-text-emphasis: rgba(241, 241, 238, 0.92);
    --bs-primary-bg-subtle: rgba(107, 143, 207, 0.10);
    --bs-primary-border-subtle: rgba(107, 143, 207, 0.28);

    /* --- Focus ring --- */
    --bs-focus-ring-color: var(--jsi-blue-ring);
    --bs-focus-ring-width: 0.2rem;

    /* --- Forms --- */
    /* Bootstrap uses these widely across inputs */
    --bs-form-control-bg: var(--jsi-surface);
    --bs-form-control-color: var(--jsi-fg);
    --bs-form-control-border-color: var(--jsi-border);
    --bs-form-control-focus-border-color: rgba(107, 143, 207, 0.55);

    /* Placeholder */
    --bs-form-control-placeholder-color: rgba(241, 241, 238, 0.5);

    /* --- Buttons (shape via variables where possible) --- */
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.75rem;
    --bs-border-radius-lg: 0.9rem;
    --bs-border-radius-pill: 50rem;

    /* --- Alerts (so alert-light works calmly on dark) --- */
    /* Bootstrap alert-* relies on these emphasis/subtle vars */
    --bs-light-text-emphasis: rgba(241, 241, 238, 0.92);
    --bs-light-bg-subtle: rgba(255, 255, 255, 0.04);
    --bs-light-border-subtle: rgba(241, 241, 238, 0.14);

    /* --- Nav / dropdown emphasis tweaks --- */
    --bs-nav-link-color: rgba(241, 241, 238, 0.92);
    --bs-nav-link-hover-color: var(--jsi-fg);

    /* Dropdowns, list-groups, etc */
    --bs-dropdown-bg: rgba(255, 255, 255, 0.04);
    --bs-dropdown-link-color: rgba(241, 241, 238, 0.92);
    --bs-dropdown-link-hover-color: var(--jsi-fg);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-dropdown-border-color: var(--jsi-border);

    /* --- Semantic states (calmer, JustSpillIt tone) --- */
    --bs-success: #5aa884;
    --bs-success-rgb: 90, 168, 132;
    --bs-success-text-emphasis: rgba(241, 241, 238, 0.92);
    --bs-success-bg-subtle: rgba(90, 168, 132, 0.12);
    --bs-success-border-subtle: rgba(90, 168, 132, 0.28);

    --bs-info: #6b8fcf; /* align info with your brand blue */
    --bs-info-rgb: 107, 143, 207;
    --bs-info-text-emphasis: rgba(241, 241, 238, 0.92);
    --bs-info-bg-subtle: rgba(107, 143, 207, 0.12);
    --bs-info-border-subtle: rgba(107, 143, 207, 0.28);

    --bs-warning: #d3b36b;
    --bs-warning-rgb: 211, 179, 107;
    --bs-warning-text-emphasis: rgba(241, 241, 238, 0.92);
    --bs-warning-bg-subtle: rgba(211, 179, 107, 0.12);
    --bs-warning-border-subtle: rgba(211, 179, 107, 0.28);

    --bs-danger: #d07a73;
    --bs-danger-rgb: 208, 122, 115;
    --bs-danger-text-emphasis: rgba(241, 241, 238, 0.92);
    --bs-danger-bg-subtle: rgba(208, 122, 115, 0.12);
    --bs-danger-border-subtle: rgba(208, 122, 115, 0.28);
}