/* =========================================================
   Market UI v2 — Card Component Contract
   Path: public/assets/marketv2/components/card/variables.css

   القواعد:
   - Metrics only
   - Context -> Identity bridge only
   - Identity -> Contract mapping only
   - لا palette محلية
   - لا hex / rgba / color-mix
========================================================= */

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

    --m-card-radius-md: var(--m-theme-card-radius, 8px);
    --m-card-radius-lg: var(--m-theme-card-radius, 8px);

    --m-card-padding-x-md: var(--m-theme-card-padding-x, 24px);
    --m-card-padding-y-md: var(--m-theme-card-padding-y, 20px);

    --m-card-gap-2xs: 2px;
    --m-card-gap-xs: 4px;
    --m-card-gap-sm: 6px;
    --m-card-gap-md: 10px;
    --m-card-gap-lg: 14px;
    --m-card-gap-xl: 16px;
    --m-card-gap-2xl: 20px;

    --m-card-header-min-h-md: 56px;

    --m-card-title-size-sm: 0.9375rem;
    --m-card-title-size-md: 1rem;

    --m-card-title-line-height-sm: 1.35;
    --m-card-title-line-height-md: 1.35;

    --m-card-subtitle-size-sm: 0.8125rem;
    --m-card-subtitle-size-md: 0.875rem;

    --m-card-subtitle-line-height-sm: 1.45;
    --m-card-subtitle-line-height-md: 1.5;

    --m-card-compact-header-min-h: 48px;
    --m-card-compact-header-padding-x: var(--m-theme-card-padding-x, 18px);
    --m-card-compact-header-padding-y: 12px;
    --m-card-compact-header-row-gap: 8px;
    --m-card-compact-header-main-gap: 10px;
    --m-card-compact-header-meta-gap: 6px;

    --m-card-compact-title-size: 0.95rem;
    --m-card-compact-title-line-height: 1.32;

    --m-card-compact-subtitle-size: 0.78rem;
    --m-card-compact-subtitle-line-height: 1.38;

    --m-card-badge-height: 22px;
    --m-card-badge-padding-x: 8px;
    --m-card-badge-gap: 5px;
    --m-card-badge-font-size: 0.72rem;
    --m-card-badge-font-weight: 700;
    --m-card-badge-line-height: 1;
    --m-card-badge-icon-size: 12px;
    --m-card-badge-radius: 999px;

    --m-card-action-size: 34px;
    --m-card-action-radius: var(--m-theme-radius-md, 8px);
    --m-card-help-bubble-width: 300px;
    --m-card-help-bubble-offset: 8px;
    --m-card-help-bubble-padding-x: 12px;
    --m-card-help-bubble-padding-y: 10px;
    --m-card-help-bubble-font-size: 0.8125rem;
    --m-card-help-bubble-line-height: 1.55;

    --m-card-chevron-size: 18px;
    --m-card-chevron-open-rotate: 0deg;
    --m-card-chevron-collapsed-rotate: -90deg;

    --m-card-progress-height: 4px;
    --m-card-progress-gap-top: 8px;
    --m-card-progress-gap-top-collapsed: 6px;
    --m-card-progress-gap-top-mobile: 7px;
    --m-card-progress-radius: 999px;

    --m-card-progress-width-empty: 0%;
    --m-card-progress-width-level-1: 25%;
    --m-card-progress-width-level-2: 55%;
    --m-card-progress-width-level-3: 78%;
    --m-card-progress-width-level-4: 100%;

    --m-card-marker-size: 8px;
    --m-card-marker-offset-y: 0.45rem;

    --m-card-top-accent-height: 3px;

    --m-card-head-gap: 12px;
    --m-card-title-row-gap: 10px;
    --m-card-actions-gap: 8px;

    --m-card-collapsed-padding-y: 10px;
    --m-card-collapsed-padding-y-mobile: 9px;

    --m-card-mobile-header-padding-x: var(--m-theme-card-padding-x, 16px);
    --m-card-mobile-header-padding-y: 14px;
    --m-card-mobile-toolbar-padding-x: 16px;
    --m-card-mobile-toolbar-padding-y: 14px;
    --m-card-mobile-body-padding-x: var(--m-theme-card-padding-x, 16px);
    --m-card-mobile-body-padding-y: var(--m-theme-card-padding-y, 16px);
    --m-card-mobile-footer-padding-x: 16px;
    --m-card-mobile-footer-padding-y: 16px;

    --m-card-mobile-header-main-gap: 8px;
    --m-card-mobile-header-meta-gap: 5px;

    --m-card-mobile-badge-height: 20px;
    --m-card-mobile-badge-padding-x: 7px;
    --m-card-mobile-badge-font-size: 0.69rem;

    --m-card-fullscreen-inset-desktop: 20px;
    --m-card-fullscreen-inset-tablet: 14px;
    --m-card-fullscreen-inset-mobile: 10px;

    --m-card-transition-fast: 120ms ease;
    --m-card-transition-base: 180ms ease;
    --m-card-transition-slow: 260ms ease;

    --m-card-hover-translate-y: -1px;

    --m-card-z-base: 1;
    --m-card-z-hover: 20;
    --m-card-z-active: 30;
    --m-card-z-open-layer: 60;
    --m-card-z-backdrop: 1090;
    --m-card-z-fullscreen: 1100;

    /* =====================================================
       2) CONTEXT -> IDENTITY BRIDGE
    ===================================================== */

    --m-card-identity-surface: var(--m-context-surface);
    --m-card-identity-surface-soft: var(--m-context-surface-soft);
    --m-card-identity-surface-muted: var(--m-context-surface-muted);
    --m-card-identity-surface-raised: var(--m-context-surface-raised);
    --m-card-identity-surface-elevated: var(--m-context-surface-elevated);

    --m-card-identity-border: var(--m-context-border);
    --m-card-identity-border-subtle: var(--m-context-border-subtle);
    --m-card-identity-border-soft: var(--m-context-border-soft);
    --m-card-identity-border-strong: var(--m-context-border-strong);
    --m-card-identity-border-active: var(--m-context-border-active);
    --m-card-identity-focus-ring: var(--m-context-focus-ring);

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

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

    --m-card-identity-state-hover-bg: var(--m-context-state-hover-bg);
    --m-card-identity-state-hover-accent: var(--m-context-state-hover-accent);
    --m-card-identity-state-hover-border: var(--m-context-state-hover-border);

    --m-card-identity-state-active-bg: var(--m-context-state-active-bg);
    --m-card-identity-state-active-accent: var(--m-context-state-active-accent);
    --m-card-identity-state-active-border: var(--m-context-state-active-border);

    --m-card-identity-state-selected-bg: var(--m-context-state-selected-bg);
    --m-card-identity-state-selected-accent: var(--m-context-state-selected-accent);
    --m-card-identity-state-selected-border: var(--m-context-state-selected-border);

    --m-card-identity-overlay: var(--m-context-overlay);

    --m-card-identity-icon: var(--m-context-icon);
    --m-card-identity-icon-hover: var(--m-context-icon-hover);
    --m-card-identity-icon-active: var(--m-context-icon-active);
    --m-card-identity-icon-action-bg: var(--m-context-icon-action-bg);
    --m-card-identity-icon-action-bg-hover: var(--m-context-icon-action-bg-hover);
    --m-card-identity-icon-action-bg-active: var(--m-context-icon-action-bg-active);

    --m-card-identity-shadow: var(--m-context-shadow);
    --m-card-identity-shadow-hover: var(--m-context-shadow-hover);
    --m-card-identity-shadow-active: var(--m-context-shadow-active);
    --m-card-identity-shadow-panel: var(--m-context-shadow-panel);
    --m-card-identity-shadow-modal: var(--m-context-shadow-modal);

    /* =====================================================
       3) CONTRACT — SURFACE
    ===================================================== */

    --m-card-bg: var(--m-theme-card-bg, var(--m-card-identity-surface));
    --m-card-bg-soft: var(--m-card-identity-surface-soft);
    --m-card-bg-muted: var(--m-card-identity-surface-muted);
    --m-card-bg-raised: var(--m-card-identity-surface-raised);
    --m-card-bg-elevated: var(--m-card-identity-surface-elevated);

    --m-card-header-bg: var(--m-theme-card-header-bg, transparent);
    --m-card-header-bg-hover: var(--m-theme-card-header-bg, transparent);
    --m-card-header-bg-active: var(--m-theme-card-header-bg, transparent);
    --m-card-header-smart-bg: var(--m-theme-card-header-bg, transparent);

    --m-card-footer-bg: var(--m-theme-card-footer-bg, transparent);

    --m-card-fullscreen-header-bg: var(--m-card-header-bg);
    --m-card-fullscreen-footer-bg: var(--m-card-footer-bg);

    --m-card-tone-neutral-bg: var(--m-card-bg-raised);
    --m-card-tone-framed-bg: var(--m-card-bg-raised);
    --m-card-tone-accented-bg: var(--m-card-bg-raised);
    --m-card-tone-solid-bg: var(--m-card-accent-color);

    /* =====================================================
       4) CONTRACT — BORDER
    ===================================================== */

    --m-card-border-color: var(--m-theme-card-border, var(--m-card-identity-border));
    --m-card-border-color-subtle: var(--m-card-identity-border-subtle);
    --m-card-border-color-soft: var(--m-card-identity-border-soft);
    --m-card-border-color-strong: var(--m-card-identity-border-strong);
    --m-card-border-color-active: var(--m-card-identity-border-active);
    --m-card-border-color-focus: var(--m-card-identity-focus-ring);

    --m-card-divider-color: var(--m-card-border-color-subtle);
    --m-card-header-border-color: var(--m-theme-card-header-border, transparent);

    --m-card-fullscreen-border-color: var(--m-card-border-color);
    --m-card-fullscreen-header-border-color: var(--m-card-header-border-color);
    --m-card-fullscreen-footer-border-color: var(--m-card-divider-color);

    --m-card-tone-neutral-border: var(--m-card-border-color-subtle);
    --m-card-tone-framed-border: var(--m-card-accent-color);
    --m-card-tone-framed-border-hover: var(--m-card-accent-color-hover);
    --m-card-tone-accented-border: var(--m-card-border-color-soft);
    --m-card-tone-accented-border-hover: var(--m-card-accent-color);
    --m-card-tone-solid-border: var(--m-card-accent-color-active);

    /* =====================================================
       5) CONTRACT — TEXT
    ===================================================== */

    --m-card-title-color: var(--m-card-identity-text-strong);
    --m-card-subtitle-color: var(--m-card-identity-text-muted);
    --m-card-body-color: var(--m-card-identity-text);

    --m-card-text-soft: var(--m-card-identity-text-soft);
    --m-card-text-muted: var(--m-card-identity-text-muted);
    --m-card-text-faint: var(--m-card-identity-text-faint);
    --m-card-text-inverse: var(--m-card-identity-text-inverse);

    --m-card-tone-solid-title: var(--m-card-accent-text-inverse);
    --m-card-tone-solid-body: var(--m-card-accent-text-inverse);
    --m-card-tone-solid-soft: var(--m-card-accent-text-inverse);

    /* =====================================================
       6) CONTRACT — ACCENT / ICON
    ===================================================== */

    --m-card-accent-color: var(--m-card-identity-accent);
    --m-card-accent-color-hover: var(--m-card-identity-accent-hover);
    --m-card-accent-color-active: var(--m-card-identity-accent-active);
    --m-card-accent-soft: var(--m-card-identity-accent-soft);
    --m-card-accent-soft-strong: var(--m-card-identity-accent-soft-strong);
    --m-card-accent-text-inverse: var(--m-card-identity-accent-text-inverse);

    --m-card-icon-color: var(--m-card-identity-icon);
    --m-card-icon-color-hover: var(--m-card-identity-icon-hover);
    --m-card-icon-color-active: var(--m-card-identity-icon-active);

    --m-card-action-bg: var(--m-card-identity-icon-action-bg);
    --m-card-action-bg-hover: var(--m-card-identity-icon-action-bg-hover);
    --m-card-action-bg-active: var(--m-card-identity-icon-action-bg-active);

    --m-card-action-border: transparent;
    --m-card-action-border-hover: transparent;
    --m-card-action-border-active: transparent;

    --m-card-tone-framed-accent: var(--m-card-accent-color);
    --m-card-tone-accented-accent: var(--m-card-accent-color);
    --m-card-tone-solid-accent: var(--m-card-accent-text-inverse);

    /* =====================================================
       7) CONTRACT — STATE
    ===================================================== */

    --m-card-state-hover-bg: var(--m-card-identity-state-hover-bg);
    --m-card-state-hover-border: var(--m-card-identity-state-hover-border);
    --m-card-state-hover-shadow: var(--m-card-identity-shadow-hover);
    --m-card-state-hover-accent: var(--m-card-identity-state-hover-accent);

    --m-card-state-active-bg: var(--m-card-identity-state-active-bg);
    --m-card-state-active-border: var(--m-card-identity-state-active-border);
    --m-card-state-active-shadow: var(--m-card-identity-shadow-active);
    --m-card-state-active-accent: var(--m-card-identity-state-active-accent);

    --m-card-state-selected-bg: var(--m-card-identity-state-selected-bg);
    --m-card-state-selected-border: var(--m-card-identity-state-selected-border);
    --m-card-state-selected-shadow: var(--m-card-identity-shadow-active);
    --m-card-state-selected-accent: var(--m-card-identity-state-selected-accent);

    --m-card-state-muted-bg: var(--m-card-bg-soft);

    --m-card-disabled-bg: var(--m-card-bg-soft);
    --m-card-disabled-border: var(--m-card-border-color-subtle);
    --m-card-disabled-text: var(--m-card-text-faint);
    --m-card-disabled-icon: var(--m-card-text-faint);
    --m-card-disabled-opacity: 0.72;

    --m-card-invalid-bg: var(--m-card-accent-soft);
    --m-card-invalid-border: var(--m-card-accent-soft-strong);
    --m-card-invalid-accent: var(--m-card-accent-color);
    --m-card-invalid-header-bg: var(--m-card-accent-soft);

    --m-card-loading-overlay: var(--m-card-identity-overlay);

    /* =====================================================
       8) CONTRACT — ELEVATION
    ===================================================== */

    --m-card-shadow: var(--m-theme-card-shadow, var(--m-card-identity-shadow-hover));
    --m-card-shadow-hover: var(--m-theme-card-shadow, var(--m-card-identity-shadow-hover));
    --m-card-shadow-active: var(--m-theme-card-shadow, var(--m-card-identity-shadow-active));
    --m-card-shadow-fullscreen: var(--m-card-identity-shadow-modal);
    --m-card-tone-framed-shadow: var(--m-card-shadow);
    --m-card-tone-accented-shadow: var(--m-card-shadow);
    --m-card-tone-solid-shadow: var(--m-card-shadow);

    /* =====================================================
       9) CONTRACT — SUB OBJECTS
    ===================================================== */

    --m-card-badge-bg: var(--m-card-bg-soft);
    --m-card-badge-text: var(--m-card-text-soft);
    --m-card-badge-border: var(--m-card-border-color-subtle);

    --m-card-progress-track-bg: var(--m-card-bg-muted);
    --m-card-progress-empty: var(--m-card-border-color-strong);

    --m-card-progress-level-1: var(--m-card-accent-color);
    --m-card-progress-level-2: var(--m-card-accent-color);
    --m-card-progress-level-3: var(--m-card-accent-color);
    --m-card-progress-level-4: var(--m-card-accent-color);

    --m-card-progress-bar-shadow: var(--m-card-shadow);

    --m-card-marker-required-bg: var(--m-card-accent-color);
    --m-card-marker-optional-bg: var(--m-card-progress-empty);

    --m-card-help-bg: var(--m-card-bg-elevated);
    --m-card-help-text: var(--m-card-text-soft);
    --m-card-help-border: var(--m-card-border-color-subtle);
    --m-card-help-shadow: var(--m-card-identity-shadow-panel);
    --m-card-help-trigger-bg: var(--m-card-action-bg);
    --m-card-help-trigger-bg-hover: var(--m-card-action-bg-hover);
    --m-card-help-trigger-border: var(--m-card-action-border);
    --m-card-help-trigger-border-hover: var(--m-card-action-border-hover);
    --m-card-help-trigger-icon: var(--m-card-icon-color);
    --m-card-help-trigger-icon-hover: var(--m-card-icon-color-hover);

    --m-card-backdrop-bg: var(--m-card-identity-overlay);
}

