/* Shared UI system layer for retail, wholesale, and admin.
   Purpose: normalize visual language without changing business logic. */

:root {
    --ds-color-bg: #f4f5f7;
    --ds-color-surface: #ffffff;
    --ds-color-surface-muted: #f7f8fa;
    --ds-color-surface-strong: #151515;
    --ds-color-text: #161616;
    --ds-color-text-muted: #61656d;
    --ds-color-text-inverse: #ffffff;
    --ds-color-border: #d8dde3;
    --ds-color-border-strong: #c6cdd6;
    --ds-color-primary: #2f6b48;
    --ds-color-primary-hover: #285c3d;
    --ds-color-secondary: #4f5661;
    --ds-color-secondary-hover: #3f454e;
    --ds-color-info: #5f7389;
    --ds-color-info-soft: #edf2f7;
    --ds-color-danger: #b44848;
    --ds-color-warning: #b8860b;
    --ds-color-success: #2f6b48;
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-7: 32px;
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-shadow-sm: 0 4px 14px rgba(18, 24, 32, 0.06);
    --ds-shadow-md: 0 10px 28px rgba(18, 24, 32, 0.1);
    --ds-focus-ring: 0 0 0 3px rgba(95, 115, 137, 0.18);

    /* Source-of-truth aliases requested by prompt 6 */
    --text-primary: var(--ds-color-text);
    --text-secondary: var(--ds-color-text-muted);
    --text-inverse: var(--ds-color-text-inverse);
    --bg-surface: var(--ds-color-surface);
    --bg-elevated: var(--ds-color-surface-muted);
    --bg-contrast: var(--ds-color-surface-strong);
    --border-default: var(--ds-color-border);
    --border-muted: var(--ds-color-border-strong);
    --accent-primary: var(--ds-color-primary);
}

body {
    color: var(--ds-color-text);
}

:where(body, input, select, textarea, button) {
    color-scheme: light;
}

:where(p, small, label, .text-muted, .muted, .helper-text, .hint-text) {
    color: var(--ds-color-text-muted);
}

:where(
    .checkout-form,
    .order-summary,
    .checkout-form-panel,
    .order-summary-panel,
    .account-section,
    .dashboard-card,
    .content-area,
    .top-bar,
    .payment-method-section,
    .shipping-calculator-section,
    .wholesale-info,
    .wholesale-banner,
    .cart-sidebar,
    .modal-content,
    .summary-card,
    .stat-card,
    .stats-card
) {
    background: var(--ds-color-surface);
    color: var(--ds-color-text);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
}

:where(
    .btn,
    .card-action,
    .btn-continue-shopping,
    .shipping-calculate-btn,
    .logout-btn,
    .payment-submit-btn,
    .process-order-btn,
    .coupon-apply-btn,
    .cart-checkout-btn,
    .checkout-submit-btn,
    .summary-primary-btn
) {
    min-height: 44px;
    border-radius: var(--ds-radius-md);
    border: 1px solid transparent;
    padding: 0 var(--ds-space-5);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
}

:where(
    .btn-primary,
    .btn-success,
    .btn-continue-shopping,
    .shipping-calculate-btn,
    .payment-submit-btn,
    .process-order-btn,
    .checkout-submit-btn,
    .summary-primary-btn
) {
    background: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
    color: var(--ds-color-text-inverse);
}

:where(
    .btn-primary:hover,
    .btn-success:hover,
    .btn-continue-shopping:hover,
    .shipping-calculate-btn:hover,
    .payment-submit-btn:hover,
    .process-order-btn:hover,
    .checkout-submit-btn:hover,
    .summary-primary-btn:hover
) {
    background: var(--ds-color-primary-hover);
    border-color: var(--ds-color-primary-hover);
    transform: translateY(-1px);
}

:where(.btn-secondary, .card-action, .logout-btn) {
    background: var(--ds-color-secondary);
    border-color: var(--ds-color-secondary);
    color: var(--ds-color-text-inverse);
}

:where(.btn-secondary:hover, .card-action:hover, .logout-btn:hover) {
    background: var(--ds-color-secondary-hover);
    border-color: var(--ds-color-secondary-hover);
}

:where(.btn-warning) {
    background: #f0e4b8;
    border-color: #e3d49c;
    color: #42361a;
}

:where(.btn-danger) {
    background: var(--ds-color-danger);
    border-color: var(--ds-color-danger);
    color: var(--ds-color-text-inverse);
}

