/* ===========================================================================
   Bootstrap 5.3 retheme.

   Maps the OCreate tokens onto Bootstrap's own custom properties. Bootstrap is
   kept rather than replaced because the ~30 scaffolded Identity pages under
   Components/Account are hard-coded to its classes (`form-floating`, `btn`,
   `is-invalid`, `form-check-input`). Rewriting them all would be a week's work;
   overriding its variables rebrands them for free.

   Must be loaded AFTER bootstrap.min.css and AFTER tokens.css.

   IMPORTANT: Bootstrap 5.3 does not derive component colors from --bs-primary.
   The `.btn-primary` rules are generated by the button-variant mixin at build
   time into component-scoped vars (--bs-btn-bg and friends). Overriding
   --bs-primary alone changes almost nothing visible — which is the usual reason
   a "Bootstrap theme" appears not to work. Components are overridden explicitly
   below.

   The *-rgb variables must be kept in sync by hand: Bootstrap composes them into
   rgba() for shadows and tints, and CSS cannot decompose a hex into channels.
   =========================================================================== */

:root,
[data-bs-theme="light"] {
    /* --- typography ------------------------------------------------------- */
    --bs-body-font-family: var(--oc-font-body);
    --bs-body-font-size: var(--oc-text-base);
    --bs-body-font-weight: var(--oc-weight-normal);
    --bs-body-line-height: var(--oc-leading-normal);

    /* --- core colors ---------------------------------------------------- */
    --bs-body-color: var(--oc-color-text);
    --bs-body-color-rgb: 28, 30, 33;
    --bs-body-bg: var(--oc-color-bg);
    --bs-body-bg-rgb: 255, 255, 255;

    --bs-emphasis-color: var(--oc-black);
    --bs-secondary-color: var(--oc-color-text-muted);
    --bs-secondary-bg: var(--oc-gray-100);
    --bs-tertiary-color: var(--oc-gray-400);
    --bs-tertiary-bg: var(--oc-gray-050);

    /* --- brand: orange ----------------------------------------------------
       --bs-primary is the accessible orange INK (#C2410C, 5.18:1), not the
       brand orange (#F1592A, 3.39:1). Bootstrap uses primary for small text and
       borders, where the brand value would fail AA. */
    --bs-primary: var(--oc-orange-ink);
    --bs-primary-rgb: 194, 65, 12;
    --bs-primary-text-emphasis: var(--oc-orange-800);
    --bs-primary-bg-subtle: var(--oc-orange-050);
    --bs-primary-border-subtle: var(--oc-orange-100);

    --bs-secondary: var(--oc-gray-600);
    --bs-secondary-rgb: 114, 114, 114;

    /* --- semantic: danger stays RED, deliberately -------------------------
       Red is no longer a brand color, which is precisely what makes it useful
       here: nothing else on the site is red, so red unambiguously means
       "something is wrong". */
    --bs-danger: var(--oc-color-danger);
    --bs-danger-rgb: 196, 18, 25;
    --bs-danger-text-emphasis: var(--oc-red-800);
    --bs-danger-bg-subtle: var(--oc-red-050);
    --bs-danger-border-subtle: var(--oc-red-100);

    --bs-success: var(--oc-color-success);
    --bs-success-rgb: 15, 123, 63;
    --bs-success-bg-subtle: var(--oc-green-050);

    --bs-warning: var(--oc-color-warning);
    --bs-warning-rgb: 161, 98, 7;
    --bs-warning-bg-subtle: var(--oc-amber-050);
    --bs-warning-border-subtle: var(--oc-amber-100);

    --bs-info: var(--oc-color-info);
    --bs-info-rgb: 3, 105, 161;
    --bs-info-bg-subtle: var(--oc-cyan-050);
    --bs-info-border-subtle: var(--oc-cyan-100);

    /* --- links use cyan ink (5.93:1) -------------------------------------- */
    --bs-link-color: var(--oc-color-link);
    --bs-link-color-rgb: 3, 105, 161;
    --bs-link-hover-color: var(--oc-color-link-hover);
    --bs-link-hover-color-rgb: 7, 89, 133;

    /* --- borders and radii ----------------------------------------------- */
    --bs-border-color: var(--oc-color-border);
    --bs-border-color-translucent: rgb(0 0 0 / 0.1);
    --bs-border-radius: var(--oc-radius-md);
    --bs-border-radius-sm: var(--oc-radius-sm);
    --bs-border-radius-lg: var(--oc-radius-lg);
    --bs-border-radius-xl: var(--oc-radius-xl);
    --bs-border-radius-pill: var(--oc-radius-pill);

    /* --- focus ring: brand cyan ------------------------------------------ */
    --bs-focus-ring-width: var(--oc-focus-width);
    --bs-focus-ring-opacity: 0.4;
    --bs-focus-ring-color: rgb(0 174 239 / 0.4);
}

/* ---------------------------------------------------------------------------
   Headings use the condensed display face. Bootstrap has no variable for the
   heading font, so this is a real rule rather than a token override.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--oc-font-display);
    font-weight: var(--oc-weight-semibold);
    line-height: var(--oc-leading-tight);
    letter-spacing: var(--oc-tracking-tight);
    color: var(--oc-color-text);
}

/* ---------------------------------------------------------------------------
   Buttons. Bootstrap's per-variant vars, so the Identity pages' submit buttons
   pick up the brand.
   --------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-family: var(--oc-font-body);
    --bs-btn-font-weight: var(--oc-weight-semibold);
    --bs-btn-border-radius: var(--oc-radius-md);
    transition: background-color var(--oc-duration-fast) var(--oc-ease-out),
                border-color var(--oc-duration-fast) var(--oc-ease-out),
                color var(--oc-duration-fast) var(--oc-ease-out);
}

/* White on orange ink measures 5.18:1 — passes AA. White on the brand orange
   would be 3.39:1, which fails for a button label. */
