/* ═════════════════════════════════════════════════════════════════
   bonicbd-brutal-user.css — REPLACED 2026-05-24
   The brutal neo-brutalist theme has been removed.
   This file now imports tokens.css and applies a clean,
   professional theme. All templates still link this filename
   so no HTML changes are needed for this phase.
   ═════════════════════════════════════════════════════════════════ */

/* Pull in the unified token system */
@import url('tokens.css');

/* ── Base reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
    background: var(--bg-body);
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background .2s var(--easing), color .2s var(--easing);
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    color: var(--foreground);
    letter-spacing: -.025em;
    line-height: 1.2;
}

body a { color: inherit; }

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--border) 140%, var(--foreground) 20%);
    background-clip: content-box;
}

/* ── Cards ─────────────────────────────────────────────────────────── */
body :is(
    .card, .surface-card, .section-card, .plan-card, .payment-card, .modal-box,
    .command-palette-box, .notification-panel, .workspace-modal-box, .workspace-shell,
    .mobile-side-panel, .pf-sidebar, .top-header, .docs-topbar-pro, .context-selector,
    .analytics-input-shell, .hero-shell, .overview-card, .executive-card, .kpi-card,
    .container-card, .analytics-table-shell, .detail-card, .pf-table-shell, .welcome-strip,
    .stat-card, .feature-page-head, .overview-note-item, .workspace-card, .workspace-placeholder,
    .analytics-toolbar-shell, .analytics-overview-card, .analytics-panel-card,
    .analytics-summary-card, .tips-card, .receiver-card, .quick-container-card,
    .activity-item, .affiliate-hero-card, .affiliate-hero-shell, .affiliate-link-id-card,
    .affiliate-tier-panel, .payment-info-block, .proof-preview, .auth-brand-panel,
    .auth-form-panel, .auth-form-panel .form-card, .faq-item, .workspace-note,
    .quick-health-strip, .dashboard-warning-banner, .suspended-banner, .analytics-custom-range
) {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--trans), box-shadow var(--trans);
}

