/* =========================================================
   File: public/assets/marketv2/components/selects/variables.css
   Path: public/assets/marketv2/components/selects/variables.css
   Market UI v2 - Selects Variables

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

   المسار المعماري الرسمي هنا:
   runtime theme context
   -> internal identity bridge
   -> component contract

   لذلك هذا الملف:
   - يقرأ فقط من --m-context-*
   - يبني طبقة bridge داخلية خاصة بالمكوّن
   - يبني فقط --m-select-* كعقد نهائي
   - لا يحتوي palette محلية
   - لا يحتوي fallback colors محلية
   - لا يحتوي brand colors محلية
   - لا يحتوي slot colors محلية
   - لا يحتوي logic خاص بالـ preset
   - لا يحتوي logic خاص بالـ route
   - لا يحتوي logic خاص بالـ mode

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

:root {
    /* =====================================================
       1) METRICS — SIZE SCALE
    ===================================================== */

    --select-height-sm: var(--m-field-height-sm);
    --select-height-md: var(--m-field-height-md);
    --select-height-lg: var(--m-field-height-lg);

    --select-padding-x-sm: var(--m-field-padding-x-sm);
    --select-padding-x-md: var(--m-field-padding-x-md);
    --select-padding-x-lg: var(--m-field-padding-x-lg);

    --select-font-size-sm: var(--m-field-font-size-sm);
    --select-font-size-md: var(--m-field-font-size-md);
    --select-font-size-lg: var(--m-field-font-size-lg);

    --select-search-height-sm: 34px;
    --select-search-height-md: 38px;
    --select-search-height-lg: 42px;

    /* =====================================================
       2) METRICS — RADIUS SCALE
    ===================================================== */

    --select-radius-sm: var(--m-field-radius-sm);
    --select-radius-md: var(--m-field-radius-md);
    --select-radius-lg: var(--m-field-radius-lg);

    --select-dropdown-radius: var(--m-theme-dropdown-radius, var(--m-theme-radius-lg, 8px));
    --select-option-radius: var(--m-theme-dropdown-radius, var(--m-theme-radius-sm, 6px));
    --select-chip-radius: 999px;
    --select-search-radius: 8px;

    /* =====================================================
       3) METRICS — SPACING / LAYOUT
    ===================================================== */

    --select-dropdown-offset: 6px;
    --select-dropdown-padding: 8px;
    --select-search-wrap-padding: 10px;

    --select-option-padding-y: 9px;
    --select-option-padding-x: 10px;

    --select-chip-padding-x: 8px;
    --select-chip-gap: 6px;
    --select-option-badge-padding-y: 2px;
    --select-option-badge-padding-x: 6px;
    --select-option-badge-radius: 999px;
    --select-option-badge-font-size: 11px;

    --select-dropdown-max-height: 260px;
    --select-dropdown-max-height-mobile: 220px;

    --select-dropdown-min-height: 120px;
    --select-dropdown-min-usable-height: 140px;
    --select-dropdown-edge-gap: 8px;

    --select-option-min-height: 40px;
    --select-chip-min-height: 24px;

    --select-control-gap: var(--m-field-gap-md);
    --select-actions-gap: var(--m-field-gap-sm);
    --select-value-gap: var(--m-field-gap-sm);
    --select-option-gap: var(--m-field-gap-lg);

    /* =====================================================
       4) METRICS — MOTION / ELEVATION / LAYERING
    ===================================================== */

    --select-transition-fast: var(--m-field-transition-fast);
    --select-transition-base: var(--m-field-transition-base);
    --select-transition-soft: var(--m-field-transition-base);

    --select-layer-base: 1;
    --select-layer-focus: 30;
    --select-layer-dropdown: 40;

    /* =====================================================
       5) INTERNAL IDENTITY BRIDGE — SURFACE
    ===================================================== */

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

    /* =====================================================
       6) INTERNAL IDENTITY BRIDGE — BORDER
    ===================================================== */

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

    /* =====================================================
       7) INTERNAL IDENTITY BRIDGE — TEXT
    ===================================================== */

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

    /* =====================================================
       8) INTERNAL IDENTITY BRIDGE — ACCENT / STATE / ELEVATION
    ===================================================== */

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

    --select-focus-ring: var(--m-context-focus-ring);
    --select-overlay: var(--m-context-overlay);

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

    /* =====================================================
       9) COMPONENT CONTRACT — CORE METRICS
    ===================================================== */

    --m-select-height: var(--select-height-md);
    --m-select-radius: var(--select-radius-md);
    --m-select-padding-x: var(--select-padding-x-md);
    --m-select-font-size: var(--select-font-size-md);

    --m-select-control-gap: var(--select-control-gap);
    --m-select-actions-gap: var(--select-actions-gap);
    --m-select-value-gap: var(--select-value-gap);
    --m-select-option-gap: var(--select-option-gap);

    /* =====================================================
       10) COMPONENT CONTRACT — CONTROL
    ===================================================== */

    --m-select-control-bg: var(--m-theme-form-control-bg, var(--m-theme-form-bg, var(--select-surface)));
    --m-select-control-text: var(--m-theme-form-control-text, var(--select-text));
    --m-select-control-border: var(--m-theme-form-border, var(--select-border));
    --m-select-control-shadow: var(--select-shadow-base);

    --m-select-control-hover-bg: var(--select-surface-hover);
    --m-select-control-hover-text: var(--select-text-strong);
    --m-select-control-hover-border: var(--select-border-strong);
    --m-select-control-hover-shadow: var(--select-shadow-hover-base);

    --m-select-control-open-bg: var(--m-theme-form-control-bg-focus, var(--select-surface));
    --m-select-control-open-text: var(--select-text-strong);
    --m-select-control-open-border: var(--select-border-strong);
    --m-select-control-open-ring: var(--select-focus-ring);
    --m-select-control-open-ring-size: var(--m-field-focus-width);

    --m-select-control-disabled-bg: var(--select-surface-muted);
    --m-select-control-disabled-text: var(--select-text-faint);
    --m-select-control-disabled-border: var(--select-border-soft);

    --m-select-control-invalid-border: var(--select-border-strong);
    --m-select-control-invalid-ring: var(--select-focus-ring);
    --m-select-control-invalid-ring-size: var(--m-field-focus-width);

    /* =====================================================
       11) COMPONENT CONTRACT — TEXT / ICON
    ===================================================== */

    --m-select-placeholder-text: var(--m-theme-form-placeholder-text, var(--select-text-muted));
    --m-select-icon-text: var(--select-text-muted);
    --m-select-icon-hover-text: var(--select-text-soft);
    --m-select-arrow-text: var(--select-text-muted);
    --m-select-arrow-open-text: var(--select-text-soft);

    /* =====================================================
       12) COMPONENT CONTRACT — DROPDOWN
    ===================================================== */

    --m-select-dropdown-offset: var(--select-dropdown-offset);
    --m-select-dropdown-radius: var(--select-dropdown-radius);
    --m-select-dropdown-bg: var(--m-theme-dropdown-bg, var(--select-surface-elevated));
    --m-select-dropdown-text: var(--select-text);
    --m-select-dropdown-border: var(--m-theme-dropdown-border, var(--select-border));
    --m-select-dropdown-shadow: var(--m-theme-dropdown-shadow, var(--select-shadow-panel));
    --m-select-dropdown-padding: var(--select-dropdown-padding);
    --m-select-dropdown-max-height: var(--select-dropdown-max-height);
    --m-select-dropdown-max-height-mobile: var(--select-dropdown-max-height-mobile);
    --m-select-dropdown-min-height: var(--select-dropdown-min-height);
    --m-select-dropdown-min-usable-height: var(--select-dropdown-min-usable-height);
    --m-select-dropdown-edge-gap: var(--select-dropdown-edge-gap);

    /* =====================================================
       13) COMPONENT CONTRACT — SEARCH
    ===================================================== */

    --m-select-search-wrap-padding: var(--select-search-wrap-padding);
    --m-select-search-height: var(--select-search-height-md);
    --m-select-search-radius: var(--select-search-radius);
    --m-select-search-bg: var(--select-surface);
    --m-select-search-text: var(--select-text);
    --m-select-search-border: var(--select-border);
    --m-select-search-focus-border: var(--select-border-strong);
    --m-select-search-focus-ring: var(--select-focus-ring);
    --m-select-search-focus-ring-size: var(--m-field-focus-width);
    --m-select-search-wrap-bg: var(--select-surface-soft);

    /* =====================================================
       14) COMPONENT CONTRACT — OPTIONS
    ===================================================== */

    --m-select-option-min-height: var(--select-option-min-height);
    --m-select-option-radius: var(--select-option-radius);
    --m-select-option-padding-y: var(--select-option-padding-y);
    --m-select-option-padding-x: var(--select-option-padding-x);

    --m-select-option-bg: transparent;
    --m-select-option-text: var(--select-text);
    --m-select-option-hover-bg: var(--select-surface-hover);
    --m-select-option-hover-text: var(--select-text-strong);
    --m-select-option-active-bg: var(--select-surface-active);
    --m-select-option-active-text: var(--select-text-strong);
    --m-select-option-selected-bg: var(--select-surface-selected);
    --m-select-option-selected-text: var(--select-text-strong);
    --m-select-option-selected-hover-bg: var(--select-surface-selected);
    --m-select-option-selected-hover-text: var(--select-text-strong);
    --m-select-option-disabled-bg: transparent;
    --m-select-option-disabled-text: var(--select-text-faint);
    --m-select-option-badge-padding-y: var(--select-option-badge-padding-y);
    --m-select-option-badge-padding-x: var(--select-option-badge-padding-x);
    --m-select-option-badge-radius: var(--select-option-badge-radius);
    --m-select-option-badge-font-size: var(--select-option-badge-font-size);
    --m-select-option-badge-bg: var(--select-surface-soft);
    --m-select-option-badge-text: var(--select-text-soft);
    --m-select-option-badge-border: var(--select-border-soft);

    /* =====================================================
       15) COMPONENT CONTRACT — CHIPS
    ===================================================== */

    --m-select-chip-min-height: var(--select-chip-min-height);
    --m-select-chip-radius: var(--select-chip-radius);
    --m-select-chip-gap: var(--select-chip-gap);
    --m-select-chip-padding-x: var(--select-chip-padding-x);

    --m-select-chip-bg: var(--select-surface-soft);
    --m-select-chip-text: var(--select-text-soft);
    --m-select-chip-border: var(--select-border-soft);
    --m-select-chip-remove-hover-bg: var(--select-surface-muted);
    --m-select-chip-remove-hover-text: var(--select-text-strong);

    /* =====================================================
       16) COMPONENT CONTRACT — ACTIONS / EMPTY / MOTION / LAYERS
    ===================================================== */

    --m-select-clear-hover-bg: var(--select-surface-soft);
    --m-select-clear-hover-text: var(--select-text-strong);

    --m-select-empty-text: var(--select-text-muted);

    --m-select-transition-fast: var(--select-transition-fast);
    --m-select-transition-base: var(--select-transition-base);
    --m-select-transition-soft: var(--select-transition-soft);

    --m-select-layer-base: var(--select-layer-base);
    --m-select-layer-focus: var(--select-layer-focus);
    --m-select-layer-dropdown: var(--select-layer-dropdown);
}