/**
 * BYB Design Utilities — color & surface helpers
 * Requires DesignTokens.css (CSS variables on :root)
 *
 * Usage in HTML (Bootstrap-like):
 *   <p class="text-heading">عنوان</p>
 *   <span class="text-muted">توضیح</span>
 *   <div class="bg-surface-page border border-subtle rounded-md">...</div>
 *   <button class="btn btn-primary">ذخیره</button>
 *
 * Scale utilities:
 *   text-primary-700 | bg-secondary-50 | border-neutral-200
 *
 * Load AFTER bootstrap.css to override default Bootstrap colors.
 */

/* ── Semantic text ─────────────────────────────────────────── */
.text-heading { color: var(--text-heading) !important; }
.text-body,
.text-primary-token { color: var(--text-primary) !important; }
.text-secondary-token { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-inverse { color: var(--text-inverse) !important; }
.text-on-primary { color: var(--text-on-primary) !important; }

.text-primary { color: var(--primary) !important; }
.text-primary-soft { color: var(--primary-text) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-secondary-soft { color: var(--secondary-text) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }

.text-success { color: var(--primary-600) !important; }
.text-info { color: var(--secondary-600) !important; }
.text-dark { color: var(--text-heading) !important; }
.text-white { color: var(--neutral-0) !important; }
.text-light { color: var(--neutral-400) !important; }

/* ── Semantic background ───────────────────────────────────── */
.bg-surface-page { background-color: var(--surface-page) !important; }
.bg-surface-card { background-color: var(--surface-card) !important; }
.bg-surface-muted { background-color: var(--surface-muted) !important; }
.bg-surface-active { background-color: var(--surface-active) !important; }
.bg-primary-soft { background-color: var(--primary-soft-bg) !important; }
.bg-secondary-soft { background-color: var(--secondary-soft-bg) !important; }
.bg-danger-soft { background-color: var(--danger-soft) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }

.bg-success { background-color: var(--primary) !important; }
.bg-info { background-color: var(--secondary) !important; }
.bg-light { background-color: var(--surface-muted) !important; }
.bg-dark { background-color: var(--secondary-900) !important; }
.bg-white { background-color: var(--neutral-0) !important; }
.bg-transparent { background-color: transparent !important; }

/* ── Borders ───────────────────────────────────────────────── */
.border-default { border-color: var(--border-default) !important; }
.border-subtle { border-color: var(--border-subtle) !important; }
.border-strong { border-color: var(--border-strong) !important; }
.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-warning { border-color: var(--warning) !important; }

.border { border: 1px solid var(--border-subtle) !important; }
.border-0 { border: 0 !important; }

/* ── Primary scale ─────────────────────────────────────────── */
.text-primary-50 { color: var(--primary-50) !important; }
.text-primary-100 { color: var(--primary-100) !important; }
.text-primary-200 { color: var(--primary-200) !important; }
.text-primary-300 { color: var(--primary-300) !important; }
.text-primary-400 { color: var(--primary-400) !important; }
.text-primary-500 { color: var(--primary-500) !important; }
.text-primary-600 { color: var(--primary-600) !important; }
.text-primary-700 { color: var(--primary-700) !important; }
.text-primary-800 { color: var(--primary-800) !important; }
.text-primary-900 { color: var(--primary-900) !important; }

.bg-primary-50 { background-color: var(--primary-50) !important; }
.bg-primary-100 { background-color: var(--primary-100) !important; }
.bg-primary-200 { background-color: var(--primary-200) !important; }
.bg-primary-300 { background-color: var(--primary-300) !important; }
.bg-primary-400 { background-color: var(--primary-400) !important; }
.bg-primary-500 { background-color: var(--primary-500) !important; }
.bg-primary-600 { background-color: var(--primary-600) !important; }
.bg-primary-700 { background-color: var(--primary-700) !important; }
.bg-primary-800 { background-color: var(--primary-800) !important; }
.bg-primary-900 { background-color: var(--primary-900) !important; }

.border-primary-200 { border-color: var(--primary-200) !important; }
.border-primary-300 { border-color: var(--primary-300) !important; }
.border-primary-500 { border-color: var(--primary-500) !important; }

/* ── Secondary scale ───────────────────────────────────────── */
.text-secondary-0 { color: var(--secondary-0) !important; }
.text-secondary-50 { color: var(--secondary-50) !important; }
.text-secondary-100 { color: var(--secondary-100) !important; }
.text-secondary-200 { color: var(--secondary-200) !important; }
.text-secondary-300 { color: var(--secondary-300) !important; }
.text-secondary-400 { color: var(--secondary-400) !important; }
.text-secondary-500 { color: var(--secondary-500) !important; }
.text-secondary-600 { color: var(--secondary-600) !important; }
.text-secondary-700 { color: var(--secondary-700) !important; }
.text-secondary-800 { color: var(--secondary-800) !important; }
.text-secondary-900 { color: var(--secondary-900) !important; }
.text-secondary-1000 { color: var(--secondary-1000) !important; }

.bg-secondary-0 { background-color: var(--secondary-0) !important; }
.bg-secondary-50 { background-color: var(--secondary-50) !important; }
.bg-secondary-100 { background-color: var(--secondary-100) !important; }
.bg-secondary-200 { background-color: var(--secondary-200) !important; }
.bg-secondary-300 { background-color: var(--secondary-300) !important; }
.bg-secondary-400 { background-color: var(--secondary-400) !important; }
.bg-secondary-500 { background-color: var(--secondary-500) !important; }
.bg-secondary-600 { background-color: var(--secondary-600) !important; }
.bg-secondary-700 { background-color: var(--secondary-700) !important; }
.bg-secondary-800 { background-color: var(--secondary-800) !important; }
.bg-secondary-900 { background-color: var(--secondary-900) !important; }
.bg-secondary-1000 { background-color: var(--secondary-1000) !important; }

.border-secondary-100 { border-color: var(--secondary-100) !important; }
.border-secondary-200 { border-color: var(--secondary-200) !important; }
.border-secondary-300 { border-color: var(--secondary-300) !important; }

/* ── Neutral scale ─────────────────────────────────────────── */
.text-neutral-0 { color: var(--neutral-0) !important; }
.text-neutral-50 { color: var(--neutral-50) !important; }
.text-neutral-100 { color: var(--neutral-100) !important; }
.text-neutral-200 { color: var(--neutral-200) !important; }
.text-neutral-300 { color: var(--neutral-300) !important; }
.text-neutral-400 { color: var(--neutral-400) !important; }
.text-neutral-500 { color: var(--neutral-500) !important; }
.text-neutral-600 { color: var(--neutral-600) !important; }
.text-neutral-700 { color: var(--neutral-700) !important; }
.text-neutral-800 { color: var(--neutral-800) !important; }
.text-neutral-900 { color: var(--neutral-900) !important; }

.bg-neutral-0 { background-color: var(--neutral-0) !important; }
.bg-neutral-50 { background-color: var(--neutral-50) !important; }
.bg-neutral-100 { background-color: var(--neutral-100) !important; }
.bg-neutral-200 { background-color: var(--neutral-200) !important; }
.bg-neutral-300 { background-color: var(--neutral-300) !important; }
.bg-neutral-400 { background-color: var(--neutral-400) !important; }
.bg-neutral-500 { background-color: var(--neutral-500) !important; }
.bg-neutral-600 { background-color: var(--neutral-600) !important; }
.bg-neutral-700 { background-color: var(--neutral-700) !important; }
.bg-neutral-800 { background-color: var(--neutral-800) !important; }
.bg-neutral-900 { background-color: var(--neutral-900) !important; }

.border-neutral-100 { border-color: var(--neutral-100) !important; }
.border-neutral-150 { border-color: var(--neutral-150) !important; }
.border-neutral-200 { border-color: var(--neutral-200) !important; }
.border-neutral-300 { border-color: var(--neutral-300) !important; }

/* ── Bootstrap button overrides ────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--text-on-primary) !important;
    font-size: clamp(0.875rem, 1.6vw, 1.125rem);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none !important;
    transition: 0.15s linear;
}
.btn-primary,
.btn-success {
    color: var(--text-on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    color: var(--text-on-primary) !important;
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-secondary,
.btn-info {
    color: var(--text-on-primary) !important;
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-info:hover,
.btn-info:focus {
    color: var(--text-on-primary) !important;
    background-color: var(--secondary-hover) !important;
    border-color: var(--secondary-hover) !important;
}

.btn-danger {
    color: var(--text-on-primary) !important;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.btn-warning {
    color: var(--text-heading) !important;
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--warning-hover) !important;
    border-color: var(--warning-hover) !important;
}

.btn-light {
    color: var(--text-heading) !important;
    background-color: var(--surface-muted) !important;
    border-color: var(--border-subtle) !important;
}

.btn-dark {
    color: var(--text-on-primary) !important;
    background-color: var(--secondary-900) !important;
    border-color: var(--secondary-900) !important;
}

.btn-outline-primary {
    color: var(--primary) !important;
    background-color: transparent !important;
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--text-on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline-secondary {
    color: var(--secondary) !important;
    background-color: transparent !important;
    border-color: var(--secondary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--text-on-primary) !important;
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-outline-danger {
    color: var(--danger) !important;
    background-color: transparent !important;
    border-color: var(--danger) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: var(--text-on-primary) !important;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

/* ── BYB component shortcuts ───────────────────────────────── */
.btn-byb-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--text-on-primary) !important;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
}