/* Hover lift for interactive cards */
body :is(
    .plan-card, .payment-card, .section-card, .receiver-card,
    .quick-container-card, .overview-note-item, .activity-item,
    .workspace-card, .faq-item, .container-card, .stat-card
):hover {
    border-color: rgba(var(--p-rgb), .20);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Hero / feature cards with subtle brand gradient */
body :is(
    .hero-shell, .welcome-strip, .feature-page-head,
    .workspace-card.primary, .affiliate-hero-card, .auth-brand-panel,
    .analytics-overview-primary
) {
    background:
        linear-gradient(135deg, rgba(var(--p-rgb), .07), transparent 45%),
        var(--bg-card);
    border-color: rgba(var(--p-rgb), .14);
}

/* ── App chrome ─────────────────────────────────────────────────────── */
body :is(.top-header, .dashboard-crumbbar, .docs-topbar-pro) {
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .03);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body .pf-sidebar {
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    border-right: 1px solid var(--border);
    box-shadow: none;
}

/* ── Brand logo ────────────────────────────────────────────────────── */
body :is(.logo-icon, .docs-brand-logo, .auth-brand-logo, .pf-brand-icon, .logo-wrap .logo-icon) {
    border-radius: var(--r-m);
    box-shadow: 0 4px 14px rgba(var(--p-rgb), .20);
    overflow: hidden;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
body :is(
    .btn, .bbd-btn, .docs-back-link, .theme-toggle-btn, .command-launch,
    .filter-pill, .workspace-tab, .dashboard-tab, .profile-chip,
    .mobile-fab-item, .mobile-bottom-item, .mobile-nav-link,
    .pf-nav-link, .pf-nav-parent, .pf-sub-link,
    .copy-btn, .method-btn, .billing-toggle, .view-toggle-btn,
    .powerup-back-btn, .cc-quick-actions-btn, .welcome-dismiss-btn,
    .tip-nav button, .mobile-menu-btn, .notification-icon-btn,
    .refresh-ring-btn, .topbar-icon-btn, .analytics-link, .theme-fab,
    .command-launch, .bbd-progress-btn, .bbd-nav-item, .bbd-nav-btn,
    .bbd-code-head button
) {
    border: 1px solid var(--border);
    border-radius: var(--r-s);
    background: var(--bg-input);
    color: var(--foreground);
    box-shadow: none;
    text-decoration: none;
    transition: all var(--trans);
}

body :is(
    .btn:hover, .bbd-btn:hover, .docs-back-link:hover, .theme-toggle-btn:hover,
    .command-launch:hover, .filter-pill:hover, .workspace-tab:hover, .dashboard-tab:hover,
    .profile-chip:hover, .mobile-fab-item:hover, .mobile-bottom-item:hover,
    .mobile-nav-link:hover, .pf-nav-link:hover, .pf-nav-parent:hover, .pf-sub-link:hover,
    .copy-btn:hover, .method-btn:hover, .billing-toggle:hover, .view-toggle-btn:hover,
    .powerup-back-btn:hover, .cc-quick-actions-btn:hover, .welcome-dismiss-btn:hover,
    .tip-nav button:hover, .mobile-menu-btn:hover, .notification-icon-btn:hover,
    .refresh-ring-btn:hover, .topbar-icon-btn:hover, .analytics-link:hover,
    .bbd-progress-btn:hover, .bbd-nav-item:hover, .bbd-nav-btn:hover,
    .bbd-code-head button:hover
) {
    transform: translateY(-1px);
    background: var(--bg-hover);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: var(--shadow-sm);
    color: var(--foreground);
}

body :is(
    .btn:active, .bbd-btn:active, .filter-pill:active,
    .workspace-tab:active, .dashboard-tab:active
) {
    transform: translateY(0);
    box-shadow: none;
}

/* Primary buttons */
body :is(
    .btn-primary, .dashboard-tab.active, .workspace-tab.active,
    .filter-pill.active, .method-btn.active, .view-toggle-btn.active,
    .pf-nav-link.active, .pf-nav-parent.active, .pf-sub-link.active,
    .analytics-link, .feature-page-badge, .mobile-bottom-item.active,
    .bbd-btn, .bbd-nav-item.active, .bbd-nav-btn.active,
    .bbd-progress-btn.primary, .bbd-nav-heading-num, .bbd-nav-num.active
) {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(var(--p-rgb), .22);
}

body :is(
    .btn-primary:hover, .bbd-btn:hover
) {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary));
    color: #fff;
    box-shadow: 0 6px 20px rgba(var(--p-rgb), .30);
    transform: translateY(-1px);
}

/* ── Form inputs ───────────────────────────────────────────────────── */
body :is(
    .input, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
    select, textarea, .toolbar-input, .toolbar-select,
    .analytics-input, .analytics-select, .form-input, .bbd-select,
    .context-selector, .payment-note
) {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-s);
    color: var(--foreground);
    transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}

body :is(
    .input:focus,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):focus,
    select:focus, textarea:focus, .toolbar-input:focus, .toolbar-select:focus,
    .analytics-input:focus, .analytics-select:focus, .form-input:focus, .bbd-select:focus
) {
    background: var(--bg-card);
    border-color: rgba(var(--p-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--p-rgb), .11);
    outline: none;
}

/* ── Badges & pills ─────────────────────────────────────────────────── */
body :is(
    .badge, .trust-badge, .workspace-context-pill, .welcome-context-pill,
    .analytics-toolbar-pill, .analytics-tag, .analytics-filter-chip,
    .analytics-powerup-chip, .live-badge, .insight-pill, .cc-inline-meta,
    .meta-chip, .profile-badge, .plan-section-pill, .plan-popular-tag,
    .bbd-pill, .bbd-tag, .bbd-chip, .bbd-place-chip,
    .affiliate-tier-chip, .feature-page-badge, .health-badge
) {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--secondary);
    font-weight: 700;
    box-shadow: none;
}

