/* ──────────────────────────────────────────────────────────────────────────────
   المواسم لعبتنا — Mawasem brand layer
   Loaded after every other stylesheet. Uses `html:root` (higher specificity
   than `:root`) so it wins over the per-page :root blocks inside pages/*.php.

   Identity (from the logo — a watermelon):
   · Fresh Green is the primary colour, Watermelon Red the accent.
   · White text is allowed on both Green and Red.
   · Almarai for Arabic text, Nunito for Latin.
   ────────────────────────────────────────────────────────────────────────────── */

html:root {
    /* Brand palette (sampled from the logo) */
    --mw-green:        #2F9E45;   /* primary — fresh green */
    --mw-green-deep:   #237A36;   /* darker green for gradients / hover */
    --mw-green-tint:   #E9F6EC;   /* light green surface */
    --mw-red:          #E0393F;   /* accent — watermelon red */
    --mw-red-deep:     #B72A30;   /* darker red */
    --mw-red-tint:     #FDECEC;   /* light red surface */
    --mw-graphite:     #1E2420;   /* near-black text */
    --mw-slate:        #5C6660;   /* muted text */
    --mw-line:         #E4E9E5;   /* borders */
    --mw-mist:         #F5F8F6;   /* page background */
    --mw-white:        #FFFFFF;
    --mw-success:      #1E7F48;
    --mw-warning:      #E59A2E;
    --mw-error:        #C22F3B;
    --mw-info:         #2C6CB0;

    /* Site variables mapped onto the brand (names kept stable for all pages) */
    --primary:          var(--mw-green);
    --primary-dark:     var(--mw-green-deep);
    --primary-light:    #43B85B;
    --primary-glow:     rgba(47, 158, 69, 0.15);
    --primary-gradient: linear-gradient(135deg, var(--mw-green) 0%, var(--mw-green-deep) 100%);
    --secondary:        var(--mw-graphite);
    --secondary-light:  #2A322C;
    --accent:           var(--mw-red);        /* white text allowed */
    --accent-light:     #F05A5F;
    --success:          var(--mw-success);
    --danger:           var(--mw-error);
    --warning:          var(--mw-warning);
    --info:             var(--mw-info);
    --dark:             var(--mw-graphite);
    --text-dark:        var(--mw-graphite);
    --text-muted:       var(--mw-slate);
    --text-gray:        var(--mw-slate);
    --gray:             var(--mw-slate);
    --light:            var(--mw-mist);
    --bg:               var(--mw-mist);
    --white:            var(--mw-white);
    --border:           var(--mw-line);
    --gradient:         linear-gradient(135deg, var(--mw-green) 0%, var(--mw-green-deep) 100%);
    --gradient-dark:    linear-gradient(135deg, var(--mw-graphite) 0%, #2A322C 100%);
    --gradient-accent:  linear-gradient(135deg, var(--mw-red) 0%, var(--mw-red-deep) 100%);
    --gradient-melon:   linear-gradient(120deg, var(--mw-green) 0%, var(--mw-green-deep) 55%, var(--mw-red) 140%);
    --shadow-sm:        0 2px 8px rgba(30, 36, 32, 0.06);
    --shadow-md:        0 4px 20px rgba(30, 36, 32, 0.10);
    --shadow-lg:        0 10px 40px rgba(30, 36, 32, 0.12);
    --shadow-xl:        0 20px 60px rgba(30, 36, 32, 0.16);

    /* Typography: Almarai for Arabic, Nunito for Latin glyphs */
    --font-brand:       "Almarai", "Nunito", system-ui, sans-serif;
    --font-primary:     var(--font-brand);
    --font-display:     var(--font-brand);
}

html body {
    font-family: var(--font-brand);
    color: var(--mw-graphite);
}

/* Headings in the brand weights */
html body h1, html body h2, html body h3 { font-weight: 800; }
html body h4, html body h5, html body h6 { font-weight: 700; }

/* Form controls inherit the brand font instead of the UA default */
html body button, html body input, html body select, html body textarea { font-family: inherit; }

/* Selection and focus in brand green */
::selection { background: var(--mw-green-tint); color: var(--mw-green-deep); }
html body .form-control:focus, html body .form-select:focus {
    border-color: var(--mw-green);
    box-shadow: 0 0 0 .2rem rgba(47, 158, 69, .15);
}

/* Bootstrap primary → Fresh Green (white text allowed) */
html body .btn-primary {
    --bs-btn-bg: var(--mw-green);
    --bs-btn-border-color: var(--mw-green);
    --bs-btn-hover-bg: var(--mw-green-deep);
    --bs-btn-hover-border-color: var(--mw-green-deep);
    --bs-btn-active-bg: var(--mw-green-deep);
    --bs-btn-active-border-color: var(--mw-green-deep);
    --bs-btn-disabled-bg: var(--mw-green);
    --bs-btn-disabled-border-color: var(--mw-green);
}
/* Bootstrap danger / "sale" accents → Watermelon Red */
html body .btn-danger {
    --bs-btn-bg: var(--mw-red);
    --bs-btn-border-color: var(--mw-red);
    --bs-btn-hover-bg: var(--mw-red-deep);
    --bs-btn-hover-border-color: var(--mw-red-deep);
}
html body .text-primary { color: var(--mw-green) !important; }
html body .bg-primary   { background-color: var(--mw-green) !important; }
html body .text-danger  { color: var(--mw-red) !important; }
html body .bg-danger    { background-color: var(--mw-red) !important; }

/* Dark surfaces (top bar, footer sit on graphite/deep green):
   accents use a light green so they stay readable. */
html body .top-bar-item i,
html body .footer .contact-icon i { color: #8FD79E; }
html body .footer .contact-icon {
    background: rgba(47, 158, 69, 0.14);
    border-color: rgba(47, 158, 69, 0.24);
}

/* Logo images (brand PNGs): keep a sensible on-screen size */
.hb-logo { display: block; height: 42px; width: auto; }
.hb-logo--footer { height: 52px; }
@media (max-width: 575.98px) { .hb-logo { height: 36px; } }