/**
 * ConstructionHub — shared UI tokens (buttons, sections, surfaces)
 *
 * Loaded after theme-vars + Bootstrap. Brand colours stay in <x-theme-vars />;
 * this file owns spacing/sizing rhythm so pages stop inventing one-off values.
 *
 * Sizes:
 *   sm  — compact toolbars / table row actions
 *   md  — default product CTAs / dashboard actions
 *   lg  — hero / checkout primary
 *   touch — primary actions on small screens (~44px)
 */

:root {
    /* ── Surfaces (shared across catalogue / checkout / cards) ── */
    --ch-surface: #f8fafc;
    --ch-border: #e2e8f0;
    --ch-border-subtle: #f1f5f9;
    --ch-text: #0f172a;
    --ch-dark: #0f172a;
    --ch-muted: #64748b;
    --ch-radius: 1rem;
    --ch-radius-sm: 0.55rem;
    --ch-radius-md: 0.65rem;
    --ch-radius-lg: 0.85rem;
    --ch-shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
    --ch-shadow-lg: 0 8px 40px rgba(15, 23, 42, 0.13);

    /* Aliases already used in brand theme */
    --ch-green: var(--brand-primary, #018d12);
    --ch-green-dark: var(--brand-primary-dark, #01660d);
    --ch-green-dk: var(--brand-primary-dark, #01660d);
    --ch-green-soft: var(--brand-soft-bg-2, #e8f8ea);

    /* ── Button scale ── */
    --ch-btn-gap: 0.4rem;
    --ch-btn-fw: 600;
    --ch-btn-radius: var(--ch-radius-sm);
    --ch-btn-transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.12s;

    --ch-btn-pad-y-sm: 0.35rem;
    --ch-btn-pad-x-sm: 0.75rem;
    --ch-btn-fs-sm: 0.78rem;
    --ch-btn-min-h-sm: 2rem; /* 32px */

    --ch-btn-pad-y-md: 0.55rem;
    --ch-btn-pad-x-md: 1.05rem;
    --ch-btn-fs-md: 0.85rem;
    --ch-btn-min-h-md: 2.5rem; /* 40px */

    --ch-btn-pad-y-lg: 0.7rem;
    --ch-btn-pad-x-lg: 1.35rem;
    --ch-btn-fs-lg: 0.9rem;
    --ch-btn-min-h-lg: 2.75rem; /* 44px */

    --ch-btn-min-h-touch: 2.75rem; /* ~44px primary mobile */

    /* ── Section / content rhythm ── */
    --ch-section-pad-y: clamp(2.25rem, 5vw, 4rem);
    --ch-section-pad-y-sm: clamp(1.5rem, 3.5vw, 2.25rem);
    --ch-section-gap: clamp(1rem, 2vw, 1.5rem);
    --ch-card-pad: clamp(1rem, 2.5vw, 1.5rem);
    --ch-type-title: clamp(1.35rem, 2.8vw, 1.85rem);
    --ch-type-body: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════
   Shared button primitives (.ch-btn*)
   Prefer these for new markup; existing .btn-udp / .btn-adp map below.
   ═══════════════════════════════════════════════════════════════ */

.ch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ch-btn-gap);
    box-sizing: border-box;
    margin: 0;
    padding: var(--ch-btn-pad-y-md) var(--ch-btn-pad-x-md);
    min-height: var(--ch-btn-min-h-md);
    font-family: inherit;
    font-size: var(--ch-btn-fs-md);
    font-weight: var(--ch-btn-fw);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid transparent;
    border-radius: var(--ch-btn-radius);
    cursor: pointer;
    transition: var(--ch-btn-transition);
    -webkit-tap-highlight-color: transparent;
}

.ch-btn:disabled,
.ch-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}

.ch-btn--sm {
    padding: var(--ch-btn-pad-y-sm) var(--ch-btn-pad-x-sm);
    min-height: var(--ch-btn-min-h-sm);
    font-size: var(--ch-btn-fs-sm);
}

.ch-btn--lg {
    padding: var(--ch-btn-pad-y-lg) var(--ch-btn-pad-x-lg);
    min-height: var(--ch-btn-min-h-lg);
    font-size: var(--ch-btn-fs-lg);
    font-weight: 700;
}

.ch-btn--block {
    display: flex;
    width: 100%;
}

.ch-btn--primary {
    background: var(--ch-green);
    color: #fff;
    border-color: var(--ch-green);
}

.ch-btn--primary:hover,
.ch-btn--primary:focus-visible {
    background: var(--ch-green-dark);
    border-color: var(--ch-green-dark);
    color: #fff;
}

.ch-btn--primary-grad {
    background: linear-gradient(135deg, var(--ch-green), var(--ch-green-dark));
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}

.ch-btn--primary-grad:hover,
.ch-btn--primary-grad:focus-visible {
    opacity: 0.92;
    color: #fff;
}

.ch-btn--outline {
    background: transparent;
    color: var(--ch-green);
    border-color: var(--ch-green);
}

.ch-btn--outline:hover,
.ch-btn--outline:focus-visible {
    background: var(--ch-green);
    color: #fff;
}

.ch-btn--soft {
    background: var(--ch-green-soft);
    color: var(--ch-green-dark);
    border-color: color-mix(in srgb, var(--ch-green) 35%, #fff);
}

.ch-btn--soft:hover,
.ch-btn--soft:focus-visible {
    background: color-mix(in srgb, var(--ch-green) 18%, #fff);
    color: var(--ch-green-dark);
}

.ch-btn--ghost {
    background: transparent;
    color: var(--ch-muted);
    border-color: var(--ch-border);
}

.ch-btn--ghost:hover,
.ch-btn--ghost:focus-visible {
    background: var(--ch-surface);
    color: var(--ch-text);
    border-color: #cbd5e1;
}

.ch-btn--danger {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.ch-btn--danger:hover,
.ch-btn--danger:focus-visible {
    opacity: 0.92;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   Map existing dashboard / admin button classes → same scale
   (layouts may still declare colours; sizing comes from tokens)
   ═══════════════════════════════════════════════════════════════ */

.btn-udp,
.btn-uds,
.btn-adp,
.btn-adn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ch-btn-gap);
    box-sizing: border-box;
    padding: var(--ch-btn-pad-y-md) var(--ch-btn-pad-x-md);
    min-height: var(--ch-btn-min-h-md);
    font-size: var(--ch-btn-fs-md);
    font-weight: 700;
    line-height: 1.25;
    border-radius: var(--ch-btn-radius);
    text-decoration: none;
    cursor: pointer;
    transition: var(--ch-btn-transition);
    -webkit-tap-highlight-color: transparent;
}

.btn-udp.btn-sm,
.btn-uds.btn-sm,
.btn-adp.btn-sm,
.btn-adn.btn-sm,
.btn-udp.ch-btn--sm,
.btn-uds.ch-btn--sm,
.btn-adp.ch-btn--sm,
.btn-adn.ch-btn--sm {
    padding: var(--ch-btn-pad-y-sm) var(--ch-btn-pad-x-sm);
    min-height: var(--ch-btn-min-h-sm);
    font-size: var(--ch-btn-fs-sm);
}

/* Nav / header CTAs (guest + public) */
.ch-btn-signin,
.ch-btn-register,
.ch-btn-quote,
.auth-topbar-action {
    box-sizing: border-box;
    min-height: var(--ch-btn-min-h-md);
    padding: var(--ch-btn-pad-y-sm) var(--ch-btn-pad-x-md);
    font-size: var(--ch-btn-fs-md);
    font-weight: 600;
    border-radius: var(--ch-btn-radius);
    line-height: 1.25;
    -webkit-tap-highlight-color: transparent;
}

.ch-btn-register,
.auth-topbar-action--primary {
    font-weight: 700;
}

/* Home hero CTAs */
.ch-btn-primary,
.ch-btn-ghost {
    box-sizing: border-box;
    min-height: var(--ch-btn-min-h-lg);
    padding: var(--ch-btn-pad-y-lg) var(--ch-btn-pad-x-lg);
    font-size: var(--ch-btn-fs-lg);
    border-radius: var(--ch-btn-radius);
    -webkit-tap-highlight-color: transparent;
}

/* Commerce primary CTAs */
.btn-checkout,
.btn-place-order,
.prod-action-btn,
.btn-cta {
    box-sizing: border-box;
    min-height: var(--ch-btn-min-h-lg);
    padding: var(--ch-btn-pad-y-lg) var(--ch-btn-pad-x-lg);
    font-size: var(--ch-btn-fs-lg);
    font-weight: 700;
    border-radius: var(--ch-radius-md);
    -webkit-tap-highlight-color: transparent;
}

/* Bootstrap default size → CH md (leave .btn-sm / .btn-lg alone) */
.btn:not(.btn-sm):not(.btn-lg):not(.btn-close) {
    --bs-btn-padding-y: var(--ch-btn-pad-y-md);
    --bs-btn-padding-x: var(--ch-btn-pad-x-md);
    --bs-btn-font-size: var(--ch-btn-fs-md);
    --bs-btn-border-radius: var(--ch-btn-radius);
    min-height: var(--ch-btn-min-h-md);
    font-weight: 600;
}

.btn-sm:not(.btn-close) {
    --bs-btn-padding-y: var(--ch-btn-pad-y-sm);
    --bs-btn-padding-x: var(--ch-btn-pad-x-sm);
    --bs-btn-font-size: var(--ch-btn-fs-sm);
    --bs-btn-border-radius: var(--ch-btn-radius);
    min-height: var(--ch-btn-min-h-sm);
}

.btn-lg:not(.btn-close) {
    --bs-btn-padding-y: var(--ch-btn-pad-y-lg);
    --bs-btn-padding-x: var(--ch-btn-pad-x-lg);
    --bs-btn-font-size: var(--ch-btn-fs-lg);
    --bs-btn-border-radius: var(--ch-btn-radius);
    min-height: var(--ch-btn-min-h-lg);
}

/* ═══════════════════════════════════════════════════════════════
   Section utilities
   ═══════════════════════════════════════════════════════════════ */

.ch-section-pad {
    padding-top: var(--ch-section-pad-y);
    padding-bottom: var(--ch-section-pad-y);
}

.ch-section-pad--sm {
    padding-top: var(--ch-section-pad-y-sm);
    padding-bottom: var(--ch-section-pad-y-sm);
}

.ch-card-pad {
    padding: var(--ch-card-pad);
}

.ch-section:not(.ch-home-shell) {
    padding-top: var(--ch-section-pad-y);
    padding-bottom: var(--ch-section-pad-y);
}

/* ═══════════════════════════════════════════════════════════════
   Mobile: primary actions ≥ ~44px touch target; prevent overflow
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .ch-btn:not(.ch-btn--sm),
    .ch-btn--lg,
    .ch-btn--primary,
    .ch-btn--primary-grad,
    .btn-udp:not(.btn-sm),
    .btn-uds:not(.btn-sm),
    .btn-adp:not(.btn-sm),
    .btn-adn:not(.btn-sm),
    .btn-checkout,
    .btn-place-order,
    .prod-action-btn,
    .btn-cta,
    .ch-btn-primary,
    .ch-btn-ghost,
    .ch-btn-register,
    .auth-topbar-action--primary,
    .btn.btn-success:not(.btn-sm),
    .btn.w-100:not(.btn-sm):not(.btn-close) {
        min-height: var(--ch-btn-min-h-touch);
    }

    .auth-topbar-action {
        min-height: 2.5rem;
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }

    .auth-topbar-action--primary {
        min-height: var(--ch-btn-min-h-touch);
        padding: 0.45rem 0.85rem;
        font-size: 0.8rem;
    }

    .auth-topbar-cart {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .ch-btn--block,
    .btn-checkout,
    .btn-place-order {
        white-space: normal;
        text-align: center;
    }
}