/* Status badge colours */
body :is(.badge-primary, .feature-page-badge, .analytics-link) {
    background: var(--primary-dim);
    color: var(--primary);
    border-color: rgba(var(--p-rgb), .22);
}
body :is(.badge-success, .live-badge, .affiliate-tier-chip.success, .health-badge.hb-good) {
    background: rgba(var(--success-rgb), .10);
    color: var(--success);
    border-color: rgba(var(--success-rgb), .20);
}
body :is(.badge-warning, .analytics-toolbar-pill.warning, .expiry-warn, .health-badge.hb-warning) {
    background: rgba(var(--warning-rgb), .11);
    color: var(--warning);
    border-color: rgba(var(--warning-rgb), .22);
}
body :is(.badge-danger, .dashboard-warning-banner.danger, .badge-err, .health-badge.hb-critical) {
    background: rgba(var(--danger-rgb), .10);
    color: var(--danger);
    border-color: rgba(var(--danger-rgb), .20);
}

/* ── Icon boxes & step circles ───────────────────────────────────────── */
body :is(
    .step-circle, .status-dot, .list-status-dot, .notification-dot,
    .live-dot, .bbd-quick-num, .bbd-nav-num, .bbd-nav-index,
    .bbd-icon-box, .hero-mini-icon, .overview-note-icon,
    .activity-marker, .stat-icon, .workspace-placeholder-icon, .kpi-icon
) {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

/* ── Tables ─────────────────────────────────────────────────────────── */
body :is(table, .compare-table, .data-table, .analytics-table-shell, .pf-table-shell) {
    border-color: var(--border);
}
body :is(table th, .compare-table thead th, .data-table th, .pf-table-header) {
    background: var(--bg-input);
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body :is(table td, .compare-table tbody td, .data-table td) {
    border-bottom: 1px solid var(--border-subtle);
    color: var(--foreground);
}
body .data-table tbody tr:hover {
    background: rgba(var(--p-rgb), .04);
}

/* ── Alerts & banners ───────────────────────────────────────────────── */
body :is(
    .alert, .alert-banner, .dashboard-warning-banner, .suspended-banner,
    .workspace-note, .quick-health-strip, .analytics-banner, .toast
) {
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    box-shadow: none;
}

/* ── Shells & layout wrappers ───────────────────────────────────────── */
body .auth-layout,
body .dashboard-shell,
body .docs-shell {
    background: transparent;
}

/* ── Setup guide scoped overrides ────────────────────────────────────── */
body #bonicbd-setup-guide :is(
    .bbd-side-card, .bbd-card, .bbd-hero, .bbd-support, .bbd-nav-card,
    .bbd-nav-group, .bbd-summary-card, .bbd-quick-card, .bbd-feature-card,
    .bbd-sub-card, .bbd-flow-card, .bbd-kpi-card, .bbd-location-card,
    .bbd-order-mini, .bbd-inline-alert, .bbd-code-block, .bbd-progress-strip,
    .bbd-quick-start, .bbd-quick-step, .bbd-path-box
) {
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
}

body #bonicbd-setup-guide :is(
    .bbd-nav-item, .bbd-nav-btn, .bbd-progress-btn,
    .bbd-code-head button, .bbd-select, .bbd-btn
) {
    border: 1px solid var(--border);
    border-radius: var(--r-s);
    box-shadow: none;
}

body #bonicbd-setup-guide :is(
    .bbd-pill, .bbd-tag, .bbd-chip, .bbd-quick-num, .bbd-nav-index
) {
    border-radius: 999px;
}

/* ── Utility radius helpers ────────────────────────────────────────────── */
body :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-md) {
    border-radius: var(--r-m);
}
body :is(.rounded-full, .badge, .live-badge, .insight-pill, .bbd-pill, .bbd-tag, .bbd-chip) {
    border-radius: 999px;
}

/* ── Text colour helpers ─────────────────────────────────────────────── */
body :is(
    .text-gray-300, .text-gray-400, .text-gray-500,
    .text-slate-400, .text-slate-500,
    .text-zinc-400, .text-zinc-500
) {
    color: var(--secondary);
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    body :is(
        .plan-card:hover, .payment-card:hover, .faq-item:hover,
        .section-card:hover, .receiver-card:hover, .quick-container-card:hover,
        .overview-note-item:hover, .activity-item:hover, .workspace-card:hover
    ) {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}