:where(input, select, textarea) {
    min-height: 44px;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-color-border);
    background: var(--ds-color-surface);
    color: var(--ds-color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

:where(input, select, textarea):focus {
    outline: none;
    border-color: var(--ds-color-info);
    box-shadow: var(--ds-focus-ring);
}

:where(input, select, textarea)::placeholder {
    color: #7a818c;
    opacity: 1;
}

:where(button:disabled, .btn:disabled, input:disabled, select:disabled, textarea:disabled) {
    opacity: 1;
    background: #d7dde4 !important;
    border-color: #c3cad4 !important;
    color: #4f5661 !important;
    cursor: not-allowed;
}

:where(
    .notification-badge,
    .discount-badge,
    .badge-success,
    .wholesale-badge,
    .info-badge,
    .badge-info
) {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

:where(.badge-success) {
    background: var(--ds-color-info);
    color: var(--ds-color-text-inverse);
}

:where(.wholesale-badge, .info-badge, .badge-info) {
    background: var(--ds-color-info);
    color: var(--ds-color-text-inverse);
}

:where(.checkout-header, .account-header) {
    background: linear-gradient(180deg, #151515 0%, #242424 100%);
    color: var(--ds-color-text-inverse);
}

.checkout-header .step.active {
    color: var(--ds-color-info);
}

.checkout-header .step.completed {
    color: var(--ds-color-primary);
}

.checkout-header .step-number {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.shipping-option {
    border-radius: var(--ds-radius-lg);
    border-color: var(--ds-color-border);
}

.shipping-option:hover {
    border-color: var(--ds-color-info);
    box-shadow: 0 4px 14px rgba(95, 115, 137, 0.12);
}

.shipping-option:has(input:checked) {
    border-color: var(--ds-color-primary);
    background-color: #f5faf7;
    box-shadow: 0 6px 18px rgba(47, 107, 72, 0.14);
}

.payment-method-card {
    border-radius: var(--ds-radius-lg);
    border-color: var(--ds-color-border);
}

.payment-method-option:hover .payment-method-card {
    border-color: var(--ds-color-info);
    box-shadow: 0 4px 14px rgba(95, 115, 137, 0.12);
}

.payment-method-option input[type="radio"]:checked + .payment-method-card {
    border-color: var(--ds-color-primary);
    background: #f5faf7;
    box-shadow: 0 6px 18px rgba(47, 107, 72, 0.14);
}

.payment-method-option input[type="radio"]:checked + .payment-method-card::before,
.payment-method-option input[type="radio"]:checked + .payment-method-card .payment-method-icon {
    color: var(--ds-color-primary);
}

.payment-method-notice {
    background: var(--ds-color-surface-muted);
    border-left-color: var(--ds-color-primary);
}

:where(.modal, .modal-content, .variants-modal, .variants-modal-content, .variants-modal-header, .variants-modal-body) {
    color: var(--ds-color-text);
}

:where(.modal-content, .variants-modal-content) :where(h1, h2, h3, h4, p, small, label, span, strong, li) {
    color: inherit;
}

.cart-header {
    background: var(--ds-color-surface-muted);
    border-bottom-color: var(--ds-color-border);
}

.cart-close-btn:hover {
    background: #eceff3;
}

.cart-empty p,
.cart-loading p,
.shipping-service,
.shipping-delivery,
.payment-method-info small {
    color: var(--ds-color-text-muted);
}

/* Admin shell normalization */
.sidebar {
    background: linear-gradient(180deg, #141414 0%, #252a31 100%) !important;
    color: var(--ds-color-text-inverse);
}

.sidebar-header {
    background: rgba(255, 255, 255, 0.04) !important;
}

.nav-item:hover,
.nav-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    border-left-color: var(--ds-color-info) !important;
}

.top-bar,
.content-area,
.dashboard-card {
    border-radius: var(--ds-radius-lg) !important;
}

.page-title,
.card-title {
    color: #edf3f8 !important;
}

.card-description {
    color: #9cafc0 !important;
}

table thead th {
    color: #d2e5f7;
    background: rgba(255, 255, 255, 0.04);
}

table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.admin-page :where(.top-bar, .content-area, .dashboard-card, .card, .panel, .modal-content, .table-wrap),
body:has(.sidebar) :where(.top-bar, .content-area, .dashboard-card, .card, .panel, .modal-content, .table-wrap) {
    background: linear-gradient(180deg, rgba(22, 32, 43, 0.96), rgba(17, 26, 36, 0.96)) !important;
    color: #edf3f8 !important;
    border-color: rgba(205, 220, 235, 0.14) !important;
}

.admin-page :where(p, small, label, .text-muted, .muted, .helper-text, .hint-text),
body:has(.sidebar) :where(p, small, label, .text-muted, .muted, .helper-text, .hint-text) {
    color: #9cafc0;
}

/* Wholesale-specific guardrails */
.wholesale-mode .wholesale-price,
.checkout-page .shipping-cost {
    color: var(--ds-color-text);
}

.wholesale-mode .product-card,
.wholesale-mode .category-card,
.wholesale-mode .account-section {
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
}

/* Wholesale checkout keeps the dark treatment intentionally. */
.checkout-page .logo-img {
    filter: brightness(0) invert(1);
}

.checkout-page :where(
    .checkout-form-panel,
    .order-summary-panel,
    .shipping-calculator-section,
    .payment-method-section,
    .modal-content
) {
    background: var(--dark-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-dark);
}

.checkout-page .checkout-form,
.checkout-page .order-summary-content,
.checkout-page .cart-items,
.checkout-page .order-calculations,
.checkout-page .checkout-actions,
.checkout-page .form-section {
    background: transparent;
    color: var(--text-primary);
}

.checkout-page .form-section,
.checkout-page .cart-items,
.checkout-page .order-calculations {
    border-color: var(--border-color);
}

.checkout-page :where(input, select, textarea) {
    background: var(--dark-surface-light);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.checkout-page :where(input, select, textarea)::placeholder {
    color: var(--text-muted);
}

.checkout-page :where(input, select, textarea):focus {
    border-color: var(--silver-accent);
    box-shadow: 0 0 0 3px rgba(213, 218, 224, 0.16);
}

.checkout-page .form-group label,
.checkout-page .calculation-row,
.checkout-page .item-quantity,
.checkout-page .shipping-method-copy small,
.checkout-page .shipping-method-note,
.checkout-page .wholesale-shipping-quote-hint,
.checkout-page .payment-method-info small,
.checkout-page .shipping-service,
.checkout-page .shipping-delivery {
    color: var(--text-secondary);
}

.checkout-page #savedAddressesSection p,
.checkout-page #shippingColonyHint,
.checkout-page #couponInputHelper,
.checkout-page #postalLookupHint,
.checkout-page .coupon-offer-copy,
.checkout-page .payment-method-notice span {
    color: var(--text-secondary) !important;
}

.checkout-page #applyCouponBtn,
.checkout-page .coupon-offer-cta {
    background: var(--ds-color-primary) !important;
    color: var(--ds-color-text-inverse) !important;
    border-color: var(--ds-color-primary) !important;
}

.checkout-page #applyCouponBtn:hover,
.checkout-page .coupon-offer-cta:hover {
    background: var(--ds-color-primary-hover) !important;
    border-color: var(--ds-color-primary-hover) !important;
}

.checkout-page .summary-toggle-btn,
.checkout-page .summary-header,
.checkout-page .summary-total-chip,
.checkout-page .total-row,
.checkout-page .order-item,
.checkout-page .item-name,
.checkout-page .item-price,
.checkout-page .item-quantity {
    color: var(--text-primary);
}

.checkout-page .coupon-applied small,
.checkout-page .coupon-applied strong,
.checkout-page .coupon-error,
.checkout-page .shipping-no-options p,
.checkout-page .shipping-no-options .text-muted {
    color: var(--text-primary) !important;
}

.checkout-page .shipping-no-options {
    background: rgba(184, 134, 11, 0.18);
    border-color: rgba(184, 134, 11, 0.55);
}

.checkout-page .shipping-no-options p:first-child,
.checkout-page .shipping-no-options .text-muted {
    color: #f4d27a !important;
}

.checkout-page .item-info h4,
.checkout-page .item-total,
.checkout-page .summary-header-total,
.checkout-page .shipping-method-copy strong,
.checkout-page .wholesale-shipping-quote-header strong,
.checkout-page .payment-method-info strong,
.checkout-page .shipping-carrier {
    color: var(--text-primary);
}

.checkout-page .panel-header,
.checkout-page .summary-header {
    background: linear-gradient(180deg, #2a2a2a 0%, #212121 100%);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.checkout-page .payment-method-card,
.checkout-page .shipping-option,
.checkout-page .shipping-method-option,
.checkout-page .payment-instructions,
.checkout-page .wholesale-shipping-quote-panel,
.checkout-page .bank-info {
    background: var(--dark-surface-light);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.checkout-page .payment-method-option:hover .payment-method-card,
.checkout-page .shipping-option:hover,
.checkout-page .shipping-method-option:hover {
    border-color: var(--info-color);
    box-shadow: 0 4px 14px rgba(95, 115, 137, 0.18);
}

.checkout-page .payment-method-option input[type="radio"]:checked + .payment-method-card,
.checkout-page .shipping-option:has(input:checked),
.checkout-page .shipping-method-option.is-selected,
.checkout-page .shipping-method-option:has(input:checked) {
    border-color: var(--success-color);
    background: rgba(47, 107, 72, 0.18);
    box-shadow: 0 6px 18px rgba(47, 107, 72, 0.16);
}

.checkout-page .payment-method-notice,
.checkout-page .shipping-no-options {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.checkout-page .shipping-cost,
.checkout-page .wholesale-price,
.checkout-page .free-shipping {
    color: var(--text-primary);
}

.checkout-page .shipping-currency,
.checkout-page .shipping-delivery,
.checkout-page .shipping-service {
    color: #b8c0ca;
}

.checkout-page .summary-header-total,
.checkout-page .order-total .total-row:last-child,
.checkout-page .summary-total-chip {
    color: var(--text-primary) !important;
}

.checkout-page .summary-total-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
    :where(
        .checkout-form,
        .order-summary,
        .checkout-form-panel,
        .order-summary-panel,
        .account-section,
        .dashboard-card,
        .content-area
    ) {
        border-radius: var(--ds-radius-lg);
    }
}