.btn-byb-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-on-primary) !important;
}

.btn-byb-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--secondary);
    border-radius: var(--radius-sm);
    background: var(--secondary);
    color: var(--text-on-primary) !important;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
}

.btn-byb-secondary:hover {
    background: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: var(--text-on-primary) !important;
}

.btn-byb-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-heading) !important;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
}

.btn-byb-ghost:hover {
    background: var(--surface-muted);
    color: var(--text-heading) !important;
}

.badge-byb-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--primary-soft-bg);
    color: var(--primary-700) !important;
    font-size: 0.8125rem;
    font-weight: 500;
}

.badge-byb-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--secondary-soft-bg);
    color: var(--secondary-700) !important;
    font-size: 0.8125rem;
    font-weight: 500;
}

.badge-byb-danger {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--danger-soft);
    color: var(--danger) !important;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ── Radius & shadow (token-based) ─────────────────────────── */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-pill { border-radius: 999px !important; }

.shadow-card { box-shadow: var(--shadow-card) !important; }
.shadow-header { box-shadow: var(--shadow-header) !important; }

.card-byb {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.link-primary { color: var(--primary) !important; }
.link-primary:hover { color: var(--primary-hover) !important; }

.link-secondary { color: var(--secondary) !important; }
.link-secondary:hover { color: var(--secondary-hover) !important; }

.link-danger { color: var(--danger) !important; }
.link-danger:hover { color: #a82828 !important; }