@media (max-width: 991px) {
    :root {
        --m-card-padding-x-md: var(--m-theme-card-padding-x-tablet, var(--m-theme-card-padding-x, 20px));
        --m-card-padding-y-md: var(--m-theme-card-padding-y-tablet, var(--m-theme-card-padding-y, 18px));
        --m-card-mobile-header-padding-x: var(--m-theme-card-padding-x-tablet, var(--m-theme-card-padding-x, 18px));
        --m-card-mobile-body-padding-x: var(--m-theme-card-padding-x-tablet, var(--m-theme-card-padding-x, 18px));
        --m-card-mobile-body-padding-y: var(--m-theme-card-padding-y-tablet, var(--m-theme-card-padding-y, 16px));
    }
}

@media (max-width: 767px) {
    :root {
        --m-card-padding-x-md: var(--m-theme-card-padding-x-mobile, var(--m-theme-card-padding-x, 16px));
        --m-card-padding-y-md: var(--m-theme-card-padding-y-mobile, var(--m-theme-card-padding-y, 14px));
        --m-card-mobile-header-padding-x: var(--m-theme-card-padding-x-mobile, var(--m-theme-card-padding-x, 16px));
        --m-card-mobile-body-padding-x: var(--m-theme-card-padding-x-mobile, var(--m-theme-card-padding-x, 16px));
        --m-card-mobile-body-padding-y: var(--m-theme-card-padding-y-mobile, var(--m-theme-card-padding-y, 14px));
    }
}

/* =========================================================
   SLOT ACCENT OVERRIDES
   ---------------------------------------------------------
   A card keeps the V2 surface by default. Passing c1..c10 only
   swaps the accent identity used by framed/accented/solid tones.
========================================================= */

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

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

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

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

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

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

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

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

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

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