/* =========================================================
   File: public/assets/marketv2/components/phone-field/variables.css
   Market UI v2 — Phone Field Variables

   Canonical Contract
   ---------------------------------------------------------
   runtime theme context -> component contract -> render aliases

   Rules:
   - reads only from --m-context-*
   - no hex
   - no rgba()
   - no color-mix()
   - no raw color-* dependency
   - no business logic
========================================================= */

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

    --m-phone-field-height-md: var(--m-field-height-md);
    --m-phone-field-padding-x: var(--m-field-padding-x-md);
    --m-phone-field-country-padding-x: var(--m-field-padding-x-sm);

    --m-phone-field-font-size: var(--m-field-font-size-md);

    --m-phone-field-flag-width: 20px;
    --m-phone-field-flag-height: 14px;

    --m-phone-field-clear-size: var(--m-field-clear-hit-size);

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

    --m-phone-field-radius-md: var(--m-field-radius-md);
    --m-phone-field-radius-sm: var(--m-field-radius-sm);
    --m-phone-field-flag-radius: 3px;

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

    --m-phone-field-gap-md: var(--m-field-gap-sm);
    --m-phone-field-input-wrap-gap: var(--m-field-gap-md);
    --m-phone-field-input-wrap-gap-mobile: var(--m-field-gap-sm);

    --m-phone-field-country-min-width: 104px;
    --m-phone-field-country-min-width-mobile: 92px;

    --m-phone-field-label-margin-bottom: var(--m-field-label-gap);
    --m-phone-field-feedback-margin-top: var(--m-field-help-gap);

    --m-phone-field-dropdown-offset: 8px;
    --m-phone-field-dropdown-width: 420px;
    --m-phone-field-dropdown-max-height: 300px;

    --m-phone-field-search-height: var(--m-field-height-sm);
    --m-phone-field-search-padding: var(--m-field-gap-md);
    --m-phone-field-search-padding-inline: var(--m-field-padding-x-sm);
    --m-phone-field-search-radius: var(--m-field-radius-md);

    --m-phone-field-list-padding: 6px;

    --m-phone-field-option-min-height: 42px;
    --m-phone-field-option-padding-y: 7px;
    --m-phone-field-option-padding-x: 10px;
    --m-phone-field-option-radius: var(--m-field-radius-md);

    --m-phone-field-empty-padding: 14px;

    /* =====================================================
       4) METRICS — TYPOGRAPHY
    ===================================================== */

    --m-phone-field-label-font-size: var(--m-field-label-font-size);
    --m-phone-field-label-font-weight: var(--m-field-label-font-weight);
    --m-phone-field-label-line-height: var(--m-field-label-line-height);

    --m-phone-field-code-font-size: 13px;
    --m-phone-field-code-font-weight: 700;

    --m-phone-field-option-name-font-size: 13px;
    --m-phone-field-option-meta-font-size: 11px;
    --m-phone-field-option-dial-font-size: 13px;
    --m-phone-field-option-dial-font-weight: 600;

    --m-phone-field-empty-font-size: 13px;
    --m-phone-field-feedback-font-size: var(--m-field-help-font-size);
    --m-phone-field-feedback-line-height: var(--m-field-help-line-height);

    --m-phone-field-caret-font-size: 10px;

    /* =====================================================
       5) METRICS — MOTION
    ===================================================== */

    --m-phone-field-transition: var(--m-field-transition-base);
    --m-phone-field-focus-ring-size: var(--m-field-focus-width);
    --m-phone-field-invalid-ring-size: var(--m-field-focus-width);
    --m-phone-field-search-focus-ring-size: var(--m-field-focus-width);

    /* =====================================================
       6) METRICS — LAYERING
    ===================================================== */

    --m-phone-field-z-index: 1;
    --m-phone-field-z-open: 120;
    --m-phone-field-dropdown-z: 130;

    /* =====================================================
       7) RUNTIME CONTEXT BRIDGE
    ===================================================== */

    --m-phone-field-context-surface: var(--m-context-surface);
    --m-phone-field-context-surface-soft: var(--m-context-surface-soft);
    --m-phone-field-context-surface-muted: var(--m-context-surface-muted);
    --m-phone-field-context-surface-raised: var(--m-context-surface-raised);
    --m-phone-field-context-surface-hover: var(--m-context-surface-hover);
    --m-phone-field-context-surface-active: var(--m-context-surface-active);
    --m-phone-field-context-surface-selected: var(--m-context-surface-selected);

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

    --m-phone-field-context-text: var(--m-context-text);
    --m-phone-field-context-text-strong: var(--m-context-text-strong);
    --m-phone-field-context-text-soft: var(--m-context-text-soft);
    --m-phone-field-context-text-muted: var(--m-context-text-muted);
    --m-phone-field-context-text-faint: var(--m-context-text-faint);

    --m-phone-field-context-accent: var(--m-context-accent-color);
    --m-phone-field-context-focus-ring: var(--m-context-focus-ring);

    --m-phone-field-context-shadow-panel: var(--m-context-shadow-panel);

    --m-phone-field-context-success-text: var(
        --m-context-success-text,
        var(--m-phone-field-context-text)
    );

    --m-phone-field-context-danger-border: var(
        --m-context-danger-border,
        var(--m-phone-field-context-border)
    );

    --m-phone-field-context-danger-text: var(
        --m-context-danger-text,
        var(--m-phone-field-context-text)
    );

    /* =====================================================
       8) COMPONENT CONTRACT — ROOT / CONTROL
    ===================================================== */

    --m-phone-field-bg: var(--m-phone-field-context-surface);
    --m-phone-field-text: var(--m-phone-field-context-text);
    --m-phone-field-border: var(--m-phone-field-context-border);
    --m-phone-field-border-hover: var(--m-phone-field-context-border-strong);

    --m-phone-field-focus-border: var(--m-phone-field-context-accent);
    --m-phone-field-focus-ring: var(--m-phone-field-context-focus-ring);

    --m-phone-field-invalid-border: var(--m-phone-field-context-danger-border);
    --m-phone-field-invalid-ring: var(--m-phone-field-context-focus-ring);

    --m-phone-field-disabled-bg: var(--m-phone-field-context-surface-muted);
    --m-phone-field-disabled-border: var(--m-phone-field-context-border-subtle);
    --m-phone-field-disabled-text: var(--m-phone-field-context-text-faint);

    --m-phone-field-input-text: var(--m-phone-field-context-text-strong);
    --m-phone-field-placeholder-text: var(--m-phone-field-context-text-muted);
    --m-phone-field-empty-text: var(--m-phone-field-context-text-soft);

    /* =====================================================
       9) COMPONENT CONTRACT — COUNTRY
    ===================================================== */

    --m-phone-field-country-bg: var(--m-phone-field-context-surface-soft);
    --m-phone-field-country-bg-hover: var(--m-phone-field-context-surface-hover);
    --m-phone-field-country-bg-active: var(--m-phone-field-context-surface-active);
    --m-phone-field-country-text: var(--m-phone-field-context-text-strong);
    --m-phone-field-country-separator-border: var(--m-phone-field-context-border);

    /* =====================================================
       10) COMPONENT CONTRACT — DROPDOWN / SEARCH / OPTION
    ===================================================== */

    --m-phone-field-dropdown-bg: var(--m-phone-field-context-surface-raised);
    --m-phone-field-dropdown-border: var(--m-phone-field-context-border-soft);
    --m-phone-field-dropdown-radius: var(--m-phone-field-radius-md);
    --m-phone-field-dropdown-shadow: var(--m-phone-field-context-shadow-panel);

    --m-phone-field-search-bg: var(--m-phone-field-context-surface);
    --m-phone-field-search-border: var(--m-phone-field-context-border);
    --m-phone-field-search-focus-border: var(--m-phone-field-context-accent);
    --m-phone-field-search-focus-ring: var(--m-phone-field-context-focus-ring);

    --m-phone-field-option-hover-bg: var(--m-phone-field-context-surface-hover);
    --m-phone-field-option-active-bg: var(--m-phone-field-context-surface-active);
    --m-phone-field-option-selected-bg: var(--m-phone-field-context-surface-selected);

    /* =====================================================
       11) COMPONENT CONTRACT — CLEAR / FLAG / FEEDBACK
    ===================================================== */

    --m-phone-field-clear-bg: transparent;
    --m-phone-field-clear-text: var(--m-phone-field-context-text-muted);
    --m-phone-field-clear-hover-bg: var(--m-phone-field-context-surface-hover);
    --m-phone-field-clear-hover-text: var(--m-phone-field-context-text-strong);

    --m-phone-field-flag-outline-shadow: var(--m-phone-field-context-border-subtle);

    --m-phone-field-help-text: var(--m-phone-field-context-text-soft);
    --m-phone-field-error-text: var(--m-phone-field-context-danger-text);
    --m-phone-field-success-text: var(--m-phone-field-context-success-text);
    --m-phone-field-required-text: var(--m-phone-field-context-danger-text);

    /* =====================================================
       12) RENDER ALIASES
    ===================================================== */

    --phone_field_height_md: var(--m-phone-field-height-md);
    --phone_field_padding_x: var(--m-phone-field-padding-x);
    --phone_field_country_padding_x: var(--m-phone-field-country-padding-x);

    --phone_field_font_size: var(--m-phone-field-font-size);

    --phone_field_flag_width: var(--m-phone-field-flag-width);
    --phone_field_flag_height: var(--m-phone-field-flag-height);

    --phone_field_clear_size: var(--m-phone-field-clear-size);

    --phone_field_radius_md: var(--m-phone-field-radius-md);
    --phone_field_radius_sm: var(--m-phone-field-radius-sm);
    --phone_field_flag_radius: var(--m-phone-field-flag-radius);

    --phone_field_gap_md: var(--m-phone-field-gap-md);
    --phone_field_input_wrap_gap: var(--m-phone-field-input-wrap-gap);
    --phone_field_input_wrap_gap_mobile: var(--m-phone-field-input-wrap-gap-mobile);

    --phone_field_country_min_width: var(--m-phone-field-country-min-width);
    --phone_field_country_min_width_mobile: var(--m-phone-field-country-min-width-mobile);

    --phone_field_label_margin_bottom: var(--m-phone-field-label-margin-bottom);
    --phone_field_feedback_margin_top: var(--m-phone-field-feedback-margin-top);

    --phone_field_dropdown_offset: var(--m-phone-field-dropdown-offset);
    --phone_field_dropdown_width: var(--m-phone-field-dropdown-width);
    --phone_field_dropdown_max_height: var(--m-phone-field-dropdown-max-height);

    --phone_field_search_height: var(--m-phone-field-search-height);
    --phone_field_search_padding: var(--m-phone-field-search-padding);
    --phone_field_search_padding_inline: var(--m-phone-field-search-padding-inline);
    --phone_field_search_radius: var(--m-phone-field-search-radius);

    --phone_field_list_padding: var(--m-phone-field-list-padding);

    --phone_field_option_min_height: var(--m-phone-field-option-min-height);
    --phone_field_option_padding_y: var(--m-phone-field-option-padding-y);
    --phone_field_option_padding_x: var(--m-phone-field-option-padding-x);
    --phone_field_option_radius: var(--m-phone-field-option-radius);

    --phone_field_empty_padding: var(--m-phone-field-empty-padding);

    --phone_field_label_font_size: var(--m-phone-field-label-font-size);
    --phone_field_label_font_weight: var(--m-phone-field-label-font-weight);
    --phone_field_label_line_height: var(--m-phone-field-label-line-height);

    --phone_field_code_font_size: var(--m-phone-field-code-font-size);
    --phone_field_code_font_weight: var(--m-phone-field-code-font-weight);

    --phone_field_option_name_font_size: var(--m-phone-field-option-name-font-size);
    --phone_field_option_meta_font_size: var(--m-phone-field-option-meta-font-size);
    --phone_field_option_dial_font_size: var(--m-phone-field-option-dial-font-size);
    --phone_field_option_dial_font_weight: var(--m-phone-field-option-dial-font-weight);

    --phone_field_empty_font_size: var(--m-phone-field-empty-font-size);
    --phone_field_feedback_font_size: var(--m-phone-field-feedback-font-size);
    --phone_field_feedback_line_height: var(--m-phone-field-feedback-line-height);

    --phone_field_caret_font_size: var(--m-phone-field-caret-font-size);

    --phone_field_transition: var(--m-phone-field-transition);
    --phone_field_focus_ring_size: var(--m-phone-field-focus-ring-size);
    --phone_field_invalid_ring_size: var(--m-phone-field-invalid-ring-size);
    --phone_field_search_focus_ring_size: var(--m-phone-field-search-focus-ring-size);

    --phone_field_z_index: var(--m-phone-field-z-index);
    --phone_field_z_open: var(--m-phone-field-z-open);
    --phone_field_dropdown_z: var(--m-phone-field-dropdown-z);

    --phone_field_bg: var(--m-phone-field-bg);
    --phone_field_text: var(--m-phone-field-text);
    --phone_field_border: var(--m-phone-field-border);
    --phone_field_border_hover: var(--m-phone-field-border-hover);

    --phone_field_focus_border: var(--m-phone-field-focus-border);
    --phone_field_focus_ring: var(--m-phone-field-focus-ring);

    --phone_field_invalid_border: var(--m-phone-field-invalid-border);
    --phone_field_invalid_ring: var(--m-phone-field-invalid-ring);

    --phone_field_disabled_bg: var(--m-phone-field-disabled-bg);
    --phone_field_disabled_border: var(--m-phone-field-disabled-border);
    --phone_field_disabled_text: var(--m-phone-field-disabled-text);

    --phone_field_input_text: var(--m-phone-field-input-text);
    --phone_field_placeholder_text: var(--m-phone-field-placeholder-text);
    --phone_field_empty_text: var(--m-phone-field-empty-text);

    --phone_field_country_bg: var(--m-phone-field-country-bg);
    --phone_field_country_bg_hover: var(--m-phone-field-country-bg-hover);
    --phone_field_country_bg_active: var(--m-phone-field-country-bg-active);
    --phone_field_country_text: var(--m-phone-field-country-text);
    --phone_field_country_separator_border: var(--m-phone-field-country-separator-border);

    --phone_field_dropdown_bg: var(--m-phone-field-dropdown-bg);
    --phone_field_dropdown_border: var(--m-phone-field-dropdown-border);
    --phone_field_dropdown_radius: var(--m-phone-field-dropdown-radius);
    --phone_field_dropdown_shadow: var(--m-phone-field-dropdown-shadow);

    --phone_field_search_bg: var(--m-phone-field-search-bg);
    --phone_field_search_border: var(--m-phone-field-search-border);
    --phone_field_search_focus_border: var(--m-phone-field-search-focus-border);
    --phone_field_search_focus_ring: var(--m-phone-field-search-focus-ring);

    --phone_field_option_hover_bg: var(--m-phone-field-option-hover-bg);
    --phone_field_option_active_bg: var(--m-phone-field-option-active-bg);
    --phone_field_option_selected_bg: var(--m-phone-field-option-selected-bg);

    --phone_field_clear_bg: var(--m-phone-field-clear-bg);
    --phone_field_clear_text: var(--m-phone-field-clear-text);
    --phone_field_clear_hover_bg: var(--m-phone-field-clear-hover-bg);
    --phone_field_clear_hover_text: var(--m-phone-field-clear-hover-text);

    --phone_field_flag_outline_shadow: var(--m-phone-field-flag-outline-shadow);

    --phone_field_help_text: var(--m-phone-field-help-text);
    --phone_field_error_text: var(--m-phone-field-error-text);
    --phone_field_success_text: var(--m-phone-field-success-text);
    --phone_field_required_text: var(--m-phone-field-required-text);
}