.btn-primary {
    --bs-btn-color: var(--oc-white);
    --bs-btn-bg: var(--oc-orange-ink);
    --bs-btn-border-color: var(--oc-orange-ink);
    --bs-btn-hover-color: var(--oc-white);
    --bs-btn-hover-bg: var(--oc-orange-800);
    --bs-btn-hover-border-color: var(--oc-orange-800);
    --bs-btn-active-color: var(--oc-white);
    --bs-btn-active-bg: var(--oc-orange-800);
    --bs-btn-active-border-color: var(--oc-orange-800);
    --bs-btn-disabled-color: var(--oc-white);
    --bs-btn-disabled-bg: var(--oc-gray-300);
    --bs-btn-disabled-border-color: var(--oc-gray-300);
    --bs-btn-focus-shadow-rgb: 0, 174, 239;
}

.btn-secondary {
    --bs-btn-color: var(--oc-white);
    --bs-btn-bg: var(--oc-gray-700);
    --bs-btn-border-color: var(--oc-gray-700);
    --bs-btn-hover-bg: var(--oc-gray-800);
    --bs-btn-hover-border-color: var(--oc-gray-800);
    --bs-btn-active-bg: var(--oc-gray-900);
    --bs-btn-active-border-color: var(--oc-gray-900);
    --bs-btn-focus-shadow-rgb: 0, 174, 239;
}

.btn-outline-primary {
    --bs-btn-color: var(--oc-orange-ink);
    --bs-btn-border-color: var(--oc-orange-ink);
    --bs-btn-hover-color: var(--oc-white);
    --bs-btn-hover-bg: var(--oc-orange-ink);
    --bs-btn-hover-border-color: var(--oc-orange-ink);
    --bs-btn-active-color: var(--oc-white);
    --bs-btn-active-bg: var(--oc-orange-800);
    --bs-btn-active-border-color: var(--oc-orange-800);
    --bs-btn-focus-shadow-rgb: 0, 174, 239;
}

.btn-lg {
    --bs-btn-font-size: var(--oc-text-lg);
    --bs-btn-padding-y: var(--oc-space-3);
    --bs-btn-padding-x: var(--oc-space-5);
}

/* ---------------------------------------------------------------------------
   Form controls. The Identity pages use `form-floating` throughout.
   --------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--oc-color-border-strong);
    border-radius: var(--oc-radius-md);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--oc-cyan-brand);
    box-shadow: var(--oc-shadow-focus);
}

.form-floating > label {
    color: var(--oc-color-text-muted);
}

.form-check-input {
    /* The stock template darkened this by hand because the default is too faint
       against white. Now it comes from a token. */
    border-color: var(--oc-color-border-strong);
}

.form-check-input:checked {
    background-color: var(--oc-orange-ink);
    border-color: var(--oc-orange-ink);
}

.form-check-input:focus {
    border-color: var(--oc-cyan-brand);
    box-shadow: var(--oc-shadow-focus);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--oc-orange-ink);
}

.form-range::-moz-range-thumb {
    background-color: var(--oc-orange-ink);
}

/* ---------------------------------------------------------------------------
   Validation. Blazor's EditForm emits its own `.valid`/`.invalid` classes
   alongside Bootstrap's — see site.css.
   --------------------------------------------------------------------------- */
.invalid-feedback,
.validation-message {
    color: var(--oc-color-danger);
    font-size: var(--oc-text-sm);
}

/* ---------------------------------------------------------------------------
   Alerts, used by StatusMessage.razor on every Identity page.
   --------------------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--oc-radius-md);
    border-width: 1px;
    border-left-width: 4px;
}

.alert-danger {
    --bs-alert-color: var(--oc-red-800);
    --bs-alert-bg: var(--oc-red-050);
    --bs-alert-border-color: var(--oc-red-ink);
}

.alert-success {
    --bs-alert-color: var(--oc-green-800);
    --bs-alert-bg: var(--oc-green-050);
    --bs-alert-border-color: var(--oc-color-success);
}

.alert-info {
    --bs-alert-color: var(--oc-cyan-800);
    --bs-alert-bg: var(--oc-cyan-050);
    --bs-alert-border-color: var(--oc-cyan-ink);
}

.alert-warning {
    --bs-alert-color: var(--oc-amber-ink);
    --bs-alert-bg: var(--oc-amber-050);
    --bs-alert-border-color: var(--oc-amber-brand);
}

/* ---------------------------------------------------------------------------
   Cards and nav-pills, used by the account management shell.
   --------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--oc-color-border);
    --bs-card-border-radius: var(--oc-radius-lg);
    --bs-card-inner-border-radius: var(--oc-radius-md);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--oc-radius-md);
    --bs-nav-pills-link-active-bg: var(--oc-orange-ink);
    --bs-nav-pills-link-active-color: var(--oc-white);
}

.nav-link {
    --bs-nav-link-color: var(--oc-color-link);
    --bs-nav-link-hover-color: var(--oc-color-link-hover);
    --bs-nav-link-font-weight: var(--oc-weight-medium);
}