/* ──────────────────────────────────────────────────────────────────────────────
   Humiby brand layer (brand/Humiby-Brand-Kit · Brand Guidelines v1.0)
   Loaded after every other stylesheet. Uses `html:root` (higher specificity
   than `:root`) so it wins over the per-page :root blocks inside pages/*.php.

   Rules from the guidelines:
   · Humiby Purple is the primary colour, Human Teal a small accent (≈ 60% light,
     25% purple, 10% teal, 5% functional).
   · White text only on Humiby Purple or Teal Deep — never on Human Teal.
   · Nunito for Latin text, Almarai for Arabic.
   ────────────────────────────────────────────────────────────────────────────── */

html:root {
    /* Brand palette (06-Colors/colors.css) */
    --hb-humiby-purple: #7D2483;
    --hb-human-teal:    #38A69A;
    --hb-deep-purple:   #4F1654;
    --hb-teal-deep:     #1F7D72;
    --hb-purple-tint:   #F4EAF5;
    --hb-teal-tint:     #E3F3F1;
    --hb-graphite:      #1E1B24;
    --hb-slate:         #5E5968;
    --hb-line:          #E5E0E9;
    --hb-mist:          #F7F5F9;
    --hb-white:         #FFFFFF;
    --hb-success:       #1E7F48;
    --hb-warning:       #E59A2E;
    --hb-error:         #C22F3B;
    --hb-info:          #2C6CB0;

    /* Site variables mapped onto the brand */
    --primary:          var(--hb-humiby-purple);
    --primary-dark:     var(--hb-deep-purple);
    --primary-light:    #9A4FA0;
    --primary-glow:     rgba(125, 36, 131, 0.15);
    --primary-gradient: linear-gradient(135deg, var(--hb-humiby-purple) 0%, var(--hb-deep-purple) 100%);
    --secondary:        var(--hb-graphite);
    --secondary-light:  #2E2A36;
    --accent:           var(--hb-teal-deep);   /* white text allowed */
    --accent-light:     var(--hb-human-teal);  /* icons/decoration only, no white text */
    --success:          var(--hb-success);
    --danger:           var(--hb-error);
    --warning:          var(--hb-warning);
    --info:             var(--hb-info);
    --dark:             var(--hb-graphite);
    --text-dark:        var(--hb-graphite);
    --text-muted:       var(--hb-slate);
    --text-gray:        var(--hb-slate);
    --gray:             var(--hb-slate);
    --light:            var(--hb-mist);
    --bg:               var(--hb-mist);
    --white:            var(--hb-white);
    --border:           var(--hb-line);
    --gradient:         linear-gradient(135deg, var(--hb-humiby-purple) 0%, var(--hb-deep-purple) 100%);
    --gradient-dark:    linear-gradient(135deg, var(--hb-graphite) 0%, #2E2A36 100%);
    --gradient-accent:  linear-gradient(135deg, var(--hb-teal-deep) 0%, #176459 100%);
    --shadow-sm:        0 2px 8px rgba(125, 36, 131, 0.08);
    --shadow-md:        0 4px 20px rgba(125, 36, 131, 0.12);
    --shadow-lg:        0 10px 40px rgba(125, 36, 131, 0.15);
    --shadow-xl:        0 20px 60px rgba(125, 36, 131, 0.20);

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

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

/* Headings in the brand weights (400 / 700 / 800) */
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 purple */
::selection { background: var(--hb-purple-tint); color: var(--hb-deep-purple); }
html body .form-control:focus, html body .form-select:focus {
    border-color: var(--hb-humiby-purple);
    box-shadow: 0 0 0 .2rem rgba(125, 36, 131, .15);
}

/* Bootstrap primary → Humiby Purple (white text allowed) */
html body .btn-primary {
    --bs-btn-bg: var(--hb-humiby-purple);
    --bs-btn-border-color: var(--hb-humiby-purple);
    --bs-btn-hover-bg: var(--hb-deep-purple);
    --bs-btn-hover-border-color: var(--hb-deep-purple);
    --bs-btn-active-bg: var(--hb-deep-purple);
    --bs-btn-active-border-color: var(--hb-deep-purple);
    --bs-btn-disabled-bg: var(--hb-humiby-purple);
    --bs-btn-disabled-border-color: var(--hb-humiby-purple);
}
html body .text-primary { color: var(--hb-humiby-purple) !important; }
html body .bg-primary   { background-color: var(--hb-humiby-purple) !important; }

/* Dark surfaces (top bar, footer): purple is too dark to read on graphite,
   so accents there use Human Teal (teal text/icons on dark are fine). */
html body .top-bar-item i,
html body .footer .contact-icon i { color: var(--hb-human-teal); }
html body .footer .contact-icon {
    background: rgba(56, 166, 154, 0.10);
    border-color: rgba(56, 166, 154, 0.20);
}

/* Logo images (brand SVGs): keep the minimum on-screen size (100px wide) */
.hb-logo { display: block; height: 40px; width: auto; min-width: 100px; }
.hb-logo--footer { height: 44px; }
@media (max-width: 575.98px) { .hb-logo { height: 34px; } }