/* ==========================================================================
   Fariq Al Nasr - Court Booking System
   Design tokens. Mirrors design.md section 2 exactly.
   Values are taken from the Figma variable set "Fariq Al Nasr".
   ========================================================================== */

:root {
  /* --- 2.1 Colour ------------------------------------------------------- */
  --green-600: #0a7a3f;   /* prices, hover on primary, emphasis text        */
  --green-500: #0d8a48;   /* primary buttons, free slots, active nav        */
  --green-100: #cde9d9;   /* reserved, light accents                        */
  --green-50:  #edf7f1;   /* positive chip bg, step badge bg                */

  --blue-700:  #0c4682;   /* wordmark, headers on dark, selected slot fill  */
  --blue-600:  #1057a1;   /* brand, avatar fill                             */
  --blue-100:  #cbddee;   /* image placeholder fill                         */
  --blue-50:   #edf3f9;   /* informational note bg, secondary tag bg        */

  --ink-900:   #0e1b2a;   /* body headings, footer bg, admin sidebar        */
  --ink-700:   #33475c;   /* nav links, secondary buttons, table times      */
  --ink-500:   #6b7c8d;   /* body copy, descriptions                        */
  --ink-300:   #9fadba;   /* labels, meta text, muted status                */

  --border:    #e2e8ee;   /* card strokes, dividers                         */
  --surface:   #ffffff;   /* cards, nav                                     */
  --muted:     #f5f8fa;   /* page bg, disabled slots, alternating sections  */
  --amber-500: #c77700;   /* unpaid bookings, low availability warning      */

  /* Supporting values named in 2.1 */
  --slot-free-border:  #bfe0cc;
  --row-divider:       #eff3f6;
  --chip-unpaid-bg:    #fdf3e3;
  --field-fill:        #f7f9fb;
  --footer-divider:    #25384b;
  --admin-user-fill:   #182a3c;

  /* Additional values read out of the .fig, kept named rather than inline */
  --day-selected-label: #bfe6cf;  /* weekday + "Today" on a selected day    */
  --slot-selected-sub:  #bbd4ea;  /* "Selected" line on a chosen slot       */
  --sched-free-fill:    #f7fbf8;  /* admin schedule, free cell              */
  --sched-free-border:  #dcefe4;
  /* The .fig fills the sidebar logo slot with #1b2c3e, but that frame was
     still empty (open item 2). The crest is navy and black, so on a dark
     fill it disappears; the slot is kept light so the mark actually reads. */
  --admin-logo-fill:    #edf3f9;  /* logo slot inside the dark sidebar      */
  --admin-menu-idle:    #93a5b6;  /* inactive sidebar menu label            */
  --admin-meta:         #7c8fa1;  /* "Admin", "Club administration"         */
  --on-dark-body:       #c9d6e1;  /* body copy over a photo overlay         */

  /* --- 2.3 Spacing, 4px base -------------------------------------------- */
  --gutter-desktop: 64px;
  --gutter-mobile:  20px;
  --section-pad:    88px;
  --card-pad:       26px;
  --card-pad-sm:    22px;
  --card-pad-mobile:16px;
  --grid-gap:       20px;
  --slot-gap:       12px;
  --slot-gap-mobile:10px;

  /* --- 2.4 Radius ------------------------------------------------------- */
  --radius-sm:   8px;    /* tags, chips, table cells, step badges           */
  --radius-md:   12px;   /* day cells, slot buttons, notes                  */
  --radius-lg:   16px;   /* large image blocks                              */
  --radius-pill: 999px;  /* eyebrow pill                                    */
  --radius-btn:  10px;   /* every button, every size                        */
  --radius-card: 14px;   /* cards                                           */

  /* --- 2.5 Strokes ------------------------------------------------------ */
  --stroke: 1px;
  /* No drop shadows anywhere. Separation is border + background contrast.  */

  /* --- 7. Motion -------------------------------------------------------- */
  --t: 150ms;

  /* --- 2.2 Typography --------------------------------------------------- */
  --font-latin:  'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'Almarai', 'Cairo', 'Segoe UI', sans-serif;
  --font: var(--font-latin);
}

/* Arabic build. Section 6: Rubik carries no Arabic glyphs, so the Arabic
   face leads and Rubik is kept behind it for Western numerals and Latin. */
:root[lang='ar'] {
  --font: var(--font-arabic), var(--font-latin);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
}