/* ═══════════════════════════════════════════════════════════════════
   tokens/bootstrap-map.css

   Bootstrap framework integration — maps semantic tokens to
   Bootstrap's CSS custom properties.

   This is the "glue layer" between our design system and Bootstrap.
   Bootstrap variables represent semantic UI meaning, not raw palette.

   Load AFTER semantic.css.
   ═══════════════════════════════════════════════════════════════════ */

@layer tokens {
    :root {
        /* ══ BOOTSTRAP COLOR MODES ═════════════════════════════════ */
        /* Bootstrap expects these for its internal components */
        --bs-body-bg: var(--surface-bg);
        --bs-body-color: var(--color-text-base);
        --bs-heading-color: var(--color-text-heading);
        --bs-border-color: var(--border-base);
        --bs-font-sans-serif: var(--font-family-sans);

        /* ══ BOOTSTRAP SEMANTIC COLORS ════════════════════════════ */
        /* Map to our semantic tokens, not primitives */
        --bs-primary: var(--color-primary);
        --bs-primary-rgb: 99, 102, 241;
        --bs-secondary: var(--color-gray-500);
        --bs-success: var(--color-success);
        --bs-info: var(--color-info);
        --bs-warning: var(--color-warning);
        --bs-danger: var(--color-danger);
        --bs-light: var(--surface-muted);
        --bs-dark: var(--color-gray-900);

        /* ══ BOOTSTRAP TYPOGRAPHY ═════════════════════════════════ */
        --bs-body-font-family: var(--font-family-sans);
        --bs-body-font-size: var(--font-size-base);
        --bs-body-font-weight: var(--font-weight-normal);
        --bs-body-line-height: 1.5;

        /* ══ BOOTSTRAP BORDERS ════════════════════════════════════ */
        --bs-border-width: 1px;
        --bs-border-style: solid;
        --bs-border-radius: var(--radius-md);
        --bs-border-radius-lg: var(--radius-lg);
        --bs-border-radius-sm: var(--radius-sm);

        /* ══ BOOTSTRAP SHADOWS ════════════════════════════════════ */
        --bs-box-shadow: var(--shadow-sm);
        --bs-box-shadow-sm: var(--shadow-sm);
        --bs-box-shadow-lg: var(--shadow-lg);

        /* ══ BOOTSTRAP FOCUS RING ═════════════════════════════════ */
        --bs-focus-ring-width: 0.25rem;
        --bs-focus-ring-opacity: 0.25;
        --bs-focus-ring-color: rgba(99, 102, 241, 0.25);

        /* ══ BOOTSTRAP FORM VALIDATION ════════════════════════════ */
        /* `*-color` is the TEXT below the field — use `*-dark` token so
           the message reads with ~5:1 contrast on white in light mode
           and the same on dark in dark mode (the `-dark` token flips to
           the brighter base in dark, see tokens/semantic.css).
           `*-border-color` is the field outline — `--color-success` etc.
           are fine as outline colours in both themes. */
        --bs-form-valid-color: var(--color-success-dark);
        --bs-form-valid-border-color: var(--color-success);
        --bs-form-invalid-color: var(--color-danger-dark);
        --bs-form-invalid-border-color: var(--color-danger);
    }

    /* ══ DARK THEME BOOTSTRAP OVERRIDES ═══════════════════════════ */
    [data-bs-theme="dark"] {
        --bs-body-bg: var(--surface-bg);
        --bs-body-color: var(--color-text-base);
        --bs-heading-color: var(--color-text-heading);
        --bs-border-color: var(--border-base);
        --bs-secondary-color: var(--color-text-muted);
        --bs-tertiary-color: var(--color-text-muted);

        /* ── `.text-dark` lights up in dark theme ──────────────────
           `--bs-dark` is mapped to `--color-gray-900` (always dark) so
           a `.text-dark` element sitting on a dark page is invisible.
           Remap to the inverse-aware heading colour. `.bg-dark` keeps
           using the literal `--bs-dark` so dark fills stay dark. */
        --bs-dark-rgb: 231, 234, 240;
    }
    [data-bs-theme="dark"] .text-dark {
        color: var(--color-text-heading) !important;
    }

    /* ── Status text utilities — direct dark overrides ──────────────
       The earlier approach remapped `--bs-X-rgb` globally for dark
       theme, which over-reached: Bootstrap's `.bg-X` and `.text-bg-X`
       also use those rgb tokens for BACKGROUNDS, and with the rgb
       remapped brighter the white text Bootstrap puts on those
       backgrounds drops to ~2.3:1 (e.g. white on lime). Scope the fix
       narrowly to the `.text-X` text utilities only — that's the only
       place where Bootstrap's vendor-default dark hex was the visible
       contrast problem. Form valid/invalid feedback already uses
       `--color-X-dark` (Class 1) which is theme-aware. */
    [data-bs-theme="dark"] .text-success { color: #4ade80 !important; }
    [data-bs-theme="dark"] .text-warning { color: #fbbf24 !important; }
    [data-bs-theme="dark"] .text-danger  { color: #f87171 !important; }
    [data-bs-theme="dark"] .text-info    { color: #60a5fa !important; }
    [data-bs-theme="dark"] .text-primary { color: #818cf8 !important; }

    /* ── btn-outline-* — dark-mode contrast fix ─────────────────────
       Bootstrap hardcodes Bootstrap-5 dark hex values directly on each
       `.btn-outline-X` selector (`--bs-btn-color: #198754` etc.) so
       text + border disappear on a dark page (~2.2:1). Same hex values
       as the `.text-X` overrides above. */
    [data-bs-theme="dark"] .btn-outline-success {
        --bs-btn-color: #4ade80;
        --bs-btn-border-color: #4ade80;
        --bs-btn-hover-bg: #4ade80;
        --bs-btn-hover-border-color: #4ade80;
        --bs-btn-active-bg: #4ade80;
        --bs-btn-active-border-color: #4ade80;
        --bs-btn-disabled-color: #4ade80;
        --bs-btn-disabled-border-color: #4ade80;
        --bs-btn-focus-shadow-rgb: 74, 222, 128;
    }
    [data-bs-theme="dark"] .btn-outline-warning {
        --bs-btn-color: #fbbf24;
        --bs-btn-border-color: #fbbf24;
        --bs-btn-hover-bg: #fbbf24;
        --bs-btn-hover-border-color: #fbbf24;
        --bs-btn-active-bg: #fbbf24;
        --bs-btn-active-border-color: #fbbf24;
        --bs-btn-disabled-color: #fbbf24;
        --bs-btn-disabled-border-color: #fbbf24;
        --bs-btn-focus-shadow-rgb: 251, 191, 36;
    }
    [data-bs-theme="dark"] .btn-outline-danger {
        --bs-btn-color: #f87171;
        --bs-btn-border-color: #f87171;
        --bs-btn-hover-bg: #f87171;
        --bs-btn-hover-border-color: #f87171;
        --bs-btn-active-bg: #f87171;
        --bs-btn-active-border-color: #f87171;
        --bs-btn-disabled-color: #f87171;
        --bs-btn-disabled-border-color: #f87171;
        --bs-btn-focus-shadow-rgb: 248, 113, 113;
    }
    [data-bs-theme="dark"] .btn-outline-info {
        --bs-btn-color: #60a5fa;
        --bs-btn-border-color: #60a5fa;
        --bs-btn-hover-bg: #60a5fa;
        --bs-btn-hover-border-color: #60a5fa;
        --bs-btn-active-bg: #60a5fa;
        --bs-btn-active-border-color: #60a5fa;
        --bs-btn-disabled-color: #60a5fa;
        --bs-btn-disabled-border-color: #60a5fa;
        --bs-btn-focus-shadow-rgb: 96, 165, 250;
    }
    [data-bs-theme="dark"] .btn-outline-primary {
        --bs-btn-color: #818cf8;
        --bs-btn-border-color: #818cf8;
        --bs-btn-hover-bg: #818cf8;
        --bs-btn-hover-border-color: #818cf8;
        --bs-btn-active-bg: #818cf8;
        --bs-btn-active-border-color: #818cf8;
        --bs-btn-disabled-color: #818cf8;
        --bs-btn-disabled-border-color: #818cf8;
        --bs-btn-focus-shadow-rgb: 129, 140, 248;
    }
}