/* ============================================================================
   Anima Studio Pro — UNIFIED DARK THEME (Override Layer)
   ----------------------------------------------------------------------------
   هذا الملف هو "مركز التحكم باللون" الوحيد للموقع بالكامل.
   - كل الألوان موحّدة من لون أساسي واحد (accent) + لون نص واحد (text).
   - لتغيير لون كل الأزرار:  بدّل قيمة  --ui-accent  أدناه فقط.
   - لتغيير لون كل النصوص:  بدّل قيمة  --ui-text  أدناه فقط.
   - لتغيير خلفية الموقع بالكامل: بدّل  --ui-bg  /  --ui-panel.
   تم تحميل هذا الملف أخيرًا لذلك تتغلب قيمه على بقية ملفات CSS.
   ============================================================================ */

:root {
    /* ───────── مركز التحكم: غيّر هذه القيم فقط ───────── */
    --ui-accent:        #7d95b8;
    --ui-accent-hover:  #91a9cc;
    --ui-accent-soft:   rgba(125, 149, 184, 0.10);
    --ui-accent-border: rgba(125, 149, 184, 0.22);
    --ui-text:          #d4dae6;
    --ui-text-dim:      rgba(212, 218, 230, 0.40);

    --ui-bg:            #18181c;
    --ui-panel:         #1d1f24;
    --ui-surface:       #26282e;
    --ui-surface-hover: #303238;
    --ui-border:        rgba(212, 218, 230, 0.08);
    --ui-border-active: rgba(212, 218, 230, 0.14);

    --bg-input:         #101115;

--ui-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.24);
    --ui-shadow-edge:   0 1px 0 rgba(0, 0, 0, 0.60);

    /* ───────── ربط متغيّرات الموقع الأصلية ───────── */
    --bg-dark:      var(--ui-bg)      !important;
    --bg-panel:     var(--ui-panel)   !important;
    --bg-panel-alt: var(--ui-panel)   !important;
    --bg-hover:     var(--ui-surface-hover) !important;
    --bg-active:    var(--ui-surface-hover) !important;

    --accent:       var(--ui-accent)       !important;
    --accent-hover: var(--ui-accent-hover) !important;
    --accent-dim:   var(--ui-accent-soft)  !important;
    --selected:     var(--ui-accent-soft)  !important;

    --text-main:    var(--ui-text)     !important;
    --text-dim:     var(--ui-text-dim) !important;
    --text-bright:  var(--ui-text)     !important;

    --border:       var(--ui-border)        !important;
    --border-light: var(--ui-border-active) !important;

    --danger:       var(--ui-accent) !important;
    --success:      var(--ui-accent) !important;
    --audio-bg:     var(--ui-accent) !important;
    --media-bg:     var(--ui-accent) !important;
    --folder-bg:    var(--ui-accent) !important;
    --tween-color:  var(--ui-accent) !important;
    --mask-color:   var(--ui-accent) !important;
    --range-color:  rgba(59,130,246,0.5) !important;
}

html, body {
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
}

body, body *:not(svg):not(path):not(i),
.logo, label, h1, h2, h3, h4, h5, h6,
span, p, a, button, div, td, th, li, small, strong, b {
    color: var(--ui-text) !important;
}

input, select, textarea {
    color: var(--ui-text) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--ui-text-dim) !important;
}

.logo { color: var(--ui-text) !important; }

/* ============================================================
   FOCUS RINGS (blue accent instead of browser white default)
   الحقول والعناصر التفاعلية كانت تظهر حولها حلقة تركيز بيضاء
   افتراضية من المتصفح بعد إعادة هيكلة CSS، واللون المعتاد سابقاً
   أزرق. نعيد تلوين أي حلقة ظاهرة بلون --ui-accent، ونعطي حقول
   الإدخال حلقة زرقاء صريحة. (لا نلمس أزرار شريط الأدوات التي
   تُزيلها custom-tools.css عمداً.) */
*:focus,
*:focus-visible {
    outline-color: var(--ui-accent) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
    outline: 1px solid var(--ui-accent) !important;
    outline-offset: -1px;
    border-color: var(--ui-accent) !important;
}

/* [v4.8.101] منع حلقة التركيز حول كنفاس الرسم: الكنفاس يحمل tabindex
   ويستقبل focus() عند أي نقرة، وكان إطار المتصفح يظهر كخطين مزعجين
   أسفل شريط المشاهد (يبدوان كإطار تحديد عالق). */
#canvas:focus,
#canvas:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}