/* ═══════════════════════════════════════════════════════════════
   نِبراس — توكنز موحّدة (مصدر حقيقة واحد لكل متغيرات التصميم)
   ───────────────────────────────────────────────────────────────
   كل قيم الألوان/الزوايا/الظلال اللي كانت متفرّقة بين app.css و
   ui-vision.css و luxe.css صارت هنا بمكان واحد — بنفس القيم بالضبط
   (نقل، مو تغيير). الهدف «توحيد المصدر» لا «تغيير المظهر».

   القسم الأول (بلا @media) يبقى بلا شرط لأن بعض توكناته (--ink-2
   تحديداً) تعتمد عليها ملفات طباعة A4 مباشرة (print-themes.css) —
   لازم تبقى متاحة دائماً. القسم الثاني (داخل @media screen) خاص
   بواجهة الشاشة فقط، تماماً متل ما كان بملفاته الأصلية.
   ═══════════════════════════════════════════════════════════════ */

/* ── هوية البرنامج الأساسية (كانت في app.css) — بلا شرط، تطبع أيضاً ── */
:root {
  --cream:        #f7f3ea;
  --cream-2:      #efe6d8;
  --paper:        #fffdf8;
  --ink:          #1e3531;
  --ink-2:        #667b76;
  --ink-3:        #93a29e;
  --line:         #ded4c3;
  --line-2:       #d2c4ae;

  --l1:           #d97559;
  --l1-deep:      #b84a32;
  --l1-soft:      #f6c8ba;
  --l1-tint:      #fce4dc;

  --l2:           #18a093;
  --l2-deep:      #08766b;
  --l2-soft:      #a9ded7;
  --l2-tint:      #ddf3ef;

  --l3:           #264f66;
  --l3-deep:      #173647;
  --l3-soft:      #bccad6;
  --l3-tint:      #e4ebf0;

  --brand:        #08766b;
  --brand-2:      #5aa299;
  --brand-3:      #c79a45;
  --accent:       #08766b;

  --gold:         #c79a45;

  --sh-sm:   0 2px 8px rgba(8,118,107,0.08);
  --sh-md:   0 8px 24px rgba(8,118,107,0.12);
  --sh-lg:   0 18px 50px -12px rgba(8,79,73,0.24);
  --sh-glow: 0 10px 40px rgba(90,162,153,0.22);

  --radius: 18px;
}

@media screen {
  :root {
    /* ── من ui-vision.css (طبقة السطح المرئي) ── */
    --vision-bg: #f3f6f2;
    --vision-surface: rgba(255, 255, 255, .86);
    --vision-surface-strong: rgba(255, 255, 255, .96);
    --vision-ink: #153933;
    --vision-muted: #60776f;
    --vision-line: rgba(136, 164, 154, .26);
    --vision-line-strong: rgba(11, 107, 99, .24);
    --vision-brand: #08766b;
    --vision-brand-2: #18a093;
    --vision-navy: #264f66;
    --vision-gold: #c79a45;
    --vision-coral: #d97559;

    /* ── من luxe.css (نظام الأيقونات) ── */
    --neb-icon-size: 30px;
    --neb-icon-radius: 12px;
    --neb-icon-bg: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,248,244,.84));
    --neb-icon-border: rgba(8,118,107,.16);
    --neb-icon-shadow: 0 1px 0 rgba(255,255,255,.82) inset, 0 10px 22px -17px rgba(8,63,58,.45);

    /* ── مقياس زوايا موحّد (مطابق لقيم ui-vision الحالية) ── */
    --rad-sm:   12px;   /* حقول، أزرار صغيرة، شِبس */
    --rad-md:   16px;   /* البطاقات القياسية (= vision-radius-sm الحالي) */
    --rad-lg:   24px;   /* الحاويات الكبيرة والمودالات (= vision-radius الحالي) */
    --rad-xl:   28px;   /* الأسطح البطولية */
    --rad-pill: 999px;

    /* ── مقياس ظل موحّد (مطابق لظلال ui-vision الحالية بالضبط) ── */
    --shadow-sm: 0 10px 30px rgba(23, 59, 53, .08);
    --shadow-md: 0 22px 65px rgba(23, 59, 53, .14);
    --shadow-lg: 0 30px 90px rgba(8, 79, 73, .20);

    /* ── إعادة ربط توكنز ui-vision (الطبقة الحاكمة للسطح المرئي) ──
       هذا ما يوحّد شكل البطاقات/الحقول/المودالات/الأزرار دفعة واحدة. */
    --vision-radius:    var(--rad-lg);
    --vision-radius-sm: var(--rad-md);
    --vision-shadow-sm: var(--shadow-sm);
    --vision-shadow-md: var(--shadow-md);
    --vision-shadow-lg: var(--shadow-lg);

    /* ── إعادة ربط الزوايا الصغيرة في app.css (قيمة مطابقة → بلا تغيير) ── */
    --radius-sm: var(--rad-sm);

    /* ملاحظة مقصودة (ثبات المظهر أولوية):
       • --radius (18px أعلاه) لم يُربَط بـ--rad-lg لأن .progress-widget
         يستهلكه مباشرة وليس محكوماً بـvision → ربطه كان سيغيّر شكلها بصرياً.
       • ظلال --sh-* وظلال luxe.css البطولية تُركت كما هي لأنها بمقياس
         بصري مختلف (ضيّق/متعدّد الطبقات)؛ ربطها كان سيحرّك الشكل. */
  }

  @media (max-width: 640px) {
    :root { --neb-icon-size: 26px; --neb-icon-radius: 10px; }
  }
}