/* ═══════════════════════════════════════════════════════════════
   منصة الوليد — توكنز موحّدة (مصدر حقيقة واحد لكل متغيرات التصميم)
   ───────────────────────────────────────────────────────────────
   كل قيم الألوان/الزوايا/الظلال اللي كانت متفرّقة بين 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;

  /* The thin spectrum line is the fixed school signature across every page. */
  --aw-identity-spectrum: linear-gradient(90deg,#08766b,#61b7aa,#c79a45,#d97559);

  /* Alwaleed identity sequence: one shared palette for every screen module. */
  --seq-1:        #08766b;
  --seq-1-deep:   #084f49;
  --seq-1-soft:   #dcefe8;
  --seq-1-tint:   #f3faf7;
  --seq-1-rgb:    8, 118, 107;

  --seq-2:        #b65f3a;
  --seq-2-deep:   #884225;
  --seq-2-soft:   #f4dfd4;
  --seq-2-tint:   #fff7f2;
  --seq-2-rgb:    182, 95, 58;

  --seq-3:        #4555a3;
  --seq-3-deep:   #303a78;
  --seq-3-soft:   #dfe4ff;
  --seq-3-tint:   #f5f7ff;
  --seq-3-rgb:    69, 85, 163;

  --seq-4:        #1f8a5b;
  --seq-4-deep:   #14613f;
  --seq-4-soft:   #d7efe2;
  --seq-4-tint:   #f1faf5;
  --seq-4-rgb:    31, 138, 91;

  --seq-5:        #1f8fb0;
  --seq-5-deep:   #155f76;
  --seq-5-soft:   #d6ecf3;
  --seq-5-tint:   #f0f9fc;
  --seq-5-rgb:    31, 143, 176;

  --seq-6:        #6d5bb5;
  --seq-6-deep:   #473982;
  --seq-6-soft:   #e7e1ff;
  --seq-6-tint:   #f8f6ff;
  --seq-6-rgb:    109, 91, 181;

  --seq-7:        #7b6a3a;
  --seq-7-deep:   #5a4b26;
  --seq-7-soft:   #eee7d2;
  --seq-7-tint:   #fbf8ef;
  --seq-7-rgb:    123, 106, 58;

  --seq-8:        #8f5f62;
  --seq-8-deep:   #6d4648;
  --seq-8-soft:   #f3dedc;
  --seq-8-tint:   #fff7f6;
  --seq-8-rgb:    143, 95, 98;

  --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; }
  }
}