@charset "UTF-8";

/* =================================================
   Formula Color System (Standalone)
   بدون scope - مباشر على الفورميلا فقط
   ================================================= */

:root {
    /* Ink system */
    --link-ink: #3b3b34;
    --link-gray: #575b63;
    --link-muted: #888780;

    /* Active colors */

    --link-purple: #7c3aed !important; /* نستخدمه للخطوط النحيفة للملاحظات في التركيبات */
    --link-purple: #696cff !important; /* نستخدمه للروابط والعناوين */
    --link-pink: #cc4a4f !important;
    --link-teal: #1d9e75 !important; /* نستخدمه للخطوط النحيفة للملاحظات في التركيبات */
    --link-teal: #0d9488 !important; /* نستخدمه للروابط والعناوين */
    --link-blue: #2c5fc4;

    --bg-ink-soft: #f6f1e6;
    --bg-ink-soft: #f8f4ea;
    --bg-ink-soft: #f1e7d6;
}

/* =================================================
   Base Links (Formula)
   ================================================= */

a {
    color: var(--link-ink) !important;
    transition:
        color 0.18s ease,
        text-decoration-color 0.18s ease;
}

/* =================================================
   Shared
   ================================================= */

a[class^="link-"] {
    text-decoration: none !important;
}

a[class^="link-"]:hover,
a[class^="link-"]:focus {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* =================================================
   Solid Links
   ================================================= */

a.link-ink {
    color: var(--link-ink) !important;
}

a.link-gray {
    color: var(--link-gray) !important;
}

a.link-muted {
    color: var(--link-muted) !important;
}

a.link-ink:hover,
a.link-ink:focus {
    color: var(--link-ink) !important;
}

a.link-gray:hover,
a.link-gray:focus {
    color: var(--link-gray) !important;
}

a.link-muted:hover,
a.link-muted:focus {
    color: var(--link-muted) !important;
}

/* =================================================
   Ink → Accent
   ================================================= */

a.link-ink-purple {
    color: var(--link-ink) !important;
}

a.link-ink-purple:hover,
a.link-ink-purple:focus {
    color: var(--link-purple) !important;
}

a.link-ink-pink {
    color: var(--link-ink) !important;
}

a.link-ink-pink:hover,
a.link-ink-pink:focus {
    color: var(--link-pink) !important;
}

a.link-ink-teal {
    color: var(--link-ink) !important;
}

a.link-ink-teal:hover,
a.link-ink-teal:focus {
    color: var(--link-teal) !important;
}

a.link-ink-blue {
    color: var(--link-ink) !important;
}

a.link-ink-blue:hover,
a.link-ink-blue:focus {
    color: var(--link-blue) !important;
}

a.link-ink-green {
    color: var(--link-ink) !important;
}

a.link-ink-green:hover,
a.link-ink-green:focus {
    color: var(--link-green) !important;
}

a.link-ink-orange {
    color: var(--link-ink) !important;
}

a.link-ink-orange:hover,
a.link-ink-orange:focus {
    color: var(--link-orange) !important;
}

a.link-ink-red {
    color: var(--link-ink) !important;
}

a.link-ink-red:hover,
a.link-ink-red:focus {
    color: var(--link-red) !important;
}

/* =================================================
   Gray → Accent
   ================================================= */

a.link-gray-purple {
    color: var(--link-gray) !important;
}

a.link-gray-purple:hover,
a.link-gray-purple:focus {
    color: var(--link-purple) !important;
}

a.link-gray-pink {
    color: var(--link-gray) !important;
}

a.link-gray-pink:hover,
a.link-gray-pink:focus {
    color: var(--link-pink) !important;
}

a.link-gray-teal {
    color: var(--link-gray) !important;
}

a.link-gray-teal:hover,
a.link-gray-teal:focus {
    color: var(--link-teal) !important;
}

a.link-gray-blue {
    color: var(--link-gray) !important;
}

a.link-gray-blue:hover,
a.link-gray-blue:focus {
    color: var(--link-blue) !important;
}

a.link-gray-green {
    color: var(--link-gray) !important;
}

a.link-gray-green:hover,
a.link-gray-green:focus {
    color: var(--link-green) !important;
}

a.link-gray-orange {
    color: var(--link-gray) !important;
}

a.link-gray-orange:hover,
a.link-gray-orange:focus {
    color: var(--link-orange) !important;
}

a.link-gray-red {
    color: var(--link-gray) !important;
}

a.link-gray-red:hover,
a.link-gray-red:focus {
    color: var(--link-red) !important;
}

/* =================================================
   Muted → Accent
   ================================================= */

a.link-muted-purple {
    color: var(--link-muted) !important;
}

a.link-muted-purple:hover,
a.link-muted-purple:focus {
    color: var(--link-purple) !important;
}

a.link-muted-pink {
    color: var(--link-muted) !important;
}

a.link-muted-pink:hover,
a.link-muted-pink:focus {
    color: var(--link-pink) !important;
}

a.link-muted-teal {
    color: var(--link-muted) !important;
}

a.link-muted-teal:hover,
a.link-muted-teal:focus {
    color: var(--link-teal) !important;
}

a.link-muted-blue {
    color: var(--link-muted) !important;
}

a.link-muted-blue:hover,
a.link-muted-blue:focus {
    color: var(--link-blue) !important;
}

a.link-muted-green {
    color: var(--link-muted) !important;
}

a.link-muted-green:hover,
a.link-muted-green:focus {
    color: var(--link-green) !important;
}

a.link-muted-orange {
    color: var(--link-muted) !important;
}

a.link-muted-orange:hover,
a.link-muted-orange:focus {
    color: var(--link-orange) !important;
}

a.link-muted-red {
    color: var(--link-muted) !important;
}

a.link-muted-red:hover,
a.link-muted-red:focus {
    color: var(--link-red) !important;
}

/* =================================================
   Disabled
   ================================================= */

a.disabled {
    color: #d1d5db !important;
    pointer-events: none;
    text-decoration: none !important;
}

/* =========================================================
   Badge System (Ink) - FINAL VERSION
   ========================================================= */

/* =========================
   Base Reset (IMPORTANT)
   يمنع Bootstrap / link styles من التدخل
   ========================= */
a.badge-ink,
.badge-ink,
[class^="badge-ink-"] {
    all: unset;

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;

    padding: 0.12rem 0.55rem;
    border-radius: 6px;

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25rem;

    flex-shrink: 0;

    text-decoration: none;
    cursor: pointer;

    transition: all 0.15s ease;
}

/* =========================
   Default Badge (Neutral)
   ========================= */
.badge-ink {
    background: #f5f5f3;
    color: #3a3a36;
    border: 1px solid #d9d7d0;
}

/* =========================
   Active Badge (Selected)
   ========================= */
.badge-ink-active {
    background: #2c2c2a;
    color: #f6f1e6;
    border: 1px solid #1a1a18;
}

/* =========================
   Hover (Default)
   ========================= */
.badge-ink:hover {
    background: #efe8da;
    border-color: #cfcac0;
    transform: translateY(-1px);
}

/* =========================
   Hover (Active)
   ========================= */
.badge-ink-active:hover {
    background: #232320;
    color: #f6f1e6;
    border: 1px solid #141412;
}

/* =========================
   Focus (Accessibility)
   ========================= */
.badge-ink:focus {
    outline: 2px solid #b7b1a3;
    outline-offset: 2px;
}

/* =========================
   Soft Badge
   ========================= */
.badge-ink-soft {
    background: #f6f1e6;
    color: #3b3b34;
    border: 1px solid #d9d7d0;
}

/* =========================
   Muted Badge
   ========================= */
.badge-ink-muted {
    background: #f7f6f2;
    color: #7a7973;
    border: 1px solid #e6e3dc;
}

/* =========================
   Strong Badge (Emphasis)
   ========================= */
.badge-ink-strong {
    background: #1c1c1a;
    color: #ffffff;
    border: 1px solid #0f0f0e;
}

/* =========================
   Disabled State
   ========================= */
.badge-ink-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* =================================================
   Future Improvement

   يمكن لاحقًا تقليل التكرار باستخدام CSS Custom Properties.

   الفكرة:
   - كلاس عام يقرأ:
       --link-base
       --link-hover

   ثم كل كلاس يحدد المتغيرين فقط، مثل:

       .link-gray-purple {
           --link-base: var(--link-gray);
           --link-hover: var(--link-purple);
       }

       .link-muted-blue {
           --link-base: var(--link-muted);
           --link-hover: var(--link-blue);
       }

   الميزة:
   - تقليل حجم الملف بشكل كبير.
   - إضافة ألوان جديدة تتم بسطرين فقط.
   - الإبقاء على نفس أسماء الكلاسات الحالية (link-gray-purple وغيرها).

   حالياً تم الإبقاء على الأسلوب الحالي لأنه أوضح وأسهل للقراءة والصيانة.
   ================================================= */