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

   الهدف من هذا الملف:
   ---------------------------------------------------------
   هذا الملف يمثل العقد البصري الرسمي لمكوّن Countdown
   بصيغة دستورية متوافقة مع Market UI v2.

   القواعد:
   ---------------------------------------------------------
   1) variables.css هو bridge layer + contract layer
   2) لا يحتوي logic خاص بالثيم
   3) لا يحتوي semantic palette محلية مستقلة
   4) الأصل = context identity
   5) slot override اختياري فقط
   6) لا نستهلك --m-context-* مباشرة داخل component.css
   7) يدعم لاحقًا preset/component/route overrides بدون كسر

   ملاحظة:
   ---------------------------------------------------------
   theme classes مثل:
   - .m-countdown--theme-success
   - .m-countdown--theme-danger
   تبقى ممكنة كـ compatibility aliases في طبقة العرض/الـ Blade/JS
   لكن داخل العقد نفسه نعتمد على:
   - context identity
   - slot identity
========================================================= */

:root,
.m-theme-default {
    /* =====================================================
       0) CONTEXT BRIDGE TOKENS
       -----------------------------------------------------
       نقرأ بالترتيب:
       component override
       -> context
       -> foundation/system fallback
    ===================================================== */

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

    /* Border bridge */
    --m-countdown-context-border: var(--m-component-border, var(--m-context-border, var(--m-border, var(--color-border, #e2e8f0))));
    --m-countdown-context-border-subtle: var(--m-component-border-subtle, var(--m-context-border-subtle, var(--m-border-subtle, var(--color-border-subtle, #edf2f7))));
    --m-countdown-context-border-soft: var(--m-component-border-soft, var(--m-context-border-soft, var(--m-border-soft, var(--color-border-soft, var(--m-countdown-context-border-subtle)))));
    --m-countdown-context-border-strong: var(--m-component-border-strong, var(--m-context-border-strong, var(--m-border-strong, var(--color-border-strong, #cbd5e1))));
    --m-countdown-context-border-active: var(--m-component-border-active, var(--m-context-border-active, var(--m-border-active, var(--color-border-active, var(--m-countdown-context-border-strong)))));
    --m-countdown-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-countdown-context-text: var(--m-component-text, var(--m-context-text, var(--m-text, var(--color-text, #334155))));
    --m-countdown-context-text-strong: var(--m-component-text-strong, var(--m-context-text-strong, var(--m-text-strong, var(--color-text-strong, #0f172a))));
    --m-countdown-context-text-soft: var(--m-component-text-soft, var(--m-context-text-soft, var(--m-text-soft, var(--color-text-soft, #475569))));
    --m-countdown-context-text-muted: var(--m-component-text-muted, var(--m-context-text-muted, var(--m-text-muted, var(--color-text-muted, #64748b))));
    --m-countdown-context-text-faint: var(--m-component-text-faint, var(--m-context-text-faint, var(--m-text-faint, var(--color-text-faint, #94a3b8))));
    --m-countdown-context-text-inverse: var(--m-component-text-inverse, var(--m-context-text-inverse, var(--m-text-inverse, var(--color-text-inverse, #ffffff))));

    /* Accent bridge
       -----------------------------------------------------
       الأصل هو accent السياق الحالي، وليس c1 مباشرة.
    */
    --m-countdown-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-countdown-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-countdown-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-countdown-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-countdown-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-countdown-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-countdown-context-state-hover-bg: var(--m-component-state-hover-bg, var(--m-context-state-hover-bg, var(--m-countdown-context-surface-hover)));
    --m-countdown-context-state-hover-border: var(--m-component-state-hover-border, var(--m-context-state-hover-border, var(--m-countdown-context-border-strong)));
    --m-countdown-context-state-active-bg: var(--m-component-state-active-bg, var(--m-context-state-active-bg, var(--m-countdown-context-surface-active)));
    --m-countdown-context-state-active-border: var(--m-component-state-active-border, var(--m-context-state-active-border, var(--m-countdown-context-border-active)));
    --m-countdown-context-state-selected-bg: var(--m-component-state-selected-bg, var(--m-context-state-selected-bg, var(--m-countdown-context-surface-selected)));
    --m-countdown-context-state-selected-border: var(--m-component-state-selected-border, var(--m-context-state-selected-border, var(--m-countdown-context-border-active)));
    --m-countdown-context-overlay: var(--m-component-overlay, var(--m-context-overlay, var(--color-backdrop-soft, rgba(15, 23, 42, 0.08))));

    /* Elevation bridge */
    --m-countdown-context-shadow: var(--m-component-shadow, var(--m-context-shadow, var(--shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.04))));
    --m-countdown-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))));
    --m-countdown-context-shadow-panel: var(--m-component-shadow-panel, var(--m-context-shadow-panel, var(--shadow-md, 0 10px 24px rgba(15, 23, 42, 0.06))));

    /* =====================================================
       1) COMPONENT IDENTITY LAYER
    ===================================================== */

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

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

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

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

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

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

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

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

    /* =====================================================
       3) CONTRACT TOKENS
       -----------------------------------------------------
       هذه هي الطبقة التي يستهلكها countdown.css
    ===================================================== */

    /* Root / shared */
    --m-countdown-bg: transparent;
    --m-countdown-text: var(--m-countdown-text-color);
    --m-countdown-text-strong: var(--m-countdown-text-strong-color);
    --m-countdown-text-muted: var(--m-countdown-text-muted-color);
    --m-countdown-text-soft: var(--m-countdown-text-soft-color);
    --m-countdown-text-inverse: var(--m-countdown-text-inverse-color);

    /* Accent contract */
    --m-countdown-primary: var(--m-countdown-slot-accent-color);
    --m-countdown-success: var(--m-countdown-slot-accent-color);
    --m-countdown-danger: var(--m-countdown-slot-accent-color);
    --m-countdown-warning: var(--m-countdown-slot-accent-color);
    --m-countdown-info: var(--m-countdown-slot-accent-color);
    --m-countdown-dark: var(--m-countdown-text-strong-color);
    --m-countdown-light: var(--m-countdown-text-inverse-color);

    /* Digital */
    --m-countdown-digital-item-bg: var(--m-countdown-surface);
    --m-countdown-digital-hover-border: var(--m-countdown-state-hover-border);
    --m-countdown-border: var(--m-countdown-border-color-subtle);

    /* Circle */
    --m-countdown-track: var(--m-countdown-border-color-subtle);

    /* Expired */
    --m-countdown-expired-bg: var(--m-countdown-surface-soft);
    --m-countdown-expired-text-color: var(--m-countdown-text-muted-color);

    /* Optional future-friendly tokens */
    --m-countdown-expired-border: transparent;
    --m-countdown-expired-shadow: none;

    /* =====================================================
       4) SPACING SCALE
    ===================================================== */

    --m-countdown-gap-xs: 6px;
    --m-countdown-gap-sm: 8px;
    --m-countdown-gap-md: 10px;
    --m-countdown-gap-lg: 12px;
    --m-countdown-gap-xl: 14px;

    /* =====================================================
       5) DIGITAL TYPOGRAPHY SCALE
    ===================================================== */

    --m-countdown-digital-font-xs: 11px;
    --m-countdown-digital-font-sm: 12px;
    --m-countdown-digital-font-md: 13px;
    --m-countdown-digital-font-lg: 15px;
    --m-countdown-digital-font-xl: 17px;

    --m-countdown-digital-value-xs: 12px;
    --m-countdown-digital-value-sm: 13px;
    --m-countdown-digital-value-md: 15px;
    --m-countdown-digital-value-lg: 18px;
    --m-countdown-digital-value-xl: 21px;

    --m-countdown-digital-unit-xs: 9px;
    --m-countdown-digital-unit-sm: 10px;
    --m-countdown-digital-unit-md: 10px;
    --m-countdown-digital-unit-lg: 11px;
    --m-countdown-digital-unit-xl: 12px;

    /* =====================================================
       6) DIGITAL STRUCTURE
    ===================================================== */

    --m-countdown-digital-pill-radius: 999px;
    --m-countdown-digital-pill-padding-y: 8px;
    --m-countdown-digital-pill-padding-x: 10px;
    --m-countdown-digital-pill-border: 1px;
    --m-countdown-digital-pill-min-height: 34px;

    --m-countdown-digital-pill-padding-y-compact: 5px;
    --m-countdown-digital-pill-padding-x-compact: 8px;
    --m-countdown-digital-pill-min-height-compact: 28px;

    /* =====================================================
       7) CIRCLE SIZE SCALE
    ===================================================== */

    --m-countdown-circle-xs: 40px;
    --m-countdown-circle-sm: 52px;
    --m-countdown-circle-md: 64px;
    --m-countdown-circle-lg: 80px;
    --m-countdown-circle-xl: 96px;

    /* =====================================================
       8) AUTO SIZE (BY UNIT COUNT)
    ===================================================== */

    --m-countdown-circle-auto-1: 118px;
    --m-countdown-circle-auto-2: 88px;
    --m-countdown-circle-auto-3: 72px;
    --m-countdown-circle-auto-4: 60px;

    --m-countdown-circle-auto-compact-1: 92px;
    --m-countdown-circle-auto-compact-2: 72px;
    --m-countdown-circle-auto-compact-3: 60px;
    --m-countdown-circle-auto-compact-4: 52px;

    /* =====================================================
       9) CIRCLE TYPOGRAPHY
    ===================================================== */

    --m-countdown-circle-value-xs: 12px;
    --m-countdown-circle-value-sm: 14px;
    --m-countdown-circle-value-md: 16px;
    --m-countdown-circle-value-lg: 19px;
    --m-countdown-circle-value-xl: 22px;

    --m-countdown-circle-unit-xs: 8px;
    --m-countdown-circle-unit-sm: 9px;
    --m-countdown-circle-unit-md: 10px;
    --m-countdown-circle-unit-lg: 11px;
    --m-countdown-circle-unit-xl: 12px;

    /* =====================================================
       10) CIRCLE STROKES
    ===================================================== */

    --m-countdown-circle-stroke-xs: 3;
    --m-countdown-circle-stroke-sm: 3.25;
    --m-countdown-circle-stroke-md: 3.5;
    --m-countdown-circle-stroke-lg: 4;
    --m-countdown-circle-stroke-xl: 4.5;

    /* =====================================================
       11) EXPIRED FALLBACK
    ===================================================== */

    --m-countdown-expired-pill-min-height: 32px;
    --m-countdown-expired-pill-padding-y: 6px;
    --m-countdown-expired-pill-padding-x: 12px;
    --m-countdown-expired-pill-radius: 999px;
    --m-countdown-expired-font-size: 12px;
    --m-countdown-expired-font-weight: 600;

    /* =====================================================
       12) MOTION / RADII
    ===================================================== */

    --m-countdown-radius-md: 16px;
    --m-countdown-transition-base: 220ms ease;
    --m-countdown-transition-fast: 140ms ease;
}

/* =========================================================
   SLOT ACCENT OVERRIDES
   ---------------------------------------------------------
   الأصل = context accent
   وعند تمرير slot نبدّل accent identity فقط.
========================================================= */

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

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

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

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

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

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

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

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

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

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