/* =========================================================
   Application UI — Buttons Variables
   Path: public/assets/app/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);
    }
}