/* =========================================================
   Market UI v2 — Theme Presets Layer
   Path: public/assets/marketv2/core/theme-presets.css

   الهدف من هذا الملف:
   ---------------------------------------------------------
   هذا الملف يمثل "طبقة القوالب العامة" فوق core/colors.css.

   دوره:
   1) تعريف القيم العامة للقالب (preset defaults)
   2) ربط preset + mode مع global semantic tokens
   3) إنشاء bridge عامة للمكونات الحالية
   4) تعريف visual slots العامة c1..c10 على مستوى القالب
   5) توفير light / dark / auto presets الجاهزة

   هذا الملف لا يحتوي على:
   ✘ component-specific final contracts
   ✘ route override logic
   ✘ user_type logic
   ✘ business logic
   ✘ instance-level overrides

   مهم جدًا:
   ---------------------------------------------------------
   هذا الملف لا يقرر الشكل النهائي لكل مكوّن مباشرة.
   بل يقرر:
   - global theme tokens
   - global visual slots
   - bridge tokens العامة

   ثم تقوم المكونات بقراءة:
   --m-card-*
   --m-btn-*
   --m-table-*
   ...إلخ

   وفق الترتيب المعتمد في النظام:
   instance override
   → route slot override
   → route default override
   → preset slot override
   → preset default
   → foundation (core/colors.css)
   → hard fallback

   visual slots:
   ---------------------------------------------------------
   c1..c10 هنا هي visual slots عامة للقالب
   وليست business meanings ثابتة.

   route overrides:
   ---------------------------------------------------------
   أي route override لاحق يجب أن يرث من هذه الطبقة
   ثم يعدّل فقط ما يحتاجه بشكل جزئي.
========================================================= */


/* =========================================================
   1) GLOBAL THEME CONTRACT
   طبقة عامة مستقرة بين preset وبين بقية النظام
========================================================= */

