/* =========================================================
   Market UI v2 — Buttons Variables
   Path: public/assets/marketv2/components/buttons/variables.css

   الهدف:
   ---------------------------------------------------------
   هذا الملف يمثل العقد البصري الرسمي لمكوّن Buttons.

   هذا الملف يلتزم بالدستور الرسمي بالكامل:
   runtime theme context → button contract

   لذلك هذا الملف:
   - يقرأ فقط من --m-context-* أو الطبقة العامة المعتمدة
   - يبني فقط --m-btn-*
   - لا يحتوي palette logic
   - لا يحتوي slot mapping
   - لا يحتوي role mapping
   - لا يحتوي action alias mapping
   - لا يحتوي compatibility bridge
   - لا يحتوي c1..c10 داخل المكوّن

   المسؤوليات المسموح بها هنا فقط:
   1) metrics
   2) runtime context bridge
   3) component contract
========================================================= */

:root {
    /* =====================================================
       1) METRICS — SIZE / SPACING / RADIUS
    ===================================================== */

    --m-btn-height-sm: var(--m-button-height-sm);
    --m-btn-height-md: var(--m-button-height-md);
    --m-btn-height-lg: var(--m-button-height-lg);

    --m-btn-padding-x-sm: var(--m-button-padding-x-sm);
    --m-btn-padding-x-md: var(--m-button-padding-x-md);
    --m-btn-padding-x-lg: var(--m-button-padding-x-lg);

    --m-btn-padding-y-wrap-sm: 7px;
    --m-btn-padding-y-wrap-md: 8px;
    --m-btn-padding-y-wrap-lg: 10px;

    --m-btn-radius-sm: var(--m-button-radius-sm);
    --m-btn-radius-md: var(--m-button-radius-md);
    --m-btn-radius-lg: var(--m-button-radius-lg);
    --m-btn-radius-pill: var(--m-button-radius-pill);
    --m-btn-radius-square: var(--m-button-radius-square);

    --m-btn-font-size-sm: var(--m-button-font-size-sm);
    --m-btn-font-size-md: var(--m-button-font-size-md);
    --m-btn-font-size-lg: var(--m-button-font-size-lg);

    --m-btn-font-weight: var(--m-button-font-weight);
    --m-btn-line-height: var(--m-button-line-height);
    --m-btn-line-height-wrap: 1.3;

    --m-btn-gap-sm: var(--m-button-gap-sm);
    --m-btn-gap-md: var(--m-button-gap-md);
    --m-btn-gap-lg: var(--m-button-gap-lg);

    --m-btn-spinner-size-sm: var(--m-button-spinner-size-sm);
    --m-btn-spinner-size-md: var(--m-button-spinner-size-md);
    --m-btn-spinner-size-lg: var(--m-button-spinner-size-lg);

    --m-btn-icon-size: var(--m-button-icon-size);
    --m-btn-icon-only-size-sm: var(--m-button-icon-only-size-sm);
    --m-btn-icon-only-size-md: var(--m-button-icon-only-size-md);
    --m-btn-icon-only-size-lg: var(--m-button-icon-only-size-lg);

    --m-btn-table-action-height: var(--m-button-height-sm);
    --m-btn-table-action-padding-x: var(--m-button-padding-x-sm);
    --m-btn-table-action-font-size: var(--m-button-font-size-md);
    --m-btn-table-action-radius: var(--m-button-radius-md);
    --m-btn-table-action-spinner-size: 12px;
    --m-btn-table-action-gap: var(--m-table-contract-action-gap);
    --m-btn-table-action-group-gap: var(--m-table-contract-action-gap);
    --m-btn-table-action-group-gap-compact: 4px;

    /* =====================================================
       2) METRICS — MOTION / FOCUS
    ===================================================== */

    --m-btn-border-width: var(--m-button-border-width);
    --m-btn-transition-fast: var(--m-button-transition-fast);
    --m-btn-transition-base: var(--m-button-transition-base);
    --m-btn-transition-slow: var(--m-button-transition-slow);
    --m-btn-translate-active: 1px;

    /* =====================================================
       3) RUNTIME CONTEXT BRIDGE — SURFACE
    ===================================================== */

    --m-btn-surface: var(--m-context-surface);
    --m-btn-surface-soft: var(--m-context-surface-soft);
    --m-btn-surface-muted: var(--m-context-surface-muted);
    --m-btn-surface-raised: var(--m-context-surface-raised);
    --m-btn-surface-elevated: var(--m-context-surface-elevated);
    --m-btn-surface-hover: var(--m-context-surface-hover);
    --m-btn-surface-active: var(--m-context-surface-active);
    --m-btn-surface-selected: var(--m-context-surface-selected);

    /* =====================================================
       4) RUNTIME CONTEXT BRIDGE — BORDER
    ===================================================== */

    --m-btn-border-color-subtle: var(--m-context-border-subtle);
    --m-btn-border-color: var(--m-context-border);
    --m-btn-border-color-soft: var(--m-context-border-soft);
    --m-btn-border-color-strong: var(--m-context-border-strong);

    /* =====================================================
       5) RUNTIME CONTEXT BRIDGE — TEXT
    ===================================================== */

    --m-btn-text: var(--m-context-text);
    --m-btn-text-strong: var(--m-context-text-strong);
    --m-btn-text-soft: var(--m-context-text-soft);
    --m-btn-text-muted: var(--m-context-text-muted);
    --m-btn-text-faint: var(--m-context-text-faint);
    --m-btn-text-inverse: var(--m-context-text-inverse);

    /* =====================================================
       6) RUNTIME CONTEXT BRIDGE — ACCENT / STATE / SHADOW
    ===================================================== */

    --m-btn-accent-color: var(--m-context-accent-color);
    --m-btn-accent-color-hover: var(--m-context-accent-color-hover);
    --m-btn-accent-color-active: var(--m-context-accent-color-active);
    --m-btn-accent-soft: var(--m-context-accent-soft);
    --m-btn-accent-soft-strong: var(--m-context-accent-soft-strong);
    --m-btn-accent-text-inverse: var(--m-context-accent-text-inverse);

    --m-btn-focus-ring: var(--m-context-focus-ring);

    --m-btn-shadow: var(--m-context-shadow);
    --m-btn-shadow-hover: var(--m-context-shadow-hover);
    --m-btn-shadow-active: var(--m-context-shadow-active);
    --m-btn-shadow-panel: var(--m-context-shadow-panel);
    --m-btn-shadow-modal: var(--m-context-shadow-modal);

    /* =====================================================
       7) COMPONENT CONTRACT — CORE DEFAULT STATE
    ===================================================== */

    --m-btn-bg: var(--m-btn-accent-color);
    --m-btn-text-color: var(--m-btn-accent-text-inverse);
    --m-btn-border-color-current: var(--m-btn-accent-color);

    --m-btn-bg-hover: var(--m-btn-accent-color-hover);
    --m-btn-text-color-hover: var(--m-btn-accent-text-inverse);
    --m-btn-border-color-hover: var(--m-btn-accent-color-hover);

    --m-btn-bg-active: var(--m-btn-accent-color-hover);
    --m-btn-text-color-active: var(--m-btn-accent-text-inverse);
    --m-btn-border-color-active: var(--m-btn-accent-color-hover);

    --m-btn-bg-disabled: var(--m-btn-surface-muted);
    --m-btn-text-color-disabled: var(--m-btn-text-faint);
    --m-btn-border-color-disabled: var(--m-btn-border-color-soft);

    /* =====================================================
       8) COMPONENT CONTRACT — STATE TOKENS
    ===================================================== */

    --m-btn-state-success-bg: var(--m-context-success-surface, var(--m-btn-surface-selected));
    --m-btn-state-success-text: var(--m-context-success-text, var(--m-btn-text-strong));
    --m-btn-state-success-border: var(--m-context-success-border, transparent);

    --m-btn-state-error-bg: var(--m-context-danger-surface, var(--m-btn-surface-selected));
    --m-btn-state-error-text: var(--m-context-danger-text, var(--m-btn-text-strong));
    --m-btn-state-error-border: var(--m-context-danger-border, transparent);

    --m-btn-state-selected-bg: var(--m-btn-accent-soft);
    --m-btn-state-selected-text: var(--m-btn-accent-color);
    --m-btn-state-selected-border: var(--m-btn-accent-color);

    --m-btn-shadow-focus: var(--m-button-focus-shadow);

    /* =====================================================
       9) COMPONENT CONTRACT — TYPE TOKENS
    ===================================================== */

    /* solid */
    --m-btn-solid-bg: var(--m-theme-button-solid-bg, var(--m-btn-accent-color));
    --m-btn-solid-text: var(--m-theme-button-solid-text, var(--m-btn-accent-text-inverse));
    --m-btn-solid-border: var(--m-theme-button-solid-border, var(--m-btn-accent-color));

    --m-btn-solid-bg-hover: var(--m-theme-button-solid-bg-hover, var(--m-btn-accent-color-hover));
    --m-btn-solid-text-hover: var(--m-theme-button-solid-text-hover, var(--m-theme-button-solid-text, var(--m-btn-accent-text-inverse)));
    --m-btn-solid-border-hover: var(--m-theme-button-solid-bg-hover, var(--m-btn-accent-color-hover));

    --m-btn-solid-bg-active: var(--m-btn-accent-color-hover);
    --m-btn-solid-text-active: var(--m-theme-button-solid-text-active, var(--m-theme-button-solid-text, var(--m-btn-accent-text-inverse)));
    --m-btn-solid-border-active: var(--m-btn-accent-color-hover);

    --m-btn-solid-bg-disabled: var(--m-btn-surface-muted);
    --m-btn-solid-text-disabled: var(--m-btn-text-faint);
    --m-btn-solid-border-disabled: var(--m-btn-border-color-soft);

    /* outline */
    --m-btn-outline-bg: transparent;
    --m-btn-outline-text: var(--m-btn-text-soft);
    --m-btn-outline-border: var(--m-theme-button-outline-border, var(--m-btn-border-color));

    --m-btn-outline-bg-hover: var(--m-btn-surface-soft);
    --m-btn-outline-text-hover: var(--m-btn-text);
    --m-btn-outline-border-hover: var(--m-btn-border-color-strong);

    --m-btn-outline-bg-active: var(--m-btn-accent-soft);
    --m-btn-outline-text-active: var(--m-btn-accent-color);
    --m-btn-outline-border-active: var(--m-btn-accent-color);

    --m-btn-outline-bg-disabled: transparent;
    --m-btn-outline-text-disabled: var(--m-btn-text-faint);
    --m-btn-outline-border-disabled: var(--m-btn-border-color-soft);

    /* ghost */
    --m-btn-ghost-bg: transparent;
    --m-btn-ghost-text: var(--m-btn-text-soft);
    --m-btn-ghost-border: transparent;

    --m-btn-ghost-bg-hover: var(--m-btn-surface-soft);
    --m-btn-ghost-text-hover: var(--m-btn-text);
    --m-btn-ghost-border-hover: transparent;

    --m-btn-ghost-bg-active: var(--m-btn-accent-soft);
    --m-btn-ghost-text-active: var(--m-btn-accent-color);
    --m-btn-ghost-border-active: transparent;

    --m-btn-ghost-bg-disabled: transparent;
    --m-btn-ghost-text-disabled: var(--m-btn-text-faint);
    --m-btn-ghost-border-disabled: transparent;

    /* soft */
    --m-btn-soft-bg: var(--m-theme-button-soft-bg, var(--m-btn-accent-soft));
    --m-btn-soft-text: var(--m-theme-button-soft-text, var(--m-btn-accent-color));
    --m-btn-soft-border: transparent;

    --m-btn-soft-bg-hover: var(--m-btn-accent-color);
    --m-btn-soft-text-hover: var(--m-btn-accent-text-inverse);
    --m-btn-soft-border-hover: var(--m-btn-accent-color);

    --m-btn-soft-bg-active: var(--m-btn-accent-color);
    --m-btn-soft-text-active: var(--m-btn-accent-text-inverse);
    --m-btn-soft-border-active: var(--m-btn-accent-color);

    --m-btn-soft-bg-disabled: var(--m-btn-surface-muted);
    --m-btn-soft-text-disabled: var(--m-btn-text-faint);
    --m-btn-soft-border-disabled: transparent;

    /* link */
    --m-btn-link-bg: transparent;
    --m-btn-link-text: var(--m-btn-accent-color);
    --m-btn-link-border: transparent;

    --m-btn-link-bg-hover: transparent;
    --m-btn-link-text-hover: var(--m-btn-accent-color-hover);
    --m-btn-link-border-hover: transparent;

    --m-btn-link-bg-active: transparent;
    --m-btn-link-text-active: var(--m-btn-accent-color-hover);
    --m-btn-link-border-active: transparent;

    --m-btn-link-bg-disabled: transparent;
    --m-btn-link-text-disabled: var(--m-btn-text-faint);
    --m-btn-link-border-disabled: transparent;

    /* =====================================================
       10) COMPONENT CONTRACT — CHOICE / TABLE ACTION HELPERS
    ===================================================== */

    --m-btn-choice-bg: transparent;
    --m-btn-choice-text: var(--m-btn-text);
    --m-btn-choice-border: var(--m-btn-border-color);

    --m-btn-choice-bg-hover: var(--m-btn-surface-soft);
    --m-btn-choice-text-hover: var(--m-btn-text);
    --m-btn-choice-border-hover: var(--m-btn-border-color-strong);

    --m-btn-choice-bg-selected: var(--m-btn-state-selected-bg);
    --m-btn-choice-text-selected: var(--m-btn-state-selected-text);
    --m-btn-choice-border-selected: var(--m-btn-state-selected-border);
}

@media (max-width: 991px) {
    :root {
        --m-btn-height-md: var(--m-button-height-md);
        --m-btn-padding-x-md: var(--m-button-padding-x-md);
    }
}

@media (max-width: 767px) {
    :root {
        --m-btn-height-md: var(--m-button-height-md);
        --m-btn-padding-x-md: var(--m-button-padding-x-md);
    }
}