/* ============================================================================
   Ramiant brand tokens — single source of truth for colors used app-wide.
   Loaded BEFORE section CSS (admin.css / client.css / auth.css) in every layout.
   Override Bootstrap 5 variables here so buttons, links, focus rings, pagination,
   form-controls, etc. all pick up the brand palette without per-component CSS.
   ============================================================================ */

:root {
    /* Brand palette */
    --ramiant-crimson:        #DE4B60;
    --ramiant-crimson-dark:   #B53B4D;
    --ramiant-crimson-darker: #8E2C3B;
    --ramiant-navy:           #0F172A;
    --ramiant-navy-soft:      #1E293B;
    --ramiant-ink:            #334155;
    --ramiant-mist:           #F8FAFC;
    --ramiant-line:           #E2E8F0;

    /* --- Bootstrap 5 variable overrides --- */
    --bs-primary:           #DE4B60;
    --bs-primary-rgb:       222, 75, 96;
    --bs-primary-text-emphasis: #8E2C3B;
    --bs-primary-bg-subtle:     #FCE6EA;
    --bs-primary-border-subtle: #F4B5BF;

    --bs-link-color:               #DE4B60;
    --bs-link-color-rgb:           222, 75, 96;
    --bs-link-hover-color:         #B53B4D;
    --bs-link-hover-color-rgb:     181, 59, 77;

    --bs-body-color:        #0F172A;
    --bs-body-color-rgb:    15, 23, 42;
    --bs-secondary-color:   #475569;
    --bs-tertiary-color:    #64748B;
    --bs-border-color:      #E2E8F0;

    --bs-focus-ring-color:  rgba(222, 75, 96, 0.25);
    --bs-focus-ring-width:  0.2rem;
}

/* ----- Buttons ----- */
.btn-primary {
    --bs-btn-bg:               #DE4B60;
    --bs-btn-border-color:     #DE4B60;
    --bs-btn-hover-bg:         #B53B4D;
    --bs-btn-hover-border-color:#B53B4D;
    --bs-btn-active-bg:        #8E2C3B;
    --bs-btn-active-border-color:#8E2C3B;
    --bs-btn-disabled-bg:      #DE4B60;
    --bs-btn-disabled-border-color:#DE4B60;
    --bs-btn-color:            #fff;
    --bs-btn-hover-color:      #fff;
    --bs-btn-active-color:     #fff;
    --bs-btn-focus-shadow-rgb: 222, 75, 96;
}

.btn-outline-primary {
    --bs-btn-color:            #DE4B60;
    --bs-btn-border-color:     #DE4B60;
    --bs-btn-hover-bg:         #DE4B60;
    --bs-btn-hover-border-color:#DE4B60;
    --bs-btn-active-bg:        #B53B4D;
    --bs-btn-active-border-color:#B53B4D;
    --bs-btn-focus-shadow-rgb: 222, 75, 96;
}

.btn-link {
    --bs-btn-color:        #DE4B60;
    --bs-btn-hover-color:  #B53B4D;
    --bs-btn-active-color: #8E2C3B;
}

/* ----- Links ----- */
a {
    color: var(--bs-link-color);
    text-decoration-color: rgba(222, 75, 96, 0.4);
}
a:hover {
    color: var(--bs-link-hover-color);
}

/* ----- Form controls (inputs, selects, textareas, checkboxes) ----- */
.form-control:focus,
.form-select:focus {
    border-color: #F4B5BF;
    box-shadow: 0 0 0 0.2rem rgba(222, 75, 96, 0.20);
}

.form-check-input:checked {
    background-color: #DE4B60;
    border-color: #DE4B60;
}
.form-check-input:focus {
    border-color: #F4B5BF;
    box-shadow: 0 0 0 0.2rem rgba(222, 75, 96, 0.20);
}

.form-switch .form-check-input:checked {
    background-color: #DE4B60;
    border-color: #DE4B60;
}

/* ----- Pagination ----- */
.pagination {
    --bs-pagination-color:             #334155;
    --bs-pagination-hover-color:       #B53B4D;
    --bs-pagination-hover-bg:          #FCE6EA;
    --bs-pagination-hover-border-color:#F4B5BF;
    --bs-pagination-focus-color:       #B53B4D;
    --bs-pagination-focus-bg:          #FCE6EA;
    --bs-pagination-focus-box-shadow:  0 0 0 0.2rem rgba(222, 75, 96, 0.20);
    --bs-pagination-active-bg:         #DE4B60;
    --bs-pagination-active-border-color:#DE4B60;
    --bs-pagination-active-color:      #fff;
}

/* ----- Nav tabs / pills ----- */
.nav-pills {
    --bs-nav-pills-link-active-bg: #DE4B60;
}
.nav-tabs .nav-link.active {
    color: #DE4B60;
    border-bottom-color: #fff;
}
.nav-tabs .nav-link:hover {
    color: #B53B4D;
}

