/* ==========================================================================
   دار عمار بن ياسر - ملف الأنماط العام المشترك
   يحتوي على: متغيرات التصميم (Design Tokens)، إعادة التهيئة، الوضع الليلي
   ========================================================================== */

/* -------------------- الخطوط -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Tajawal:wght@300;400;500;700;900&display=swap');

/* -------------------- متغيرات التصميم (الوضع النهاري) -------------------- */
:root {
    /* الألوان الأساسية - الطابع الإسلامي الهادئ */
    --color-green-deep: #0F3D2E;      /* أخضر عميق - العنوان الرئيسي والهوية */
    --color-green-primary: #146C43;   /* أخضر أساسي - الأزرار والروابط */
    --color-green-light: #E4EFE8;     /* أخضر فاتح جدًا - خلفيات ثانوية */
    --color-gold: #C9A227;            /* ذهبي - لمسات التميز والحدود */
    --color-gold-soft: #E8D9A0;       /* ذهبي فاتح - تدرجات وظلال */
    --color-cream: #FBF8F1;           /* الخلفية الأساسية */
    --color-sand: #F1EBDA;            /* خلفية البطاقات */
    --color-ink: #1E2A24;             /* لون النص الأساسي */
    --color-ink-soft: #5C6B62;        /* لون النص الثانوي */
    --color-border: #DED2AE;          /* لون الحدود الهادئة */
    --color-error: #B23A2F;
    --color-success: #146C43;
    --color-warning: #A87C1E;

    /* الظلال */
    --shadow-soft: 0 10px 30px rgba(15, 61, 46, 0.10);
    --shadow-card: 0 18px 45px rgba(15, 61, 46, 0.16);
    --shadow-gold-glow: 0 0 0 1px rgba(201, 162, 39, 0.35);

    /* الخطوط */
    --font-display: 'Aref Ruqaa', serif;
    --font-body: 'Tajawal', sans-serif;

    /* الانتقالات */
    --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* الاستدارة */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    color-scheme: light;
}

/* -------------------- الوضع الليلي (Dark Mode) -------------------- */
[data-theme="dark"] {
    --color-green-deep: #0B241C;
    --color-green-primary: #2E9E6C;
    --color-green-light: #14312A;
    --color-gold: #D8B84A;
    --color-gold-soft: #7A6427;
    --color-cream: #0A1912;
    --color-sand: #10241C;
    --color-ink: #EAE6D9;
    --color-ink-soft: #A9B8AF;
    --color-border: #23392F;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.55);
    --shadow-gold-glow: 0 0 0 1px rgba(216, 184, 74, 0.25);

    color-scheme: dark;
}

/* -------------------- إعادة التهيئة (Reset) -------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-cream);
    color: var(--color-ink);
    transition: background-color var(--transition-base), color var(--transition-base);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
}

/* إتاحة تركيز واضح للوحة المفاتيح (Accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------- عناصر مشتركة -------------------- */
.brand-title {
    font-family: var(--font-display);
}

/* -------------------- الأزرار المشتركة (Primary / Secondary) -------------------- */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-green-primary), var(--color-green-deep));
    color: #FBF8F1;
    box-shadow: 0 12px 26px rgba(20, 108, 67, 0.30);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(20, 108, 67, 0.38);
}

.btn-secondary {
    background: transparent;
    color: var(--color-green-deep);
    border: 1.5px solid var(--color-gold);
}

.btn-secondary:hover {
    background: var(--color-gold);
    color: #2A2410;
    transform: translateY(-3px);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* أنيميشن ظهور تدريجي للبطاقات (مستخدم في صفحة الدخول، صفحة الشكر، وغيرها) */
@keyframes card-rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

/* زر تبديل الوضع الليلي - عنصر مشترك في كل الصفحات */
.theme-toggle {
    position: static;
    top: 20px;
    left: 20px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-sand);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base), background var(--transition-base);
}

.theme-toggle:hover {
    transform: scale(1.08) rotate(-8deg);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-green-primary);
    transition: stroke var(--transition-base);
}

[data-theme="dark"] .theme-toggle svg {
    stroke: var(--color-gold);
}

/* رسائل التنبيه (Flash Messages) */
.flash-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
}

.flash-message {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: var(--shadow-card);
    animation: flash-in 0.4s ease forwards, flash-out 0.4s ease forwards 4.2s;
    border-inline-start: 4px solid transparent;
    background: var(--color-sand);
    color: var(--color-ink);
}

.flash-message.success { border-inline-start-color: var(--color-success); }
.flash-message.error { border-inline-start-color: var(--color-error); }
.flash-message.warning { border-inline-start-color: var(--color-warning); }

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes flash-out {
    to { opacity: 0; transform: translateY(-12px); }
}