:root {
    /* -----------------------------------------------------
       Primary / semantic expansion
    ----------------------------------------------------- */

    --color-primary: var(--color-brand, var(--color-primary-600));
    --color-primary-hover: var(--color-brand-hover, var(--color-primary-700));
    --color-primary-active: var(--color-brand-active, var(--color-primary-800));
    --color-primary-soft: var(--color-brand-soft, var(--color-primary-50));
    --color-primary-soft-strong: var(--color-brand-soft-strong, var(--color-primary-100));
    --color-primary-text-inverse: var(--color-text-inverse, #ffffff);

    --color-secondary: var(--color-purple-600);
    --color-secondary-hover: var(--color-purple-700);
    --color-secondary-active: var(--color-purple-800);
    --color-secondary-soft: var(--color-purple-50);
    --color-secondary-soft-strong: var(--color-purple-100);
    --color-secondary-text-inverse: var(--color-text-inverse, #ffffff);

    --color-success-strong: var(--color-success-700, #15803d);
    --color-success-soft-strong: var(--color-success-100, #dcfce7);
    --color-success-text-inverse: var(--color-text-inverse, #ffffff);

    --color-danger-strong: var(--color-danger-700, #b91c1c);
    --color-danger-soft-strong: var(--color-danger-100, #fee2e2);
    --color-danger-text-inverse: var(--color-text-inverse, #ffffff);

    --color-warning-strong: var(--color-warning-700, #b45309);
    --color-warning-soft-strong: var(--color-warning-100, #fef3c7);
    --color-warning-text-inverse: var(--color-text-inverse, #ffffff);

    --color-info-strong: var(--color-info-700, #0e7490);
    --color-info-soft-strong: var(--color-info-100, #cffafe);
    --color-info-text-inverse: var(--color-text-inverse, #ffffff);

    --color-neutral: var(--color-text-soft, var(--color-gray-700));
    --color-neutral-hover: var(--color-text, var(--color-gray-900));
    --color-neutral-active: var(--color-text-strong, var(--color-gray-900));
    --color-neutral-soft: var(--color-surface-soft, var(--color-gray-50));
    --color-neutral-soft-strong: var(--color-surface-muted, var(--color-gray-100));
    --color-neutral-text-inverse: var(--color-text-inverse, #ffffff);

    /* -----------------------------------------------------
       Surface / border / text / interaction aliases
    ----------------------------------------------------- */

    --color-surface-hover: var(--color-surface-soft, var(--color-gray-50));
    --color-surface-active: var(--color-primary-soft, var(--color-primary-50));
    --color-surface-selected: var(--color-primary-soft, var(--color-primary-50));

    --color-surface-raised: var(--color-surface-raised, var(--color-surface));
    --color-surface-elevated: var(--color-surface-elevated, var(--color-surface-raised, var(--color-surface)));

    --color-border-soft: var(--color-border-subtle, var(--color-border));
    --color-disabled-border: var(--color-border, var(--color-gray-200));

    /* -----------------------------------------------------
       Global visual slot contract
       هذه القيم هي مصدر slots العامة c1..c10
    ----------------------------------------------------- */

    --color-slot-1-active: var(--color-primary-active);
    --color-slot-1-soft-strong: var(--color-primary-soft-strong);
    --color-slot-1-text-inverse: var(--color-primary-text-inverse);

    --color-slot-2-active: var(--color-success-strong);
    --color-slot-2-soft-strong: var(--color-success-soft-strong);
    --color-slot-2-text-inverse: var(--color-success-text-inverse);

    --color-slot-3-active: var(--color-danger-strong);
    --color-slot-3-soft-strong: var(--color-danger-soft-strong);
    --color-slot-3-text-inverse: var(--color-danger-text-inverse);

    --color-slot-4-active: var(--color-warning-strong);
    --color-slot-4-soft-strong: var(--color-warning-soft-strong);
    --color-slot-4-text-inverse: var(--color-warning-text-inverse);

    --color-slot-5-active: var(--color-info-strong);
    --color-slot-5-soft-strong: var(--color-info-soft-strong);
    --color-slot-5-text-inverse: var(--color-info-text-inverse);

    --color-slot-6-active: var(--color-secondary-active);
    --color-slot-6-soft-strong: var(--color-secondary-soft-strong);
    --color-slot-6-text-inverse: var(--color-secondary-text-inverse);

    --color-slot-7-active: var(--color-orange-800);
    --color-slot-7-soft-strong: var(--color-orange-100);
    --color-slot-7-text-inverse: #ffffff;

    --color-slot-8-active: var(--color-teal-800);
    --color-slot-8-soft-strong: var(--color-teal-100);
    --color-slot-8-text-inverse: #ffffff;

    --color-slot-9-active: var(--color-pink-800);
    --color-slot-9-soft-strong: var(--color-pink-100);
    --color-slot-9-text-inverse: #ffffff;

    --color-slot-10-active: var(--color-gray-900);
    --color-slot-10-soft-strong: var(--color-gray-200);
    --color-slot-10-text-inverse: #ffffff;

    /* -----------------------------------------------------
       Compatibility bridges
       هذه طبقة توافق عامة فقط للمكونات الحالية
       وليست البديل النهائي عن component contracts
    ----------------------------------------------------- */

    --m-surface: var(--color-surface);
    --m-surface-soft: var(--color-surface-soft);
    --m-surface-muted: var(--color-surface-muted);
    --m-surface-raised: var(--color-surface-raised);
    --m-surface-elevated: var(--color-surface-elevated);
    --m-surface-hover: var(--color-surface-hover);
    --m-surface-active: var(--color-surface-active);
    --m-surface-selected: var(--color-surface-selected);

    --m-border: var(--color-border);
    --m-border-subtle: var(--color-border-subtle);
    --m-border-soft: var(--color-border-soft);
    --m-border-strong: var(--color-border-strong);

    --m-text: var(--color-text);
    --m-text-strong: var(--color-text-strong);
    --m-text-soft: var(--color-text-soft);
    --m-text-muted: var(--color-text-muted);
    --m-text-faint: var(--color-text-faint);
    --m-text-inverse: var(--color-text-inverse);

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

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

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

    --m-interaction-neutral-hover: var(--color-hover-neutral);
    --m-interaction-brand-hover: var(--color-hover-brand);
    --m-interaction-brand-active: var(--color-focus-ring);

    --m-color-c1: var(--color-slot-1);
    --m-color-c1-hover: var(--color-slot-1-hover);
    --m-color-c1-active: var(--color-slot-1-active);
    --m-color-c1-soft: var(--color-slot-1-soft);
    --m-color-c1-soft-strong: var(--color-slot-1-soft-strong);
    --m-color-c1-text-inverse: var(--color-slot-1-text-inverse);

    --m-color-c2: var(--color-slot-2);
    --m-color-c2-hover: var(--color-slot-2-hover);
    --m-color-c2-active: var(--color-slot-2-active);
    --m-color-c2-soft: var(--color-slot-2-soft);
    --m-color-c2-soft-strong: var(--color-slot-2-soft-strong);
    --m-color-c2-text-inverse: var(--color-slot-2-text-inverse);

    --m-color-c3: var(--color-slot-3);
    --m-color-c3-hover: var(--color-slot-3-hover);
    --m-color-c3-active: var(--color-slot-3-active);
    --m-color-c3-soft: var(--color-slot-3-soft);
    --m-color-c3-soft-strong: var(--color-slot-3-soft-strong);
    --m-color-c3-text-inverse: var(--color-slot-3-text-inverse);

    --m-color-c4: var(--color-slot-4);
    --m-color-c4-hover: var(--color-slot-4-hover);
    --m-color-c4-active: var(--color-slot-4-active);
    --m-color-c4-soft: var(--color-slot-4-soft);
    --m-color-c4-soft-strong: var(--color-slot-4-soft-strong);
    --m-color-c4-text-inverse: var(--color-slot-4-text-inverse);

    --m-color-c5: var(--color-slot-5);
    --m-color-c5-hover: var(--color-slot-5-hover);
    --m-color-c5-active: var(--color-slot-5-active);
    --m-color-c5-soft: var(--color-slot-5-soft);
    --m-color-c5-soft-strong: var(--color-slot-5-soft-strong);
    --m-color-c5-text-inverse: var(--color-slot-5-text-inverse);

    --m-color-c6: var(--color-slot-6);
    --m-color-c6-hover: var(--color-slot-6-hover);
    --m-color-c6-active: var(--color-slot-6-active);
    --m-color-c6-soft: var(--color-slot-6-soft);
    --m-color-c6-soft-strong: var(--color-slot-6-soft-strong);
    --m-color-c6-text-inverse: var(--color-slot-6-text-inverse);

    --m-color-c7: var(--color-slot-7);
    --m-color-c7-hover: var(--color-slot-7-hover);
    --m-color-c7-active: var(--color-slot-7-active);
    --m-color-c7-soft: var(--color-slot-7-soft);
    --m-color-c7-soft-strong: var(--color-slot-7-soft-strong);
    --m-color-c7-text-inverse: var(--color-slot-7-text-inverse);

    --m-color-c8: var(--color-slot-8);
    --m-color-c8-hover: var(--color-slot-8-hover);
    --m-color-c8-active: var(--color-slot-8-active);
    --m-color-c8-soft: var(--color-slot-8-soft);
    --m-color-c8-soft-strong: var(--color-slot-8-soft-strong);
    --m-color-c8-text-inverse: var(--color-slot-8-text-inverse);

    --m-color-c9: var(--color-slot-9);
    --m-color-c9-hover: var(--color-slot-9-hover);
    --m-color-c9-active: var(--color-slot-9-active);
    --m-color-c9-soft: var(--color-slot-9-soft);
    --m-color-c9-soft-strong: var(--color-slot-9-soft-strong);
    --m-color-c9-text-inverse: var(--color-slot-9-text-inverse);

    --m-color-c10: var(--color-slot-10);
    --m-color-c10-hover: var(--color-slot-10-hover);
    --m-color-c10-active: var(--color-slot-10-active);
    --m-color-c10-soft: var(--color-slot-10-soft);
    --m-color-c10-soft-strong: var(--color-slot-10-soft-strong);
    --m-color-c10-text-inverse: var(--color-slot-10-text-inverse);

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

    --m-context-border-active: var(--m-context-accent-color);
    --m-context-focus-ring: var(--color-focus-ring);

    --m-context-state-hover-bg: var(--m-context-surface-hover);
    --m-context-state-hover-accent: var(--m-context-accent-color-hover);
    --m-context-state-hover-border: var(--m-context-border-strong);
    --m-context-state-active-bg: var(--m-context-surface-active);
    --m-context-state-active-accent: var(--m-context-accent-color-active);
    --m-context-state-active-border: var(--m-context-border-active);
    --m-context-state-selected-bg: var(--m-context-surface-selected);
    --m-context-state-selected-accent: var(--m-context-accent-color);
    --m-context-state-selected-border: var(--m-context-border-active);

    --m-context-overlay: var(--color-overlay);

    --m-context-icon: var(--m-context-text-soft);
    --m-context-icon-hover: var(--m-context-text);
    --m-context-icon-active: var(--m-context-text-strong);
    --m-context-icon-action-bg: var(--m-context-surface-soft);
    --m-context-icon-action-bg-hover: var(--m-context-state-hover-bg);
    --m-context-icon-action-bg-active: var(--m-context-state-active-bg);

    --m-context-shadow: var(--shadow-xs);
    --m-context-shadow-hover: var(--shadow-sm);
    --m-context-shadow-active: var(--shadow-sm);
    --m-context-shadow-panel: var(--shadow-md);
    --m-context-shadow-modal: var(--shadow-lg);

    --m-context-accent: var(--m-context-accent-color);
    --m-context-accent-hover: var(--m-context-accent-color-hover);
    --m-context-accent-active: var(--m-context-accent-color-active);

    --m-context-state-hover: var(--m-context-state-hover-bg);
    --m-context-state-active: var(--m-context-state-active-bg);
    --m-context-state-selected: var(--m-context-state-selected-bg);
    --m-context-state-focus: var(--m-context-focus-ring);
    --m-context-state-disabled: var(--m-context-surface-muted);

    --m-context-icon-soft: var(--m-context-text-soft);
    --m-context-icon-muted: var(--m-context-text-muted);
    --m-context-icon-strong: var(--m-context-text-strong);

    --m-context-shadow-sm: var(--m-context-shadow);
    --m-context-shadow-md: var(--m-context-shadow-panel);
    --m-context-shadow-lg: var(--m-context-shadow-modal);

    --m-slot-c1-surface: var(--m-context-surface);
    --m-slot-c1-surface-soft: var(--m-color-c1-soft, var(--m-context-surface-soft));
    --m-slot-c1-surface-muted: var(--m-context-surface-muted);
    --m-slot-c1-surface-hover: var(--m-color-c1-soft, var(--m-context-surface-hover));
    --m-slot-c1-border: var(--m-color-c1, var(--m-context-border));
    --m-slot-c1-border-subtle: var(--m-context-border-subtle);
    --m-slot-c1-border-strong: var(--m-color-c1-active, var(--m-context-border-strong));
    --m-slot-c1-text: var(--m-color-c1, var(--m-context-text));
    --m-slot-c1-text-soft: var(--m-context-text-soft);
    --m-slot-c1-text-faint: var(--m-context-text-faint);
    --m-slot-c1-text-inverse: var(--m-color-c1-text-inverse, var(--m-context-text-inverse));
    --m-slot-c1-accent: var(--m-color-c1, var(--m-context-accent-color));
    --m-slot-c1-accent-color: var(--m-slot-c1-accent);
    --m-slot-c1-accent-soft: var(--m-color-c1-soft, var(--m-context-accent-soft));
    --m-slot-c1-accent-soft-strong: var(--m-color-c1-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c1-icon-color: var(--m-color-c1, var(--m-context-icon));
    --m-slot-c1-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c2-surface: var(--m-context-surface);
    --m-slot-c2-surface-soft: var(--m-color-c2-soft, var(--m-context-surface-soft));
    --m-slot-c2-surface-muted: var(--m-context-surface-muted);
    --m-slot-c2-surface-hover: var(--m-color-c2-soft, var(--m-context-surface-hover));
    --m-slot-c2-border: var(--m-color-c2, var(--m-context-border));
    --m-slot-c2-border-subtle: var(--m-context-border-subtle);
    --m-slot-c2-border-strong: var(--m-color-c2-active, var(--m-context-border-strong));
    --m-slot-c2-text: var(--m-color-c2, var(--m-context-text));
    --m-slot-c2-text-soft: var(--m-context-text-soft);
    --m-slot-c2-text-faint: var(--m-context-text-faint);
    --m-slot-c2-text-inverse: var(--m-color-c2-text-inverse, var(--m-context-text-inverse));
    --m-slot-c2-accent: var(--m-color-c2, var(--m-context-accent-color));
    --m-slot-c2-accent-color: var(--m-slot-c2-accent);
    --m-slot-c2-accent-soft: var(--m-color-c2-soft, var(--m-context-accent-soft));
    --m-slot-c2-accent-soft-strong: var(--m-color-c2-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c2-icon-color: var(--m-color-c2, var(--m-context-icon));
    --m-slot-c2-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c3-surface: var(--m-context-surface);
    --m-slot-c3-surface-soft: var(--m-color-c3-soft, var(--m-context-surface-soft));
    --m-slot-c3-surface-muted: var(--m-context-surface-muted);
    --m-slot-c3-surface-hover: var(--m-color-c3-soft, var(--m-context-surface-hover));
    --m-slot-c3-border: var(--m-color-c3, var(--m-context-border));
    --m-slot-c3-border-subtle: var(--m-context-border-subtle);
    --m-slot-c3-border-strong: var(--m-color-c3-active, var(--m-context-border-strong));
    --m-slot-c3-text: var(--m-color-c3, var(--m-context-text));
    --m-slot-c3-text-soft: var(--m-context-text-soft);
    --m-slot-c3-text-faint: var(--m-context-text-faint);
    --m-slot-c3-text-inverse: var(--m-color-c3-text-inverse, var(--m-context-text-inverse));
    --m-slot-c3-accent: var(--m-color-c3, var(--m-context-accent-color));
    --m-slot-c3-accent-color: var(--m-slot-c3-accent);
    --m-slot-c3-accent-soft: var(--m-color-c3-soft, var(--m-context-accent-soft));
    --m-slot-c3-accent-soft-strong: var(--m-color-c3-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c3-icon-color: var(--m-color-c3, var(--m-context-icon));
    --m-slot-c3-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c4-surface: var(--m-context-surface);
    --m-slot-c4-surface-soft: var(--m-color-c4-soft, var(--m-context-surface-soft));
    --m-slot-c4-surface-muted: var(--m-context-surface-muted);
    --m-slot-c4-surface-hover: var(--m-color-c4-soft, var(--m-context-surface-hover));
    --m-slot-c4-border: var(--m-color-c4, var(--m-context-border));
    --m-slot-c4-border-subtle: var(--m-context-border-subtle);
    --m-slot-c4-border-strong: var(--m-color-c4-active, var(--m-context-border-strong));
    --m-slot-c4-text: var(--m-color-c4, var(--m-context-text));
    --m-slot-c4-text-soft: var(--m-context-text-soft);
    --m-slot-c4-text-faint: var(--m-context-text-faint);
    --m-slot-c4-text-inverse: var(--m-color-c4-text-inverse, var(--m-context-text-inverse));
    --m-slot-c4-accent: var(--m-color-c4, var(--m-context-accent-color));
    --m-slot-c4-accent-color: var(--m-slot-c4-accent);
    --m-slot-c4-accent-soft: var(--m-color-c4-soft, var(--m-context-accent-soft));
    --m-slot-c4-accent-soft-strong: var(--m-color-c4-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c4-icon-color: var(--m-color-c4, var(--m-context-icon));
    --m-slot-c4-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c5-surface: var(--m-context-surface);
    --m-slot-c5-surface-soft: var(--m-color-c5-soft, var(--m-context-surface-soft));
    --m-slot-c5-surface-muted: var(--m-context-surface-muted);
    --m-slot-c5-surface-hover: var(--m-color-c5-soft, var(--m-context-surface-hover));
    --m-slot-c5-border: var(--m-color-c5, var(--m-context-border));
    --m-slot-c5-border-subtle: var(--m-context-border-subtle);
    --m-slot-c5-border-strong: var(--m-color-c5-active, var(--m-context-border-strong));
    --m-slot-c5-text: var(--m-color-c5, var(--m-context-text));
    --m-slot-c5-text-soft: var(--m-context-text-soft);
    --m-slot-c5-text-faint: var(--m-context-text-faint);
    --m-slot-c5-text-inverse: var(--m-color-c5-text-inverse, var(--m-context-text-inverse));
    --m-slot-c5-accent: var(--m-color-c5, var(--m-context-accent-color));
    --m-slot-c5-accent-color: var(--m-slot-c5-accent);
    --m-slot-c5-accent-soft: var(--m-color-c5-soft, var(--m-context-accent-soft));
    --m-slot-c5-accent-soft-strong: var(--m-color-c5-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c5-icon-color: var(--m-color-c5, var(--m-context-icon));
    --m-slot-c5-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c6-surface: var(--m-context-surface);
    --m-slot-c6-surface-soft: var(--m-color-c6-soft, var(--m-context-surface-soft));
    --m-slot-c6-surface-muted: var(--m-context-surface-muted);
    --m-slot-c6-surface-hover: var(--m-color-c6-soft, var(--m-context-surface-hover));
    --m-slot-c6-border: var(--m-color-c6, var(--m-context-border));
    --m-slot-c6-border-subtle: var(--m-context-border-subtle);
    --m-slot-c6-border-strong: var(--m-color-c6-active, var(--m-context-border-strong));
    --m-slot-c6-text: var(--m-color-c6, var(--m-context-text));
    --m-slot-c6-text-soft: var(--m-context-text-soft);
    --m-slot-c6-text-faint: var(--m-context-text-faint);
    --m-slot-c6-text-inverse: var(--m-color-c6-text-inverse, var(--m-context-text-inverse));
    --m-slot-c6-accent: var(--m-color-c6, var(--m-context-accent-color));
    --m-slot-c6-accent-color: var(--m-slot-c6-accent);
    --m-slot-c6-accent-soft: var(--m-color-c6-soft, var(--m-context-accent-soft));
    --m-slot-c6-accent-soft-strong: var(--m-color-c6-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c6-icon-color: var(--m-color-c6, var(--m-context-icon));
    --m-slot-c6-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c7-surface: var(--m-context-surface);
    --m-slot-c7-surface-soft: var(--m-color-c7-soft, var(--m-context-surface-soft));
    --m-slot-c7-surface-muted: var(--m-context-surface-muted);
    --m-slot-c7-surface-hover: var(--m-color-c7-soft, var(--m-context-surface-hover));
    --m-slot-c7-border: var(--m-color-c7, var(--m-context-border));
    --m-slot-c7-border-subtle: var(--m-context-border-subtle);
    --m-slot-c7-border-strong: var(--m-color-c7-active, var(--m-context-border-strong));
    --m-slot-c7-text: var(--m-color-c7, var(--m-context-text));
    --m-slot-c7-text-soft: var(--m-context-text-soft);
    --m-slot-c7-text-faint: var(--m-context-text-faint);
    --m-slot-c7-text-inverse: var(--m-color-c7-text-inverse, var(--m-context-text-inverse));
    --m-slot-c7-accent: var(--m-color-c7, var(--m-context-accent-color));
    --m-slot-c7-accent-color: var(--m-slot-c7-accent);
    --m-slot-c7-accent-soft: var(--m-color-c7-soft, var(--m-context-accent-soft));
    --m-slot-c7-accent-soft-strong: var(--m-color-c7-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c7-icon-color: var(--m-color-c7, var(--m-context-icon));
    --m-slot-c7-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c8-surface: var(--m-context-surface);
    --m-slot-c8-surface-soft: var(--m-color-c8-soft, var(--m-context-surface-soft));
    --m-slot-c8-surface-muted: var(--m-context-surface-muted);
    --m-slot-c8-surface-hover: var(--m-color-c8-soft, var(--m-context-surface-hover));
    --m-slot-c8-border: var(--m-color-c8, var(--m-context-border));
    --m-slot-c8-border-subtle: var(--m-context-border-subtle);
    --m-slot-c8-border-strong: var(--m-color-c8-active, var(--m-context-border-strong));
    --m-slot-c8-text: var(--m-color-c8, var(--m-context-text));
    --m-slot-c8-text-soft: var(--m-context-text-soft);
    --m-slot-c8-text-faint: var(--m-context-text-faint);
    --m-slot-c8-text-inverse: var(--m-color-c8-text-inverse, var(--m-context-text-inverse));
    --m-slot-c8-accent: var(--m-color-c8, var(--m-context-accent-color));
    --m-slot-c8-accent-color: var(--m-slot-c8-accent);
    --m-slot-c8-accent-soft: var(--m-color-c8-soft, var(--m-context-accent-soft));
    --m-slot-c8-accent-soft-strong: var(--m-color-c8-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c8-icon-color: var(--m-color-c8, var(--m-context-icon));
    --m-slot-c8-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c9-surface: var(--m-context-surface);
    --m-slot-c9-surface-soft: var(--m-color-c9-soft, var(--m-context-surface-soft));
    --m-slot-c9-surface-muted: var(--m-context-surface-muted);
    --m-slot-c9-surface-hover: var(--m-color-c9-soft, var(--m-context-surface-hover));
    --m-slot-c9-border: var(--m-color-c9, var(--m-context-border));
    --m-slot-c9-border-subtle: var(--m-context-border-subtle);
    --m-slot-c9-border-strong: var(--m-color-c9-active, var(--m-context-border-strong));
    --m-slot-c9-text: var(--m-color-c9, var(--m-context-text));
    --m-slot-c9-text-soft: var(--m-context-text-soft);
    --m-slot-c9-text-faint: var(--m-context-text-faint);
    --m-slot-c9-text-inverse: var(--m-color-c9-text-inverse, var(--m-context-text-inverse));
    --m-slot-c9-accent: var(--m-color-c9, var(--m-context-accent-color));
    --m-slot-c9-accent-color: var(--m-slot-c9-accent);
    --m-slot-c9-accent-soft: var(--m-color-c9-soft, var(--m-context-accent-soft));
    --m-slot-c9-accent-soft-strong: var(--m-color-c9-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c9-icon-color: var(--m-color-c9, var(--m-context-icon));
    --m-slot-c9-shadow-panel: var(--m-context-shadow-panel);

    --m-slot-c10-surface: var(--m-context-surface);
    --m-slot-c10-surface-soft: var(--m-color-c10-soft, var(--m-context-surface-soft));
    --m-slot-c10-surface-muted: var(--m-context-surface-muted);
    --m-slot-c10-surface-hover: var(--m-color-c10-soft, var(--m-context-surface-hover));
    --m-slot-c10-border: var(--m-color-c10, var(--m-context-border));
    --m-slot-c10-border-subtle: var(--m-context-border-subtle);
    --m-slot-c10-border-strong: var(--m-color-c10-active, var(--m-context-border-strong));
    --m-slot-c10-text: var(--m-color-c10, var(--m-context-text));
    --m-slot-c10-text-soft: var(--m-context-text-soft);
    --m-slot-c10-text-faint: var(--m-context-text-faint);
    --m-slot-c10-text-inverse: var(--m-color-c10-text-inverse, var(--m-context-text-inverse));
    --m-slot-c10-accent: var(--m-color-c10, var(--m-context-accent-color));
    --m-slot-c10-accent-color: var(--m-slot-c10-accent);
    --m-slot-c10-accent-soft: var(--m-color-c10-soft, var(--m-context-accent-soft));
    --m-slot-c10-accent-soft-strong: var(--m-color-c10-soft-strong, var(--m-context-accent-soft-strong));
    --m-slot-c10-icon-color: var(--m-color-c10, var(--m-context-icon));
    --m-slot-c10-shadow-panel: var(--m-context-shadow-panel);

    --m-context-info-surface: var(--m-slot-c2-surface-soft);
    --m-context-info-border: var(--m-slot-c2-border);
    --m-context-info-accent: var(--m-slot-c2-accent-color);
    --m-context-info-text: var(--m-slot-c2-text);
    --m-context-info-color: var(--m-slot-c2-accent-color);

    --m-context-warning-surface: var(--m-slot-c3-surface-soft);
    --m-context-warning-border: var(--m-slot-c3-border);
    --m-context-warning-accent: var(--m-slot-c3-accent-color);
    --m-context-warning-text: var(--m-slot-c3-text);
    --m-context-warning-color: var(--m-slot-c3-accent-color);

    --m-context-danger-surface: var(--m-slot-c4-surface-soft);
    --m-context-danger-border: var(--m-slot-c4-border);
    --m-context-danger-accent: var(--m-slot-c4-accent-color);
    --m-context-danger-text: var(--m-slot-c4-text);
    --m-context-danger-color: var(--m-slot-c4-accent-color);

    --m-context-success-surface: var(--m-slot-c5-surface-soft);
    --m-context-success-border: var(--m-slot-c5-border);
    --m-context-success-accent: var(--m-slot-c5-accent-color);
    --m-context-success-text: var(--m-slot-c5-text);
    --m-context-success-color: var(--m-slot-c5-accent-color);
}


/* =========================================================
   2) PRESET: DEFAULT / LIGHT
   القالب الافتراضي الجاهز - النسخة الفاتحة
========================================================= */

html[data-theme-preset="default"][data-theme-mode="light"],
html[data-theme-preset="default"]:not([data-theme-mode]),
:root[data-theme-preset="default"][data-theme-mode="light"] {
    /* -----------------------------------------------------
       Brand / primary / secondary
    ----------------------------------------------------- */

    --color-brand: var(--color-primary-600);
    --color-brand-hover: var(--color-primary-700);
    --color-brand-active: var(--color-primary-800);
    --color-brand-soft: var(--color-primary-50);
    --color-brand-soft-strong: var(--color-primary-100);

    --color-primary: var(--color-primary-600);
    --color-primary-hover: var(--color-primary-700);
    --color-primary-active: var(--color-primary-800);
    --color-primary-soft: var(--color-primary-50);
    --color-primary-soft-strong: var(--color-primary-100);
    --color-primary-text-inverse: #ffffff;

    --color-secondary: var(--color-purple-600);
    --color-secondary-hover: var(--color-purple-700);
    --color-secondary-active: var(--color-purple-800);
    --color-secondary-soft: var(--color-purple-50);
    --color-secondary-soft-strong: var(--color-purple-100);
    --color-secondary-text-inverse: #ffffff;

    /* -----------------------------------------------------
       Semantic
    ----------------------------------------------------- */

    --color-success: var(--color-success-600);
    --color-success-hover: var(--color-success-700);
    --color-success-strong: var(--color-success-700);
    --color-success-soft: var(--color-success-50);
    --color-success-soft-strong: var(--color-success-100);
    --color-success-text-inverse: #ffffff;

    --color-danger: var(--color-danger-600);
    --color-danger-hover: var(--color-danger-700);
    --color-danger-strong: var(--color-danger-700);
    --color-danger-soft: var(--color-danger-50);
    --color-danger-soft-strong: var(--color-danger-100);
    --color-danger-text-inverse: #ffffff;

    --color-warning: var(--color-warning-600);
    --color-warning-hover: var(--color-warning-700);
    --color-warning-strong: var(--color-warning-700);
    --color-warning-soft: var(--color-warning-50);
    --color-warning-soft-strong: var(--color-warning-100);
    --color-warning-text-inverse: #ffffff;

    --color-info: var(--color-info-600);
    --color-info-hover: var(--color-info-700);
    --color-info-strong: var(--color-info-700);
    --color-info-soft: var(--color-info-50);
    --color-info-soft-strong: var(--color-info-100);
    --color-info-text-inverse: #ffffff;

    --color-neutral: var(--color-gray-700);
    --color-neutral-hover: var(--color-gray-800);
    --color-neutral-active: var(--color-gray-900);
    --color-neutral-soft: var(--color-gray-50);
    --color-neutral-soft-strong: var(--color-gray-100);
    --color-neutral-text-inverse: #ffffff;

    /* -----------------------------------------------------
       Surfaces
    ----------------------------------------------------- */

    --color-page: #f7f8fa;
    --color-page-soft: var(--color-gray-50);

    --color-surface: #ffffff;
    --color-surface-soft: var(--color-gray-50);
    --color-surface-muted: var(--color-gray-100);
    --color-surface-subtle: var(--color-gray-75);

    --color-surface-raised: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-inverse: var(--color-gray-900);

    --color-surface-hover: var(--color-gray-50);
    --color-surface-active: var(--color-primary-50);
    --color-surface-selected: var(--color-primary-50);

    /* -----------------------------------------------------
       Borders
    ----------------------------------------------------- */

    --color-border-subtle: var(--color-gray-150);
    --color-border-soft: var(--color-gray-150);
    --color-border: var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);
    --color-border-inverse: rgba(255, 255, 255, 0.18);

    /* -----------------------------------------------------
       Text
    ----------------------------------------------------- */

    --color-text: var(--color-gray-800);
    --color-text-strong: var(--color-gray-900);
    --color-text-soft: var(--color-gray-700);
    --color-text-muted: var(--color-gray-500);
    --color-text-faint: var(--color-gray-400);
    --color-text-inverse: #ffffff;

    --color-placeholder: var(--color-gray-400);
    --color-disabled-bg: var(--color-gray-100);
    --color-disabled-text: var(--color-gray-400);
    --color-disabled-border: var(--color-gray-200);

    /* -----------------------------------------------------
       Interaction
    ----------------------------------------------------- */

    --color-hover-neutral: rgba(148, 163, 184, 0.10);
    --color-hover-brand: rgba(37, 99, 235, 0.08);

    --color-overlay: rgba(15, 23, 42, 0.45);
    --color-backdrop-soft: rgba(15, 23, 42, 0.08);
    --color-backdrop-strong: rgba(15, 23, 42, 0.16);

    --color-focus-ring: rgba(37, 99, 235, 0.18);
    --color-focus-ring-strong: rgba(37, 99, 235, 0.28);

    /* -----------------------------------------------------
       Global visual slots c1..c10
    ----------------------------------------------------- */

    --color-slot-1: var(--color-primary);
    --color-slot-1-hover: var(--color-primary-hover);
    --color-slot-1-soft: var(--color-primary-soft);
    --color-slot-1-active: var(--color-primary-active);
    --color-slot-1-soft-strong: var(--color-primary-soft-strong);
    --color-slot-1-text-inverse: #ffffff;

    --color-slot-2: var(--color-success);
    --color-slot-2-hover: var(--color-success-hover);
    --color-slot-2-soft: var(--color-success-soft);
    --color-slot-2-active: var(--color-success-strong);
    --color-slot-2-soft-strong: var(--color-success-soft-strong);
    --color-slot-2-text-inverse: #ffffff;

    --color-slot-3: var(--color-danger);
    --color-slot-3-hover: var(--color-danger-hover);
    --color-slot-3-soft: var(--color-danger-soft);
    --color-slot-3-active: var(--color-danger-strong);
    --color-slot-3-soft-strong: var(--color-danger-soft-strong);
    --color-slot-3-text-inverse: #ffffff;

    --color-slot-4: var(--color-warning);
    --color-slot-4-hover: var(--color-warning-hover);
    --color-slot-4-soft: var(--color-warning-soft);
    --color-slot-4-active: var(--color-warning-strong);
    --color-slot-4-soft-strong: var(--color-warning-soft-strong);
    --color-slot-4-text-inverse: #ffffff;

    --color-slot-5: var(--color-info);
    --color-slot-5-hover: var(--color-info-hover);
    --color-slot-5-soft: var(--color-info-soft);
    --color-slot-5-active: var(--color-info-strong);
    --color-slot-5-soft-strong: var(--color-info-soft-strong);
    --color-slot-5-text-inverse: #ffffff;

    --color-slot-6: var(--color-secondary);
    --color-slot-6-hover: var(--color-secondary-hover);
    --color-slot-6-soft: var(--color-secondary-soft);
    --color-slot-6-active: var(--color-secondary-active);
    --color-slot-6-soft-strong: var(--color-secondary-soft-strong);
    --color-slot-6-text-inverse: #ffffff;

    --color-slot-7: var(--color-orange-600);
    --color-slot-7-hover: var(--color-orange-700);
    --color-slot-7-soft: var(--color-orange-50);
    --color-slot-7-active: var(--color-orange-800);
    --color-slot-7-soft-strong: var(--color-orange-100);
    --color-slot-7-text-inverse: #ffffff;

    --color-slot-8: var(--color-teal-600);
    --color-slot-8-hover: var(--color-teal-700);
    --color-slot-8-soft: var(--color-teal-50);
    --color-slot-8-active: var(--color-teal-800);
    --color-slot-8-soft-strong: var(--color-teal-100);
    --color-slot-8-text-inverse: #ffffff;

    --color-slot-9: var(--color-pink-600);
    --color-slot-9-hover: var(--color-pink-700);
    --color-slot-9-soft: var(--color-pink-50);
    --color-slot-9-active: var(--color-pink-800);
    --color-slot-9-soft-strong: var(--color-pink-100);
    --color-slot-9-text-inverse: #ffffff;

    --color-slot-10: var(--color-gray-700);
    --color-slot-10-hover: var(--color-gray-800);
    --color-slot-10-soft: var(--color-gray-100);
    --color-slot-10-active: var(--color-gray-900);
    --color-slot-10-soft-strong: var(--color-gray-200);
    --color-slot-10-text-inverse: #ffffff;

    color-scheme: light;
}


/* =========================================================
   3) PRESET: DEFAULT / DARK
   الوضع الداكن الجاهز للقالب الافتراضي
========================================================= */

html[data-theme-preset="default"][data-theme-mode="dark"],
:root[data-theme-preset="default"][data-theme-mode="dark"] {
    /* -----------------------------------------------------
       Brand / primary / secondary
    ----------------------------------------------------- */

    --color-brand: #60a5fa;
    --color-brand-hover: #93c5fd;
    --color-brand-active: #bfdbfe;
    --color-brand-soft: rgba(96, 165, 250, 0.14);
    --color-brand-soft-strong: rgba(96, 165, 250, 0.22);

    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-active: #bfdbfe;
    --color-primary-soft: rgba(96, 165, 250, 0.14);
    --color-primary-soft-strong: rgba(96, 165, 250, 0.22);
    --color-primary-text-inverse: #08111f;

    --color-secondary: #c084fc;
    --color-secondary-hover: #d8b4fe;
    --color-secondary-active: #e9d5ff;
    --color-secondary-soft: rgba(192, 132, 252, 0.14);
    --color-secondary-soft-strong: rgba(192, 132, 252, 0.22);
    --color-secondary-text-inverse: #19052e;

    /* -----------------------------------------------------
       Semantic
    ----------------------------------------------------- */

    --color-success: #4ade80;
    --color-success-hover: #86efac;
    --color-success-strong: #86efac;
    --color-success-soft: rgba(74, 222, 128, 0.14);
    --color-success-soft-strong: rgba(74, 222, 128, 0.22);
    --color-success-text-inverse: #05210f;

    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-danger-strong: #fca5a5;
    --color-danger-soft: rgba(248, 113, 113, 0.14);
    --color-danger-soft-strong: rgba(248, 113, 113, 0.22);
    --color-danger-text-inverse: #2b0808;

    --color-warning: #fbbf24;
    --color-warning-hover: #fcd34d;
    --color-warning-strong: #fde68a;
    --color-warning-soft: rgba(251, 191, 36, 0.14);
    --color-warning-soft-strong: rgba(251, 191, 36, 0.22);
    --color-warning-text-inverse: #2c1a00;

    --color-info: #22d3ee;
    --color-info-hover: #67e8f9;
    --color-info-strong: #a5f3fc;
    --color-info-soft: rgba(34, 211, 238, 0.14);
    --color-info-soft-strong: rgba(34, 211, 238, 0.22);
    --color-info-text-inverse: #04232a;

    --color-neutral: #cbd5e1;
    --color-neutral-hover: #e2e8f0;
    --color-neutral-active: #f8fafc;
    --color-neutral-soft: rgba(148, 163, 184, 0.10);
    --color-neutral-soft-strong: rgba(148, 163, 184, 0.16);
    --color-neutral-text-inverse: #020617;

    /* -----------------------------------------------------
       Surfaces
    ----------------------------------------------------- */

    --color-page: #0b1220;
    --color-page-soft: #111827;

    --color-surface: #111827;
    --color-surface-soft: #182132;
    --color-surface-muted: #1f2937;
    --color-surface-subtle: #162032;

    --color-surface-raised: #0f172a;
    --color-surface-elevated: #0f172a;
    --color-surface-inverse: #f8fafc;

    --color-surface-hover: #1b2637;
    --color-surface-active: rgba(96, 165, 250, 0.14);
    --color-surface-selected: rgba(96, 165, 250, 0.16);

    /* -----------------------------------------------------
       Borders
    ----------------------------------------------------- */

    --color-border-subtle: rgba(148, 163, 184, 0.14);
    --color-border-soft: rgba(148, 163, 184, 0.14);
    --color-border: rgba(148, 163, 184, 0.18);
    --color-border-strong: rgba(148, 163, 184, 0.26);
    --color-border-inverse: rgba(255, 255, 255, 0.18);

    /* -----------------------------------------------------
       Text
    ----------------------------------------------------- */

    --color-text: #dbe4f0;
    --color-text-strong: #f8fafc;
    --color-text-soft: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;
    --color-text-inverse: #020617;

    --color-placeholder: #64748b;
    --color-disabled-bg: rgba(148, 163, 184, 0.10);
    --color-disabled-text: #64748b;
    --color-disabled-border: rgba(148, 163, 184, 0.16);

    /* -----------------------------------------------------
       Interaction
    ----------------------------------------------------- */

    --color-hover-neutral: rgba(148, 163, 184, 0.12);
    --color-hover-brand: rgba(96, 165, 250, 0.14);

    --color-overlay: rgba(2, 6, 23, 0.62);
    --color-backdrop-soft: rgba(148, 163, 184, 0.08);
    --color-backdrop-strong: rgba(148, 163, 184, 0.16);

    --color-focus-ring: rgba(96, 165, 250, 0.28);
    --color-focus-ring-strong: rgba(96, 165, 250, 0.40);

    /* -----------------------------------------------------
       Global visual slots c1..c10
    ----------------------------------------------------- */

    --color-slot-1: var(--color-primary);
    --color-slot-1-hover: var(--color-primary-hover);
    --color-slot-1-soft: var(--color-primary-soft);
    --color-slot-1-active: var(--color-primary-active);
    --color-slot-1-soft-strong: var(--color-primary-soft-strong);
    --color-slot-1-text-inverse: var(--color-primary-text-inverse);

    --color-slot-2: var(--color-success);
    --color-slot-2-hover: var(--color-success-hover);
    --color-slot-2-soft: var(--color-success-soft);
    --color-slot-2-active: var(--color-success-strong);
    --color-slot-2-soft-strong: var(--color-success-soft-strong);
    --color-slot-2-text-inverse: var(--color-success-text-inverse);

    --color-slot-3: var(--color-danger);
    --color-slot-3-hover: var(--color-danger-hover);
    --color-slot-3-soft: var(--color-danger-soft);
    --color-slot-3-active: var(--color-danger-strong);
    --color-slot-3-soft-strong: var(--color-danger-soft-strong);
    --color-slot-3-text-inverse: var(--color-danger-text-inverse);

    --color-slot-4: var(--color-warning);
    --color-slot-4-hover: var(--color-warning-hover);
    --color-slot-4-soft: var(--color-warning-soft);
    --color-slot-4-active: var(--color-warning-strong);
    --color-slot-4-soft-strong: var(--color-warning-soft-strong);
    --color-slot-4-text-inverse: var(--color-warning-text-inverse);

    --color-slot-5: var(--color-info);
    --color-slot-5-hover: var(--color-info-hover);
    --color-slot-5-soft: var(--color-info-soft);
    --color-slot-5-active: var(--color-info-strong);
    --color-slot-5-soft-strong: var(--color-info-soft-strong);
    --color-slot-5-text-inverse: var(--color-info-text-inverse);

    --color-slot-6: var(--color-secondary);
    --color-slot-6-hover: var(--color-secondary-hover);
    --color-slot-6-soft: var(--color-secondary-soft);
    --color-slot-6-active: var(--color-secondary-active);
    --color-slot-6-soft-strong: var(--color-secondary-soft-strong);
    --color-slot-6-text-inverse: var(--color-secondary-text-inverse);

    --color-slot-7: #fb923c;
    --color-slot-7-hover: #fdba74;
    --color-slot-7-soft: rgba(251, 146, 60, 0.14);
    --color-slot-7-active: #fdba74;
    --color-slot-7-soft-strong: rgba(251, 146, 60, 0.22);
    --color-slot-7-text-inverse: #2a1203;

    --color-slot-8: #2dd4bf;
    --color-slot-8-hover: #5eead4;
    --color-slot-8-soft: rgba(45, 212, 191, 0.14);
    --color-slot-8-active: #5eead4;
    --color-slot-8-soft-strong: rgba(45, 212, 191, 0.22);
    --color-slot-8-text-inverse: #062420;

    --color-slot-9: #f472b6;
    --color-slot-9-hover: #f9a8d4;
    --color-slot-9-soft: rgba(244, 114, 182, 0.14);
    --color-slot-9-active: #f9a8d4;
    --color-slot-9-soft-strong: rgba(244, 114, 182, 0.22);
    --color-slot-9-text-inverse: #2c0818;

    --color-slot-10: #cbd5e1;
    --color-slot-10-hover: #e2e8f0;
    --color-slot-10-soft: rgba(148, 163, 184, 0.12);
    --color-slot-10-active: #f8fafc;
    --color-slot-10-soft-strong: rgba(148, 163, 184, 0.18);
    --color-slot-10-text-inverse: #08111f;

    color-scheme: dark;
}


/* =========================================================
   4) MODE: AUTO
   يعتمد على prefers-color-scheme
   ملاحظة:
   في النسخة الحالية auto يبدّل بين default/light و default/dark
   ويمكن لاحقًا توسيعه ليتوافق مع presets أخرى
========================================================= */

@media (prefers-color-scheme: dark) {
    html[data-theme-preset="default"][data-theme-mode="auto"],
    :root[data-theme-preset="default"][data-theme-mode="auto"] {
        --color-brand: #60a5fa;
        --color-brand-hover: #93c5fd;
        --color-brand-active: #bfdbfe;
        --color-brand-soft: rgba(96, 165, 250, 0.14);
        --color-brand-soft-strong: rgba(96, 165, 250, 0.22);

        --color-primary: #60a5fa;
        --color-primary-hover: #93c5fd;
        --color-primary-active: #bfdbfe;
        --color-primary-soft: rgba(96, 165, 250, 0.14);
        --color-primary-soft-strong: rgba(96, 165, 250, 0.22);
        --color-primary-text-inverse: #08111f;

        --color-secondary: #c084fc;
        --color-secondary-hover: #d8b4fe;
        --color-secondary-active: #e9d5ff;
        --color-secondary-soft: rgba(192, 132, 252, 0.14);
        --color-secondary-soft-strong: rgba(192, 132, 252, 0.22);
        --color-secondary-text-inverse: #19052e;

        --color-success: #4ade80;
        --color-success-hover: #86efac;
        --color-success-strong: #86efac;
        --color-success-soft: rgba(74, 222, 128, 0.14);
        --color-success-soft-strong: rgba(74, 222, 128, 0.22);
        --color-success-text-inverse: #05210f;

        --color-danger: #f87171;
        --color-danger-hover: #fca5a5;
        --color-danger-strong: #fca5a5;
        --color-danger-soft: rgba(248, 113, 113, 0.14);
        --color-danger-soft-strong: rgba(248, 113, 113, 0.22);
        --color-danger-text-inverse: #2b0808;

        --color-warning: #fbbf24;
        --color-warning-hover: #fcd34d;
        --color-warning-strong: #fde68a;
        --color-warning-soft: rgba(251, 191, 36, 0.14);
        --color-warning-soft-strong: rgba(251, 191, 36, 0.22);
        --color-warning-text-inverse: #2c1a00;

        --color-info: #22d3ee;
        --color-info-hover: #67e8f9;
        --color-info-strong: #a5f3fc;
        --color-info-soft: rgba(34, 211, 238, 0.14);
        --color-info-soft-strong: rgba(34, 211, 238, 0.22);
        --color-info-text-inverse: #04232a;

        --color-neutral: #cbd5e1;
        --color-neutral-hover: #e2e8f0;
        --color-neutral-active: #f8fafc;
        --color-neutral-soft: rgba(148, 163, 184, 0.10);
        --color-neutral-soft-strong: rgba(148, 163, 184, 0.16);
        --color-neutral-text-inverse: #020617;

        --color-page: #0b1220;
        --color-page-soft: #111827;

        --color-surface: #111827;
        --color-surface-soft: #182132;
        --color-surface-muted: #1f2937;
        --color-surface-subtle: #162032;

        --color-surface-raised: #0f172a;
        --color-surface-elevated: #0f172a;
        --color-surface-inverse: #f8fafc;

        --color-surface-hover: #1b2637;
        --color-surface-active: rgba(96, 165, 250, 0.14);
        --color-surface-selected: rgba(96, 165, 250, 0.16);

        --color-border-subtle: rgba(148, 163, 184, 0.14);
        --color-border-soft: rgba(148, 163, 184, 0.14);
        --color-border: rgba(148, 163, 184, 0.18);
        --color-border-strong: rgba(148, 163, 184, 0.26);

        --color-text: #dbe4f0;
        --color-text-strong: #f8fafc;
        --color-text-soft: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-text-faint: #64748b;
        --color-text-inverse: #020617;

        --color-placeholder: #64748b;
        --color-disabled-bg: rgba(148, 163, 184, 0.10);
        --color-disabled-text: #64748b;
        --color-disabled-border: rgba(148, 163, 184, 0.16);

        --color-hover-neutral: rgba(148, 163, 184, 0.12);
        --color-hover-brand: rgba(96, 165, 250, 0.14);

        --color-overlay: rgba(2, 6, 23, 0.62);
        --color-backdrop-soft: rgba(148, 163, 184, 0.08);
        --color-backdrop-strong: rgba(148, 163, 184, 0.16);

        --color-focus-ring: rgba(96, 165, 250, 0.28);
        --color-focus-ring-strong: rgba(96, 165, 250, 0.40);

        --color-slot-1: var(--color-primary);
        --color-slot-1-hover: var(--color-primary-hover);
        --color-slot-1-soft: var(--color-primary-soft);
        --color-slot-1-active: var(--color-primary-active);
        --color-slot-1-soft-strong: var(--color-primary-soft-strong);
        --color-slot-1-text-inverse: var(--color-primary-text-inverse);

        --color-slot-2: var(--color-success);
        --color-slot-2-hover: var(--color-success-hover);
        --color-slot-2-soft: var(--color-success-soft);
        --color-slot-2-active: var(--color-success-strong);
        --color-slot-2-soft-strong: var(--color-success-soft-strong);
        --color-slot-2-text-inverse: var(--color-success-text-inverse);

        --color-slot-3: var(--color-danger);
        --color-slot-3-hover: var(--color-danger-hover);
        --color-slot-3-soft: var(--color-danger-soft);
        --color-slot-3-active: var(--color-danger-strong);
        --color-slot-3-soft-strong: var(--color-danger-soft-strong);
        --color-slot-3-text-inverse: var(--color-danger-text-inverse);

        --color-slot-4: var(--color-warning);
        --color-slot-4-hover: var(--color-warning-hover);
        --color-slot-4-soft: var(--color-warning-soft);
        --color-slot-4-active: var(--color-warning-strong);
        --color-slot-4-soft-strong: var(--color-warning-soft-strong);
        --color-slot-4-text-inverse: var(--color-warning-text-inverse);

        --color-slot-5: var(--color-info);
        --color-slot-5-hover: var(--color-info-hover);
        --color-slot-5-soft: var(--color-info-soft);
        --color-slot-5-active: var(--color-info-strong);
        --color-slot-5-soft-strong: var(--color-info-soft-strong);
        --color-slot-5-text-inverse: var(--color-info-text-inverse);

        --color-slot-6: var(--color-secondary);
        --color-slot-6-hover: var(--color-secondary-hover);
        --color-slot-6-soft: var(--color-secondary-soft);
        --color-slot-6-active: var(--color-secondary-active);
        --color-slot-6-soft-strong: var(--color-secondary-soft-strong);
        --color-slot-6-text-inverse: var(--color-secondary-text-inverse);

        --color-slot-7: #fb923c;
        --color-slot-7-hover: #fdba74;
        --color-slot-7-soft: rgba(251, 146, 60, 0.14);
        --color-slot-7-active: #fdba74;
        --color-slot-7-soft-strong: rgba(251, 146, 60, 0.22);
        --color-slot-7-text-inverse: #2a1203;

        --color-slot-8: #2dd4bf;
        --color-slot-8-hover: #5eead4;
        --color-slot-8-soft: rgba(45, 212, 191, 0.14);
        --color-slot-8-active: #5eead4;
        --color-slot-8-soft-strong: rgba(45, 212, 191, 0.22);
        --color-slot-8-text-inverse: #062420;

        --color-slot-9: #f472b6;
        --color-slot-9-hover: #f9a8d4;
        --color-slot-9-soft: rgba(244, 114, 182, 0.14);
        --color-slot-9-active: #f9a8d4;
        --color-slot-9-soft-strong: rgba(244, 114, 182, 0.22);
        --color-slot-9-text-inverse: #2c0818;

        --color-slot-10: #cbd5e1;
        --color-slot-10-hover: #e2e8f0;
        --color-slot-10-soft: rgba(148, 163, 184, 0.12);
        --color-slot-10-active: #f8fafc;
        --color-slot-10-soft-strong: rgba(148, 163, 184, 0.18);
        --color-slot-10-text-inverse: #08111f;

        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme-preset="default"][data-theme-mode="auto"],
    :root[data-theme-preset="default"][data-theme-mode="auto"] {
        color-scheme: light;
    }
}