/* =========================================================
   Market UI v2 - Input Field Variables
   Path: public/assets/marketv2/components/input-field/variables.css

   Canonical Architecture
   ---------------------------------------------------------
   Official visual contract for Input Field component.

   Follows approved architecture:
   runtime theme context -> component contract -> render aliases

   Rules:
   - reads only from --m-context-*
   - builds only --m-input-field-* then compatibility aliases
   - no direct colors
   - no rgba()
   - no color-mix()
   - no local palette
   - no slot palette
   - no business logic
   - no user_type logic
========================================================= */

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

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

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

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

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

    --m-input-field-icon-size-sm: var(--m-field-icon-size-sm);
    --m-input-field-icon-size-md: var(--m-field-icon-size-md);
    --m-input-field-icon-size-lg: var(--m-field-icon-size-lg);

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

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

    --m-input-field-clear-hit-size: var(--m-field-clear-hit-size);
    --m-input-field-prefix-padding-inline: var(--m-field-gap-sm);
    --m-input-field-suffix-padding-inline: var(--m-field-gap-sm);

    --m-input-field-inline-label-gap: var(--m-field-gap-lg);

    --m-input-field-compact-height: 36px;
    --m-input-field-compact-padding-x: 12px;
    --m-input-field-compact-icon-size: 16px;

    /* =====================================================
       3) METRICS — TYPOGRAPHY
    ===================================================== */

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

    --m-input-field-feedback-font-size: var(--m-field-help-font-size);
    --m-input-field-feedback-line-height: var(--m-field-help-line-height);

    --m-input-field-text-line-height: 1.5;

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

    --m-input-field-transition-fast: var(--m-field-transition-fast);
    --m-input-field-transition-base: var(--m-field-transition-base);

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

    --m-input-field-context-surface: var(--m-context-surface);
    --m-input-field-context-surface-soft: var(--m-context-surface-soft);
    --m-input-field-context-surface-muted: var(--m-context-surface-muted);
    --m-input-field-context-surface-hover: var(--m-context-surface-hover);

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

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

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

    /* =====================================================
       6) COMPONENT CONTRACT — STRUCTURE
    ===================================================== */

    --m-input-field-label-text: var(--m-theme-form-label-text, var(--m-input-field-context-text-strong));
    --m-input-field-help-text: var(--m-input-field-context-text-muted);
    --m-input-field-error-text: var(--m-input-field-context-text-muted);
    --m-input-field-success-text: var(--m-input-field-context-text-muted);

    --m-input-field-bg: var(--m-theme-form-control-bg, var(--m-theme-form-bg, var(--m-input-field-context-surface)));
    --m-input-field-text-color: var(--m-theme-form-control-text, var(--m-input-field-context-text-strong));
    --m-input-field-border-color: var(--m-theme-form-border, var(--m-input-field-context-border));

    --m-input-field-hover-bg: var(--m-input-field-context-surface);
    --m-input-field-hover-border-color: var(--m-input-field-context-border-strong);

    --m-input-field-focus-bg: var(--m-theme-form-control-bg-focus, var(--m-input-field-context-surface));
    --m-input-field-focus-border-color: var(--m-theme-form-focus-border, var(--m-input-field-context-accent));

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

    --m-input-field-readonly-bg: var(--m-input-field-context-surface-soft);
    --m-input-field-readonly-text-color: var(--m-input-field-context-text);
    --m-input-field-readonly-border-color: var(--m-input-field-context-border);

    --m-input-field-placeholder-text: var(--m-theme-form-placeholder-text, var(--m-input-field-context-text-muted));

    /* =====================================================
       7) COMPONENT CONTRACT — AFFIX / CLEAR / SEARCH
    ===================================================== */

    --m-input-field-affix-bg: transparent;
    --m-input-field-affix-text: var(--m-input-field-context-text-muted);

    --m-input-field-icon-text-focus: var(--m-input-field-context-accent);

    --m-input-field-clear-bg: transparent;
    --m-input-field-clear-text: var(--m-input-field-context-text-muted);
    --m-input-field-clear-border: transparent;

    --m-input-field-clear-hover-bg: var(--m-input-field-context-surface-soft);
    --m-input-field-clear-hover-text: var(--m-input-field-context-text-strong);
    --m-input-field-clear-hover-border: transparent;

    --m-input-field-clear-active-bg: var(--m-input-field-context-surface-muted);
    --m-input-field-clear-active-text: var(--m-input-field-context-text-strong);
    --m-input-field-clear-active-border: transparent;

    --m-input-field-search-icon-text: var(--m-input-field-context-text-muted);
    --m-input-field-search-icon-text-focus: var(--m-input-field-context-accent);

    /* =====================================================
       8) COMPONENT CONTRACT — STATES
    ===================================================== */

    --m-input-field-shadow: var(--m-context-shadow);
    --m-input-field-shadow-hover: var(--m-context-shadow-hover);
    --m-input-field-shadow-focus: var(--m-field-focus-shadow);

    --m-input-field-invalid-border-color: var(--m-input-field-context-border-strong);
    --m-input-field-invalid-shadow: var(--m-field-focus-shadow);

    --m-input-field-valid-border-color: var(--m-input-field-context-accent);
    --m-input-field-valid-shadow: var(--m-field-focus-shadow);

    /* =====================================================
       9) COMPATIBILITY RENDER ALIASES
    ===================================================== */

    --input_field_height_sm: var(--m-input-field-height-sm);
    --input_field_height_md: var(--m-input-field-height-md);
    --input_field_height_lg: var(--m-input-field-height-lg);

    --input_field_padding_x_sm: var(--m-input-field-padding-x-sm);
    --input_field_padding_x_md: var(--m-input-field-padding-x-md);
    --input_field_padding_x_lg: var(--m-input-field-padding-x-lg);

    --input_field_font_size_sm: var(--m-input-field-font-size-sm);
    --input_field_font_size_md: var(--m-input-field-font-size-md);
    --input_field_font_size_lg: var(--m-input-field-font-size-lg);

    --input_field_radius_sm: var(--m-input-field-radius-sm);
    --input_field_radius_md: var(--m-input-field-radius-md);
    --input_field_radius_lg: var(--m-input-field-radius-lg);

    --input_field_icon_size_sm: var(--m-input-field-icon-size-sm);
    --input_field_icon_size_md: var(--m-input-field-icon-size-md);
    --input_field_icon_size_lg: var(--m-input-field-icon-size-lg);

    --input_field_label_margin_bottom: var(--m-input-field-label-margin-bottom);
    --input_field_help_margin_top: var(--m-input-field-help-margin-top);
    --input_field_error_margin_top: var(--m-input-field-feedback-margin-top);
    --input_field_success_margin_top: var(--m-input-field-feedback-margin-top);

    --input_field_clear_hit_size: var(--m-input-field-clear-hit-size);
    --input_field_prefix_gap: var(--m-input-field-prefix-padding-inline);
    --input_field_suffix_gap: var(--m-input-field-suffix-padding-inline);

    --input_field_label_font_size: var(--m-input-field-label-font-size);
    --input_field_label_font_weight: var(--m-input-field-label-font-weight);
    --input_field_label_line_height: var(--m-input-field-label-line-height);

    --input_field_feedback_font_size: var(--m-input-field-feedback-font-size);
    --input_field_feedback_line_height: var(--m-input-field-feedback-line-height);

    --input_field_text_line_height: var(--m-input-field-text-line-height);

    --input_field_transition_fast: var(--m-input-field-transition-fast);
    --input_field_transition_base: var(--m-input-field-transition-base);

    --input_field_label_text: var(--m-input-field-label-text);
    --input_field_help_text: var(--m-input-field-help-text);
    --input_field_error_text: var(--m-input-field-error-text);
    --input_field_success_text: var(--m-input-field-success-text);

    --input_field_bg: var(--m-input-field-bg);
    --input_field_text_color: var(--m-input-field-text-color);
    --input_field_border_color: var(--m-input-field-border-color);

    --input_field_hover_bg: var(--m-input-field-hover-bg);
    --input_field_hover_border: var(--m-input-field-hover-border-color);

    --input_field_focus_bg: var(--m-input-field-focus-bg);
    --input_field_focus_border_color: var(--m-input-field-focus-border-color);

    --input_field_disabled_background: var(--m-input-field-disabled-bg);
    --input_field_disabled_text_color: var(--m-input-field-disabled-text-color);
    --input_field_disabled_border_color: var(--m-input-field-disabled-border-color);

    --input_field_readonly_background: var(--m-input-field-readonly-bg);
    --input_field_readonly_text_color: var(--m-input-field-readonly-text-color);
    --input_field_readonly_border_color: var(--m-input-field-readonly-border-color);

    --input_field_placeholder_text: var(--m-input-field-placeholder-text);

    --input_field_icon_text_focus: var(--m-input-field-icon-text-focus);

    --input_field_clear_bg: var(--m-input-field-clear-bg);
    --input_field_clear_text: var(--m-input-field-clear-text);
    --input_field_clear_border: var(--m-input-field-clear-border);

    --input_field_clear_hover_bg: var(--m-input-field-clear-hover-bg);
    --input_field_clear_hover_text: var(--m-input-field-clear-hover-text);
    --input_field_clear_hover_border: var(--m-input-field-clear-hover-border);

    --input_field_clear_active_bg: var(--m-input-field-clear-active-bg);
    --input_field_clear_active_text: var(--m-input-field-clear-active-text);
    --input_field_clear_active_border: var(--m-input-field-clear-active-border);

    --input_field_affix_bg: var(--m-input-field-affix-bg);
    --input_field_affix_text: var(--m-input-field-affix-text);

    --input_field_search_icon_text: var(--m-input-field-search-icon-text);
    --input_field_search_icon_text_focus: var(--m-input-field-search-icon-text-focus);

    --input_field_compact_height: var(--m-input-field-compact-height);
    --input_field_compact_padding_x: var(--m-input-field-compact-padding-x);
    --input_field_compact_icon_size: var(--m-input-field-compact-icon-size);

    --input_field_inline_label_gap: var(--m-input-field-inline-label-gap);

    --input_field_shadow: var(--m-input-field-shadow);
    --input_field_shadow_hover: var(--m-input-field-shadow-hover);
    --input_field_shadow_focus: var(--m-input-field-shadow-focus);

    --input_field_invalid_border: var(--m-input-field-invalid-border-color);
    --input_field_shadow_invalid: var(--m-input-field-invalid-shadow);

    --input_field_valid_border: var(--m-input-field-valid-border-color);
    --input_field_shadow_valid: var(--m-input-field-valid-shadow);
}