/* =================================================================
   دار الإتقان لتعليم القرآن - ملف الألوان
   -----------------------------------------------------------------
   THE COLOR FILE. Every colour in the whole app is defined here and
   nowhere else. Change a value below and the entire site follows.
   The three brand colours are sampled from the logo.
   ================================================================= */

:root {
  /* ---- ألوان الهوية / the three brand colours ------------------- */
  --green:        #14663A;   /* أخضر الشعار    */
  --green-dark:   #0C4526;   /* الترويسة والتمرير */
  --green-light:  #E3F0E7;   /* خلفية خضراء فاتحة */

  --yellow:       #E8B923;   /* ذهبي الشعار    */
  --yellow-dark:  #C3961A;   /* عند المرور     */
  --yellow-light: #FCF2D4;   /* خلفية ذهبية فاتحة */

  --brown:        #7A4B33;   /* بني الشعار     */
  --brown-dark:   #4E2F1E;   /* العناوين       */
  --brown-light:  #F0E4DA;   /* خلفية بنية فاتحة */

  /* ---- الأسطح / page surfaces ----------------------------------- */
  --bg:            #FAF7F1;  /* خلفية الصفحة   */
  --bg-tint:       #F2EDE3;  /* تدرّج الخلفية  */
  --surface:       #FFFFFF;  /* البطاقات       */
  --surface-alt:   #F7F2E9;  /* صفوف ملوّنة    */

  /* ---- النصوص / text -------------------------------------------- */
  --text:          #2E2419;
  --text-soft:     #7C6B5B;
  --text-invert:   #FFFFFF;

  /* ---- الحدود والظلال / lines & shadows -------------------------- */
  --border:        #E7DACA;
  --border-strong: #CDB99F;
  --shadow:        0 1px 2px rgba(78, 47, 30, .05),
                   0 8px 20px rgba(78, 47, 30, .06);
  --shadow-lift:   0 6px 14px rgba(78, 47, 30, .10),
                   0 18px 40px rgba(78, 47, 30, .14);
  --shadow-header: 0 6px 24px rgba(12, 69, 38, .25);

  /* ---- تدرّجات / gradients ---------------------------------------- */
  --grad-header: linear-gradient(135deg, #0C4526 0%, #14663A 55%, #1A7A45 100%);
  --grad-hero:   linear-gradient(160deg, var(--surface) 0%, var(--surface-alt) 100%);
  --grad-gold:   linear-gradient(135deg, var(--yellow) 0%, var(--yellow-dark) 100%);

  /* ---- الحالات / status colours ---------------------------------- */
  --st-todo:            var(--brown);
  --st-todo-bg:         var(--brown-light);
  --st-in_progress:     var(--yellow-dark);
  --st-in_progress-bg:  var(--yellow-light);
  --st-review:          #8A6D1F;
  --st-review-bg:       #F5E9C6;
  --st-done:            var(--green);
  --st-done-bg:         var(--green-light);

  /* ---- الأولوية / priority ---------------------------------------- */
  --pri-high:      #A4432B;
  --pri-high-bg:   #F8E3DC;
  --pri-normal:    var(--brown);
  --pri-normal-bg: var(--surface-alt);
  --pri-low:       var(--text-soft);
  --pri-low-bg:    var(--surface-alt);

  /* ---- الرسائل / feedback ------------------------------------------ */
  --ok:        var(--green);
  --ok-bg:     var(--green-light);
  --warn:      var(--yellow-dark);
  --warn-bg:   var(--yellow-light);
  --danger:    #9C3B24;
  --danger-bg: #F8E3DC;

  /* ---- تفاصيل / details -------------------------------------------- */
  --nav-hover:   rgba(255, 255, 255, .14);
  --nav-border:  rgba(255, 255, 255, .25);
  --shadow-logo: 0 4px 14px rgba(0, 0, 0, .18);
  --overlay:     rgba(46, 36, 25, .55);
  --focus:       var(--yellow);

  /* ---- الشكل والخط / shape & type ----------------------------------- */
  --radius:      16px;
  --radius-sm:   10px;
  --radius-pill: 999px;
  /* الخط الرسمي - ملفاته في assets/font ويُعرَّف في app.css */
  --font: "Asal", "Segoe UI", "Noto Naskh Arabic",
          "Traditional Arabic", Tahoma, system-ui, sans-serif;
}