/* ----- Dropdowns ----- */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #DE4B60;
}

/* ----- Progress bars ----- */
.progress-bar {
    background-color: #DE4B60;
}

/* ----- Text utilities ----- */
.text-primary { color: #DE4B60 !important; }
.bg-primary   { background-color: #DE4B60 !important; }
.border-primary { border-color: #DE4B60 !important; }

/* ----- Color utility classes ----- */
.text-navy { color: var(--ramiant-navy) !important; }
.bg-navy   { background-color: var(--ramiant-navy) !important; }
.text-ink  { color: var(--ramiant-ink) !important; }
.bg-mist   { background-color: var(--ramiant-mist) !important; }
.border-mist-line { border-color: var(--ramiant-line) !important; }
.bg-crimson { background-color: var(--ramiant-crimson) !important; color: #fff; }
.text-crimson { color: var(--ramiant-crimson) !important; }

/* ----- Square avatar / icon container ----- */
.avatar-sq { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-sq.size-30 { width: 30px; height: 30px; font-size: 14px; }
.avatar-sq.size-32 { width: 32px; height: 32px; }
.avatar-sq.size-36 { width: 36px; height: 36px; }
.avatar-sq.size-40 { width: 40px; height: 40px; }
.avatar-sq.size-45 { width: 45px; height: 45px; }
.avatar-sq.size-50 { width: 50px; height: 50px; font-size: 20px; }
.avatar-sq.size-55 { width: 55px; height: 55px; }
.avatar-sq.size-60 { width: 60px; height: 60px; font-size: 24px; }
.avatar-sq.size-80 { width: 80px; height: 80px; }
.avatar-sq.size-90 { width: 90px; height: 90px; }
.avatar-sq.size-100 { width: 100px; height: 100px; }
.avatar-sq.cover img,
img.avatar-sq.cover { object-fit: cover; }
.avatar-img { object-fit: cover; }

/* ----- Typing-indicator dots ----- */
.dot-pulse { width: 5px; height: 5px; }
.dot-pulse.dot-tiny { width: 4px; height: 4px; }
.dot-pulse.delay-1 { animation-delay: 0.2s; }
.dot-pulse.delay-2 { animation-delay: 0.4s; }

/* ----- Pixel-precise font sizes (use sparingly — prefer Bootstrap .fs-1..6) ----- */
.fs-px-8   { font-size: 8px; }
.fs-px-10  { font-size: 10px; }
.fs-px-11  { font-size: 11px; }
.fs-px-12  { font-size: 12px; }
.fs-px-13  { font-size: 13px; }
.fs-px-14  { font-size: 14px; }
.fs-px-15  { font-size: 15px; }

/* ----- Letter-spacing scale ----- */
.ls-eyebrow { letter-spacing: 0.08em; }
.ls-wide    { letter-spacing: 0.5px; }
.ls-wider   { letter-spacing: 1px; }

/* ----- Eyebrow label (small uppercase section heading) ----- */
.eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

/* ----- Cursor utility ----- */
.cursor-pointer { cursor: pointer; }

/* ----- Resize override (textareas) ----- */
.no-resize { resize: none; }

/* ----- Common max-width constraints (px) ----- */
.mw-px-100  { max-width: 100px; }
.mw-px-150  { max-width: 150px; }
.mw-px-200  { max-width: 200px; }
.mw-px-250  { max-width: 250px; }
.mw-px-300  { max-width: 300px; }
.mw-px-350  { max-width: 350px; }
.mw-px-360  { max-width: 360px; }
.mw-px-400  { max-width: 400px; }
.mw-px-450  { max-width: 450px; }
.mw-px-500  { max-width: 500px; }
.mw-px-1100 { max-width: 1100px; }

/* ----- Word-break helpers ----- */
.break-all { word-break: break-all; }
.break-all-mono { word-break: break-all; font-family: monospace; font-size: 13px; }

/* ----- Image cover ----- */
.img-cover { object-fit: cover; }

/* ----- Soft session alerts ----- */
/* Pair with Bootstrap's .alert-success / .alert-danger / .alert-info / .alert-warning. */
.alert.alert-soft {
    font-size: 13.5px;
    padding: 12px 16px;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
}
.alert.alert-soft .alert-soft-icon { font-size: 15px; flex-shrink: 0; }
.alert.alert-soft .btn-close       { font-size: 11px; }
.alert.alert-soft.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alert.alert-soft.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.alert.alert-soft.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.alert.alert-soft.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert.alert-soft .alert-error-list { margin: 0; padding-left: 16px; }
.alert.alert-soft .alert-error-heading { font-weight: 600; margin-bottom: 4px; }