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

   Constitutional Version
   ---------------------------------------------------------
   - metrics layer
   - context bridge layer
   - component identity layer
   - contract layer
   - no raw colors
   - no local semantic palette
   - compatible with current choices.css / choices.js
========================================================= */

:root,
.m-theme-default {
    /* =====================================================
       1) METRICS LAYER
    ===================================================== */

    --m-choice-gap-sm: var(--m-field-gap-sm);
    --m-choice-gap-md: var(--m-field-gap-md);
    --m-choice-gap-lg: var(--m-field-gap-lg);

    --m-choice-label-font-size-sm: var(--m-field-help-font-size);
    --m-choice-label-font-size-md: var(--m-field-label-font-size);
    --m-choice-label-font-size-lg: var(--m-field-font-size-md);

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

    --m-choice-hint-gap: var(--m-field-help-gap);
    --m-choice-hint-font-size: var(--m-field-help-font-size);
    --m-choice-hint-line-height: var(--m-field-help-line-height);

    --m-choice-min-height-check-radio-sm: 18px;
    --m-choice-min-height-check-radio-md: 20px;
    --m-choice-min-height-check-radio-lg: 22px;

    --m-choice-min-height-switch-sm: 22px;
    --m-choice-min-height-switch-md: 24px;
    --m-choice-min-height-switch-lg: 28px;

    --m-choice-checkbox-size-sm: var(--m-field-choice-box-size-sm);
    --m-choice-checkbox-size-md: var(--m-field-choice-box-size-md);
    --m-choice-checkbox-size-lg: var(--m-field-choice-box-size-lg);

    --m-choice-checkbox-radius: var(--m-field-radius-sm);

    --m-choice-radio-size-sm: var(--m-field-choice-box-size-sm);
    --m-choice-radio-size-md: var(--m-field-choice-box-size-md);
    --m-choice-radio-size-lg: var(--m-field-choice-box-size-lg);

    --m-choice-radio-radius: 999px;
    --m-choice-radio-dot-size-sm: 7px;
    --m-choice-radio-dot-size-md: 8px;
    --m-choice-radio-dot-size-lg: 9px;

    --m-choice-check-icon-size-sm: 10px;
    --m-choice-check-icon-size-md: var(--m-field-choice-check-icon-size);
    --m-choice-check-icon-size-lg: 12px;

    --m-choice-switch-track-width-sm: 32px;
    --m-choice-switch-track-width-md: 36px;
    --m-choice-switch-track-width-lg: 42px;

    --m-choice-switch-track-height-sm: 18px;
    --m-choice-switch-track-height-md: 20px;
    --m-choice-switch-track-height-lg: 24px;

    --m-choice-switch-thumb-size-sm: 12px;
    --m-choice-switch-thumb-size-md: 14px;
    --m-choice-switch-thumb-size-lg: 18px;

    --m-choice-switch-thumb-offset-sm: 14px;
    --m-choice-switch-thumb-offset-md: 16px;
    --m-choice-switch-thumb-offset-lg: 18px;

    --m-choice-switch-radius: 999px;
    --m-choice-switch-thumb-radius: 999px;

    --m-choice-group-gap: var(--m-field-gap-lg);
    --m-choice-group-items-gap: var(--m-field-gap-lg);
    --m-choice-group-inline-gap: calc(var(--m-field-gap-lg) + var(--m-field-gap-sm));
    --m-choice-group-segment-padding: var(--m-field-choice-group-segment-padding);
    --m-choice-group-segment-gap: var(--m-field-gap-sm);
    --m-choice-group-segment-radius: var(--m-field-radius-md);
    --m-choice-group-option-min-height-sm: var(--m-field-choice-group-option-height-sm);
    --m-choice-group-option-min-height-md: var(--m-field-choice-group-option-height-md);
    --m-choice-group-option-min-height-lg: var(--m-field-choice-group-option-height-lg);
    --m-choice-group-option-padding-x-sm: var(--m-field-padding-x-sm);
    --m-choice-group-option-padding-x-md: var(--m-field-padding-x-md);
    --m-choice-group-option-padding-x-lg: var(--m-field-padding-x-lg);
    --m-choice-group-option-radius: var(--m-field-radius-md);
    --m-choice-group-option-gap: var(--m-field-gap-md);

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

    --m-choice-group-hint-font-size: var(--m-field-help-font-size);
    --m-choice-group-hint-line-height: var(--m-field-help-line-height);
    --m-choice-group-option-label-font-size: var(--m-field-font-size-md);
    --m-choice-group-option-label-font-weight: var(--m-field-label-font-weight);
    --m-choice-group-option-hint-font-size: var(--m-field-help-font-size);
    --m-choice-group-option-hint-line-height: var(--m-field-help-line-height);

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

    /* =====================================================
       2) CONTEXT BRIDGE LAYER
       -----------------------------------------------------
       component override
       -> context
       -> system/foundation fallback
    ===================================================== */

    /* Surface bridge */
    --m-choice-context-surface: var(--m-component-surface, var(--m-context-surface, var(--m-surface, var(--color-surface, #ffffff))));
    --m-choice-context-surface-soft: var(--m-component-surface-soft, var(--m-context-surface-soft, var(--m-surface-soft, var(--color-surface-soft, #f8fafc))));
    --m-choice-context-surface-muted: var(--m-component-surface-muted, var(--m-context-surface-muted, var(--m-surface-muted, var(--color-surface-muted, #f1f5f9))));
    --m-choice-context-surface-raised: var(--m-component-surface-raised, var(--m-context-surface-raised, var(--m-surface-raised, var(--color-surface-raised, #ffffff))));
    --m-choice-context-surface-elevated: var(--m-component-surface-elevated, var(--m-context-surface-elevated, var(--m-surface-elevated, var(--color-surface-elevated, var(--m-choice-context-surface-raised)))));
    --m-choice-context-surface-hover: var(--m-component-surface-hover, var(--m-context-surface-hover, var(--m-surface-hover, var(--color-surface-hover, var(--m-choice-context-surface-soft)))));
    --m-choice-context-surface-active: var(--m-component-surface-active, var(--m-context-surface-active, var(--m-surface-active, var(--color-surface-active, var(--m-choice-context-surface-soft)))));
    --m-choice-context-surface-selected: var(--m-component-surface-selected, var(--m-context-surface-selected, var(--m-surface-selected, var(--color-surface-selected, var(--m-choice-context-surface-active)))));

    /* Border bridge */
    --m-choice-context-border: var(--m-component-border, var(--m-context-border, var(--m-border, var(--color-border, #e2e8f0))));
    --m-choice-context-border-subtle: var(--m-component-border-subtle, var(--m-context-border-subtle, var(--m-border-subtle, var(--color-border-subtle, #edf2f7))));
    --m-choice-context-border-soft: var(--m-component-border-soft, var(--m-context-border-soft, var(--m-border-soft, var(--color-border-soft, var(--m-choice-context-border-subtle)))));
    --m-choice-context-border-strong: var(--m-component-border-strong, var(--m-context-border-strong, var(--m-border-strong, var(--color-border-strong, #cbd5e1))));
    --m-choice-context-border-active: var(--m-component-border-active, var(--m-context-border-active, var(--m-border-active, var(--color-border-active, var(--m-choice-context-border-strong)))));
    --m-choice-context-focus-ring: var(--m-component-focus-ring, var(--m-context-focus-ring, var(--color-focus-ring, rgba(37, 99, 235, 0.18))));

    /* Text bridge */
    --m-choice-context-text: var(--m-component-text, var(--m-context-text, var(--m-text, var(--color-text, #334155))));
    --m-choice-context-text-strong: var(--m-component-text-strong, var(--m-context-text-strong, var(--m-text-strong, var(--color-text-strong, #0f172a))));
    --m-choice-context-text-soft: var(--m-component-text-soft, var(--m-context-text-soft, var(--m-text-soft, var(--color-text-soft, #475569))));
    --m-choice-context-text-muted: var(--m-component-text-muted, var(--m-context-text-muted, var(--m-text-muted, var(--color-text-muted, #64748b))));
    --m-choice-context-text-faint: var(--m-component-text-faint, var(--m-context-text-faint, var(--m-text-faint, var(--color-text-faint, #94a3b8))));
    --m-choice-context-text-inverse: var(--m-component-text-inverse, var(--m-context-text-inverse, var(--m-text-inverse, var(--color-text-inverse, #ffffff))));

    /* Accent bridge */
    --m-choice-context-accent-color: var(--m-component-accent-color, var(--m-context-accent-color, var(--m-accent-color, var(--m-color-c1, var(--color-slot-1, #2563eb)))));
    --m-choice-context-accent-color-hover: var(--m-component-accent-color-hover, var(--m-context-accent-color-hover, var(--m-accent-color-hover, var(--m-color-c1-hover, var(--color-slot-1-hover, #1d4ed8)))));
    --m-choice-context-accent-color-active: var(--m-component-accent-color-active, var(--m-context-accent-color-active, var(--m-accent-color-active, var(--m-color-c1-active, var(--color-slot-1-active, #1e40af)))));
    --m-choice-context-accent-soft: var(--m-component-accent-soft, var(--m-context-accent-soft, var(--m-accent-soft, var(--m-color-c1-soft, var(--color-slot-1-soft, #eff6ff)))));
    --m-choice-context-accent-soft-strong: var(--m-component-accent-soft-strong, var(--m-context-accent-soft-strong, var(--m-accent-soft-strong, var(--m-color-c1-soft-strong, var(--color-slot-1-soft-strong, #dbeafe)))));
    --m-choice-context-accent-text-inverse: var(--m-component-accent-text-inverse, var(--m-context-accent-text-inverse, var(--m-accent-text-inverse, var(--m-color-c1-text-inverse, var(--color-slot-1-text-inverse, #ffffff)))));

    /* State bridge */
    --m-choice-context-state-hover-bg: var(--m-component-state-hover-bg, var(--m-context-state-hover-bg, var(--m-choice-context-surface-hover)));
    --m-choice-context-state-hover-border: var(--m-component-state-hover-border, var(--m-context-state-hover-border, var(--m-choice-context-border-strong)));
    --m-choice-context-state-active-bg: var(--m-component-state-active-bg, var(--m-context-state-active-bg, var(--m-choice-context-surface-active)));
    --m-choice-context-state-active-border: var(--m-component-state-active-border, var(--m-context-state-active-border, var(--m-choice-context-border-active)));
    --m-choice-context-state-selected-bg: var(--m-component-state-selected-bg, var(--m-context-state-selected-bg, var(--m-choice-context-surface-selected)));
    --m-choice-context-state-selected-border: var(--m-component-state-selected-border, var(--m-context-state-selected-border, var(--m-choice-context-border-active)));

    /* Elevation bridge */
    --m-choice-context-shadow: var(--m-component-shadow, var(--m-context-shadow, var(--shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.04))));
    --m-choice-context-shadow-hover: var(--m-component-shadow-hover, var(--m-context-shadow-hover, var(--shadow-md, 0 10px 24px rgba(15, 23, 42, 0.06))));

    /* =====================================================
       3) COMPONENT IDENTITY LAYER
    ===================================================== */

    /* Surface identity */
    --m-choice-surface: var(--m-choice-context-surface);
    --m-choice-surface-soft: var(--m-choice-context-surface-soft);
    --m-choice-surface-muted: var(--m-choice-context-surface-muted);
    --m-choice-surface-raised: var(--m-choice-context-surface-raised);
    --m-choice-surface-elevated: var(--m-choice-context-surface-elevated);

    /* Border identity */
    --m-choice-border-color: var(--m-choice-context-border);
    --m-choice-border-color-subtle: var(--m-choice-context-border-subtle);
    --m-choice-border-color-soft: var(--m-choice-context-border-soft);
    --m-choice-border-color-strong: var(--m-choice-context-border-strong);
    --m-choice-border-color-active: var(--m-choice-context-border-active);

    /* Text identity */
    --m-choice-text-color: var(--m-choice-context-text);
    --m-choice-text-strong-color: var(--m-choice-context-text-strong);
    --m-choice-text-soft-color: var(--m-choice-context-text-soft);
    --m-choice-text-muted-color: var(--m-choice-context-text-muted);
    --m-choice-text-faint-color: var(--m-choice-context-text-faint);
    --m-choice-text-inverse-color: var(--m-choice-context-text-inverse);

    /* Accent identity */
    --m-choice-accent-color: var(--m-choice-context-accent-color);
    --m-choice-accent-color-hover: var(--m-choice-context-accent-color-hover);
    --m-choice-accent-color-active: var(--m-choice-context-accent-color-active);
    --m-choice-accent-soft: var(--m-choice-context-accent-soft);
    --m-choice-accent-soft-strong: var(--m-choice-context-accent-soft-strong);
    --m-choice-accent-text-inverse: var(--m-choice-context-accent-text-inverse);

    /* State identity */
    --m-choice-state-hover-bg: var(--m-choice-context-state-hover-bg);
    --m-choice-state-hover-border: var(--m-choice-context-state-hover-border);
    --m-choice-state-active-bg: var(--m-choice-context-state-active-bg);
    --m-choice-state-active-border: var(--m-choice-context-state-active-border);
    --m-choice-state-selected-bg: var(--m-choice-context-state-selected-bg);
    --m-choice-state-selected-border: var(--m-choice-context-state-selected-border);

    /* Elevation identity */
    --m-choice-shadow: var(--m-choice-context-shadow);
    --m-choice-shadow-hover: var(--m-choice-context-shadow-hover);

    /* =====================================================
       4) SLOT ACCENT IDENTITY
       -----------------------------------------------------
       الأصل = context accent
       ويمكن override اختياري عبر data-slot/data-theme-slot/data-accent
    ===================================================== */

    --m-choice-slot-accent-color: var(--m-choice-accent-color);
    --m-choice-slot-accent-color-hover: var(--m-choice-accent-color-hover);
    --m-choice-slot-accent-color-active: var(--m-choice-accent-color-active);
    --m-choice-slot-accent-soft: var(--m-choice-accent-soft);
    --m-choice-slot-accent-soft-strong: var(--m-choice-accent-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-choice-accent-text-inverse);

    /* =====================================================
       5) CONTRACT LAYER
       -----------------------------------------------------
       هذه هي الطبقة التي يستهلكها choices.css
    ===================================================== */

    /* Base family */
    --m-choice-bg: var(--m-choice-surface);
    --m-choice-text: var(--m-choice-text-color);
    --m-choice-border: var(--m-choice-border-color);

    --m-choice-bg-hover: var(--m-choice-state-hover-bg);
    --m-choice-text-hover: var(--m-choice-text-color);
    --m-choice-border-hover: var(--m-choice-state-hover-border);

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

    /* Labels / hints */
    --m-choice-label-color: var(--m-choice-text-color);
    --m-choice-hint-color: var(--m-choice-text-muted-color);

    --m-choice-group-label-color: var(--m-choice-text-color);
    --m-choice-group-hint-color: var(--m-choice-text-muted-color);
    --m-choice-group-bg: var(--m-choice-surface-soft);
    --m-choice-group-border: var(--m-choice-border-color-subtle);
    --m-choice-group-shadow: var(--m-choice-shadow);
    --m-choice-group-option-bg: transparent;
    --m-choice-group-option-text: var(--m-choice-text-soft-color);
    --m-choice-group-option-border: transparent;
    --m-choice-group-option-hover-bg: var(--m-choice-state-hover-bg);
    --m-choice-group-option-hover-text: var(--m-choice-text-color);
    --m-choice-group-option-hover-border: var(--m-choice-state-hover-border);
    --m-choice-group-option-selected-bg: var(--m-choice-slot-accent-color);
    --m-choice-group-option-selected-text: var(--m-choice-slot-accent-text-inverse);
    --m-choice-group-option-selected-border: var(--m-choice-slot-accent-color);
    --m-choice-group-option-disabled-bg: var(--m-choice-disabled-bg);
    --m-choice-group-option-disabled-text: var(--m-choice-disabled-text);
    --m-choice-group-option-disabled-border: var(--m-choice-disabled-border);

    /* Checkbox */
    --m-choice-checkbox-bg: var(--m-choice-surface);
    --m-choice-checkbox-border: var(--m-choice-border-color);
    --m-choice-checkbox-icon: var(--m-choice-slot-accent-text-inverse);
    --m-choice-checkbox-bg-hover: var(--m-choice-state-hover-bg);
    --m-choice-checkbox-border-hover: var(--m-choice-state-hover-border);
    --m-choice-checkbox-bg-checked: var(--m-choice-slot-accent-color);
    --m-choice-checkbox-border-checked: var(--m-choice-slot-accent-color);

    /* Radio */
    --m-choice-radio-bg: var(--m-choice-surface);
    --m-choice-radio-border: var(--m-choice-border-color);
    --m-choice-radio-dot: var(--m-choice-slot-accent-color);
    --m-choice-radio-bg-hover: var(--m-choice-state-hover-bg);
    --m-choice-radio-border-hover: var(--m-choice-state-hover-border);
    --m-choice-radio-bg-checked: var(--m-choice-surface);
    --m-choice-radio-border-checked: var(--m-choice-slot-accent-color);

    /* Switch */
    --m-choice-switch-bg: var(--m-choice-border-color-subtle);
    --m-choice-switch-border: var(--m-choice-border-color-subtle);
    --m-choice-switch-bg-hover: var(--m-choice-border-color);
    --m-choice-switch-border-hover: var(--m-choice-border-color);
    --m-choice-switch-bg-checked: var(--m-choice-slot-accent-color);
    --m-choice-switch-border-checked: var(--m-choice-slot-accent-color);
    --m-choice-switch-thumb-bg: var(--m-choice-surface);
    --m-choice-switch-thumb-shadow: var(--m-choice-shadow);

    /* Focus / invalid */
    --m-choice-focus-border: var(--m-choice-slot-accent-color);
    --m-choice-focus-shadow: 0 0 0 var(--m-field-focus-width) var(--m-choice-context-focus-ring);

    --m-choice-invalid-border: var(--m-choice-slot-accent-color);
    --m-choice-invalid-ring: var(--m-choice-slot-accent-soft);

    /* States */
    --m-choice-state-disabled-opacity: 1;
    --m-choice-state-readonly-opacity: 1;

    /* =====================================================
       6) COMPATIBILITY ALIASES
       -----------------------------------------------------
       للحفاظ على choices.css الحالي بدون تعديل
    ===================================================== */

    --choice_default_bg: var(--m-choice-bg);
    --choice_default_text: var(--m-choice-text);
    --choice_default_border: var(--m-choice-border);

    --choice_default_hover_bg: var(--m-choice-bg-hover);
    --choice_default_hover_text: var(--m-choice-text-hover);
    --choice_default_hover_border: var(--m-choice-border-hover);

    --choice_default_disabled_bg: var(--m-choice-disabled-bg);
    --choice_default_disabled_text: var(--m-choice-disabled-text);
    --choice_default_disabled_border: var(--m-choice-disabled-border);

    --choice_hint_text: var(--m-choice-hint-color);

    --choice_checkbox_bg: var(--m-choice-checkbox-bg);
    --choice_checkbox_border: var(--m-choice-checkbox-border);
    --choice_checkbox_icon: var(--m-choice-checkbox-icon);
    --choice_checkbox_hover_bg: var(--m-choice-checkbox-bg-hover);
    --choice_checkbox_hover_border: var(--m-choice-checkbox-border-hover);
    --choice_checkbox_checked_bg: var(--m-choice-checkbox-bg-checked);
    --choice_checkbox_checked_border: var(--m-choice-checkbox-border-checked);

    --choice_radio_bg: var(--m-choice-radio-bg);
    --choice_radio_border: var(--m-choice-radio-border);
    --choice_radio_dot: var(--m-choice-radio-dot);
    --choice_radio_hover_bg: var(--m-choice-radio-bg-hover);
    --choice_radio_hover_border: var(--m-choice-radio-border-hover);
    --choice_radio_checked_bg: var(--m-choice-radio-bg-checked);
    --choice_radio_checked_border: var(--m-choice-radio-border-checked);

    --choice_switch_bg: var(--m-choice-switch-bg);
    --choice_switch_border: var(--m-choice-switch-border);
    --choice_switch_hover_bg: var(--m-choice-switch-bg-hover);
    --choice_switch_hover_border: var(--m-choice-switch-border-hover);
    --choice_switch_checked_bg: var(--m-choice-switch-bg-checked);
    --choice_switch_checked_border: var(--m-choice-switch-border-checked);
    --choice_switch_thumb_bg: var(--m-choice-switch-thumb-bg);
    --choice_switch_thumb_shadow: var(--m-choice-switch-thumb-shadow);

    --choice_focus_border: var(--m-choice-focus-border);
    --choice_invalid_border: var(--m-choice-invalid-border);
    --choice_invalid_ring: var(--m-choice-invalid-ring);

    --choice_group_label_text: var(--m-choice-group-label-color);
    --choice_group_hint_text: var(--m-choice-group-hint-color);
}

/* =========================================================
   SLOT ACCENT OVERRIDES
========================================================= */

.m-check[data-slot="c1"],
.m-check[data-theme-slot="c1"],
.m-check[data-accent="c1"],
.m-radio[data-slot="c1"],
.m-radio[data-theme-slot="c1"],
.m-radio[data-accent="c1"],
.m-switch[data-slot="c1"],
.m-switch[data-theme-slot="c1"],
.m-switch[data-accent="c1"] {
    --m-choice-slot-accent-color: var(--m-color-c1);
    --m-choice-slot-accent-color-hover: var(--m-color-c1-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c1-active);
    --m-choice-slot-accent-soft: var(--m-color-c1-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c1-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c1-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c2"],
.m-check[data-theme-slot="c2"],
.m-check[data-accent="c2"],
.m-radio[data-slot="c2"],
.m-radio[data-theme-slot="c2"],
.m-radio[data-accent="c2"],
.m-switch[data-slot="c2"],
.m-switch[data-theme-slot="c2"],
.m-switch[data-accent="c2"] {
    --m-choice-slot-accent-color: var(--m-color-c2);
    --m-choice-slot-accent-color-hover: var(--m-color-c2-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c2-active);
    --m-choice-slot-accent-soft: var(--m-color-c2-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c2-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c2-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c3"],
.m-check[data-theme-slot="c3"],
.m-check[data-accent="c3"],
.m-radio[data-slot="c3"],
.m-radio[data-theme-slot="c3"],
.m-radio[data-accent="c3"],
.m-switch[data-slot="c3"],
.m-switch[data-theme-slot="c3"],
.m-switch[data-accent="c3"] {
    --m-choice-slot-accent-color: var(--m-color-c3);
    --m-choice-slot-accent-color-hover: var(--m-color-c3-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c3-active);
    --m-choice-slot-accent-soft: var(--m-color-c3-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c3-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c3-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c4"],
.m-check[data-theme-slot="c4"],
.m-check[data-accent="c4"],
.m-radio[data-slot="c4"],
.m-radio[data-theme-slot="c4"],
.m-radio[data-accent="c4"],
.m-switch[data-slot="c4"],
.m-switch[data-theme-slot="c4"],
.m-switch[data-accent="c4"] {
    --m-choice-slot-accent-color: var(--m-color-c4);
    --m-choice-slot-accent-color-hover: var(--m-color-c4-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c4-active);
    --m-choice-slot-accent-soft: var(--m-color-c4-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c4-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c4-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c5"],
.m-check[data-theme-slot="c5"],
.m-check[data-accent="c5"],
.m-radio[data-slot="c5"],
.m-radio[data-theme-slot="c5"],
.m-radio[data-accent="c5"],
.m-switch[data-slot="c5"],
.m-switch[data-theme-slot="c5"],
.m-switch[data-accent="c5"] {
    --m-choice-slot-accent-color: var(--m-color-c5);
    --m-choice-slot-accent-color-hover: var(--m-color-c5-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c5-active);
    --m-choice-slot-accent-soft: var(--m-color-c5-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c5-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c5-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c6"],
.m-check[data-theme-slot="c6"],
.m-check[data-accent="c6"],
.m-radio[data-slot="c6"],
.m-radio[data-theme-slot="c6"],
.m-radio[data-accent="c6"],
.m-switch[data-slot="c6"],
.m-switch[data-theme-slot="c6"],
.m-switch[data-accent="c6"] {
    --m-choice-slot-accent-color: var(--m-color-c6);
    --m-choice-slot-accent-color-hover: var(--m-color-c6-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c6-active);
    --m-choice-slot-accent-soft: var(--m-color-c6-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c6-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c6-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c7"],
.m-check[data-theme-slot="c7"],
.m-check[data-accent="c7"],
.m-radio[data-slot="c7"],
.m-radio[data-theme-slot="c7"],
.m-radio[data-accent="c7"],
.m-switch[data-slot="c7"],
.m-switch[data-theme-slot="c7"],
.m-switch[data-accent="c7"] {
    --m-choice-slot-accent-color: var(--m-color-c7);
    --m-choice-slot-accent-color-hover: var(--m-color-c7-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c7-active);
    --m-choice-slot-accent-soft: var(--m-color-c7-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c7-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c7-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c8"],
.m-check[data-theme-slot="c8"],
.m-check[data-accent="c8"],
.m-radio[data-slot="c8"],
.m-radio[data-theme-slot="c8"],
.m-radio[data-accent="c8"],
.m-switch[data-slot="c8"],
.m-switch[data-theme-slot="c8"],
.m-switch[data-accent="c8"] {
    --m-choice-slot-accent-color: var(--m-color-c8);
    --m-choice-slot-accent-color-hover: var(--m-color-c8-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c8-active);
    --m-choice-slot-accent-soft: var(--m-color-c8-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c8-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c8-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c9"],
.m-check[data-theme-slot="c9"],
.m-check[data-accent="c9"],
.m-radio[data-slot="c9"],
.m-radio[data-theme-slot="c9"],
.m-radio[data-accent="c9"],
.m-switch[data-slot="c9"],
.m-switch[data-theme-slot="c9"],
.m-switch[data-accent="c9"] {
    --m-choice-slot-accent-color: var(--m-color-c9);
    --m-choice-slot-accent-color-hover: var(--m-color-c9-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c9-active);
    --m-choice-slot-accent-soft: var(--m-color-c9-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c9-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c9-text-inverse, var(--m-choice-accent-text-inverse));
}

.m-check[data-slot="c10"],
.m-check[data-theme-slot="c10"],
.m-check[data-accent="c10"],
.m-radio[data-slot="c10"],
.m-radio[data-theme-slot="c10"],
.m-radio[data-accent="c10"],
.m-switch[data-slot="c10"],
.m-switch[data-theme-slot="c10"],
.m-switch[data-accent="c10"] {
    --m-choice-slot-accent-color: var(--m-color-c10);
    --m-choice-slot-accent-color-hover: var(--m-color-c10-hover);
    --m-choice-slot-accent-color-active: var(--m-color-c10-active);
    --m-choice-slot-accent-soft: var(--m-color-c10-soft);
    --m-choice-slot-accent-soft-strong: var(--m-color-c10-soft-strong);
    --m-choice-slot-accent-text-inverse: var(--m-color-c10-text-inverse, var(--m-choice-accent-text-inverse));
}