/* ═══════════════════════════════════════════════════════════════
   منصة الوليد — توكنز موحّدة (مصدر حقيقة واحد لكل متغيرات التصميم)
   ───────────────────────────────────────────────────────────────
   كل قيم الألوان/الزوايا/الظلال اللي كانت متفرّقة بين 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, 0.86);
    --vision-surface-strong: rgba(255, 255, 255, 0.96);
    --vision-ink: #153933;
    --vision-muted: #60776f;
    --vision-line: rgba(136, 164, 154, 0.26);
    --vision-line-strong: rgba(11, 107, 99, 0.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, 0.96), rgba(238, 248, 244, 0.84));
    --neb-icon-border: rgba(8, 118, 107, 0.16);
    --neb-icon-shadow:
      0 1px 0 rgba(255, 255, 255, 0.82) inset, 0 10px 22px -17px rgba(8, 63, 58, 0.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, 0.08);
    --shadow-md: 0 22px 65px rgba(23, 59, 53, 0.14);
    --shadow-lg: 0 30px 90px rgba(8, 79, 73, 0.2);

    /* ── إعادة ربط توكنز 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;
    }
  }
}