/* ===================================================================
   Mawhiba Future — Brand Tokens (CSS variables)
   Version: 0.3.2
   Last updated: 2026-07-11
   Source of truth: tokens.json (next to this file).
   This file is auto-derived for HTML/CSS deliverables.
   v0.1.x — light-first; patterns v1; Lucide bundled; icon color rule.
   v0.2.x — leaf-confetti patterns; founder portraits.
   v0.3.0 — RENAME: MF → MHF everywhere. Breaking change. Variables now
            --mhf-*, classes .mhf-*, files mhf-logo-*. Bump downstream
            consumers accordingly.
   v0.3.2 — CONTRAST + PATTERN FIX. White text on bright teal (1.85:1)
            is banned; dark text on bright teal (9.3:1) is the rule, and
            white text now needs the new deep-teal surface (7.9:1). The
            teal-wash gradient is re-tuned deep so its white text passes.
            Patterns get a real usage model (frame / soft-scrim / texture)
            — text no longer sits raw on the leaves.
   =================================================================== */

:root {
  /* --- Brand Colors ----------------------------------------------- */
  --mhf-primary:        #0bd5c8;   /* Primary teal — brand identity */
  --mhf-primary-soft:   rgba(11, 213, 200, 0.16);
  --mhf-secondary:      #7a47ae;   /* Supporting purple — sparingly */
  --mhf-secondary-soft: rgba(122, 71, 174, 0.14);
  --mhf-cta:            #ffd04f;   /* Yellow CTA — buttons only */
  --mhf-cta-soft:       rgba(255, 208, 79, 0.14);
  --mhf-celebration:    #ff7b3d;   /* Orange — kid celebration moments */
  --mhf-celebration-soft: rgba(255, 123, 61, 0.14);

  /* --- Teal text-contrast token (v0.3.2) --------------------------
     White on bright #0bd5c8 is only 1.85:1 — it FAILS WCAG at every
     size. Rule: text & icons on any teal surface are ALWAYS dark
     #1a1c1a (9.3:1). White on teal is banned. We do NOT add a darker
     teal to rescue white text — keep the palette at four colors. */
  --mhf-primary-ink:    #1a1c1a;   /* the text/icon color on any teal surface */

  /* --- Neutrals --------------------------------------------------- */
  --mhf-text:           #1a1c1a;   /* Primary text / dark surfaces */
  --mhf-text-muted:     rgba(26, 28, 26, 0.55);
  --mhf-text-dim:       #5c635c;
  --mhf-hairline:       rgba(26, 28, 26, 0.08);
  --mhf-bg:             #e6e8e6;   /* Main page background */
  --mhf-bg-light:       #f4f6f4;   /* Section background, calm cards */
  --mhf-surface:        #ffffff;   /* Card surface, text on dark */
  --mhf-border:         #d1d5d1;   /* Default hairline borders */

  /* --- Gradients (light-first — brand is for kids) ---------------- */
  --mhf-gradient-light-hero:
    radial-gradient(ellipse 90% 70% at top right, rgba(11, 213, 200, 0.35) 0%, rgba(11, 213, 200, 0.10) 28%, #f4f6f4 65%);
  --mhf-gradient-cream-glow:
    radial-gradient(ellipse 80% 60% at top left, rgba(255, 208, 79, 0.30) 0%, rgba(11, 213, 200, 0.10) 35%, #ffffff 70%);
  --mhf-gradient-teal-wash:            /* bright teal band. Text on it is DARK
       #1a1c1a (5.8–10.9:1). White text on teal is banned (~1.6–3.0:1). */
    linear-gradient(180deg, #0fe6da 0%, #0bd5c8 50%, #08a89e 100%);
  --mhf-gradient-yellow-spotlight:
    linear-gradient(225deg, rgba(255, 208, 79, 0.45) 0%, rgba(244, 246, 244, 0) 60%), #f4f6f4;

  /* --- Typography ------------------------------------------------- */
  --mhf-font:           'Rubik', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;

  --mhf-weight-light:    300;
  --mhf-weight-regular:  400;
  --mhf-weight-medium:   500;   /* DEFAULT */
  --mhf-weight-semibold: 600;
  --mhf-weight-bold:     700;
  --mhf-weight-extrabold: 800;

  --mhf-size-display:  88px;
  --mhf-size-h1:       36px;
  --mhf-size-h2:       24px;
  --mhf-size-h3:       18px;
  --mhf-size-lead:     18px;
  --mhf-size-body:     16px;
  --mhf-size-body-sm:  14px;
  --mhf-size-caption:  13px;
  --mhf-size-tiny:     11px;

  --mhf-lh-tight:   1.15;
  --mhf-lh-default: 1.55;
  --mhf-lh-loose:   1.65;

  --mhf-ls-heading: -0.01em;
  --mhf-ls-label-upper: 0.08em;

  /* --- Spacing ---------------------------------------------------- */
  --mhf-s-1:  4px;
  --mhf-s-2:  8px;
  --mhf-s-3:  12px;
  --mhf-s-4:  16px;
  --mhf-s-6:  24px;
  --mhf-s-8:  32px;
  --mhf-s-10: 40px;
  --mhf-s-12: 48px;

  /* --- Radii ------------------------------------------------------ */
  --mhf-radius-sm:  16px;   /* badge / kicker-on-block */
  --mhf-radius-md:  24px;   /* compact card */
  --mhf-radius-lg:  32px;   /* DEFAULT card */
  --mhf-radius-xl:  48px;
  --mhf-radius-pill: 9999px;  /* CTA buttons ONLY — never for badges */

  /* --- Button heights -------------------------------------------- */
  --mhf-btn-xl-h: 80px;
  --mhf-btn-lg-h: 64px;
  --mhf-btn-md-h: 56px;
  --mhf-btn-sm-h: 48px;
}

/* ===================================================================
   Base typography reset
   =================================================================== */

html { font-family: var(--mhf-font); color: var(--mhf-text); background: var(--mhf-bg); }
body { font-family: var(--mhf-font); font-weight: var(--mhf-weight-medium); line-height: var(--mhf-lh-default); }

/* Arabic body bumps to Medium (500); Latin body sits at Regular (400). */
html[lang="ar"], html[dir="rtl"] { font-weight: var(--mhf-weight-medium); }
html[lang="en"], html[dir="ltr"] { font-weight: var(--mhf-weight-regular); }

h1, h2, h3 {
  letter-spacing: var(--mhf-ls-heading);
  line-height: var(--mhf-lh-tight);
  font-weight: var(--mhf-weight-bold);
}

/* ===================================================================
   Buttons — pill radius is CTA-only
   =================================================================== */

.mhf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mhf-font); font-weight: var(--mhf-weight-bold);
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.mhf-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.mhf-btn:active { transform: translateY(1px); }

.mhf-btn--primary    { background: var(--mhf-cta);        color: var(--mhf-text); }
.mhf-btn--secondary  { background: var(--mhf-primary);    color: var(--mhf-text); }
.mhf-btn--tertiary   { background: var(--mhf-secondary);  color: var(--mhf-surface); }
.mhf-btn--bordered   { background: transparent;          color: var(--mhf-text);
                      border: 1.5px solid var(--mhf-text); }
.mhf-btn--light      { background: var(--mhf-bg-light);   color: var(--mhf-text); }
.mhf-btn--link       { background: transparent;          color: var(--mhf-primary);
                      text-decoration: underline; text-underline-offset: 4px; }

.mhf-btn--xl { height: var(--mhf-btn-xl-h); padding: 0 var(--mhf-s-8); font-size: 20px; border-radius: var(--mhf-radius-xl); }
.mhf-btn--lg { height: var(--mhf-btn-lg-h); padding: 0 var(--mhf-s-6); font-size: 18px; border-radius: var(--mhf-radius-lg); }
.mhf-btn--md { height: var(--mhf-btn-md-h); padding: 0 var(--mhf-s-6); font-size: 16px; border-radius: var(--mhf-radius-lg); }
.mhf-btn--sm { height: var(--mhf-btn-sm-h); padding: 0 var(--mhf-s-4); font-size: 14px; border-radius: var(--mhf-radius-sm); }

/* The ONLY non-shape-button use of pill radius is on .mhf-btn--pill which
   must apply to a literal CTA button. Forbidden on badges, chips, kickers. */
.mhf-btn--pill { border-radius: var(--mhf-radius-pill); }

/* ===================================================================
   Cards
   =================================================================== */

.mhf-card {
  background: var(--mhf-surface);
  border-radius: var(--mhf-radius-lg);
  padding: var(--mhf-s-6);
  border: 1px solid var(--mhf-hairline);
}
.mhf-card--compact { border-radius: var(--mhf-radius-md); padding: var(--mhf-s-4); }
.mhf-card--hero    { padding: var(--mhf-s-8); }
.mhf-card--soft-teal {
  background: var(--mhf-primary-soft);
  color: var(--mhf-primary);
  border: 0;
}

/* ===================================================================
   Eyebrows / kickers — plain text (DEFAULT) or 16px solid block
   =================================================================== */

.mhf-eyebrow {
  font-size: var(--mhf-size-tiny);
  font-weight: var(--mhf-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mhf-ls-label-upper);
  color: var(--mhf-primary);
}
html[dir="rtl"] .mhf-eyebrow {
  text-transform: none;
  letter-spacing: 0;
}

.mhf-eyebrow--on-dark { color: var(--mhf-surface); }

.mhf-eyebrow--block {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--mhf-radius-sm);   /* 16px — NEVER pill */
  background: var(--mhf-primary);
  color: var(--mhf-text);
}

/* ===================================================================
   Text on teal — contrast-safe surface (v0.3.2)
   Teal carries DARK text only. White on teal #0bd5c8 = 1.85:1 (FAILS).
   =================================================================== */

.mhf-surface-teal { background: var(--mhf-primary); color: var(--mhf-primary-ink); } /* bright teal + dark text — 9.3:1 */
.mhf-on-teal      { color: var(--mhf-primary-ink); }   /* force dark text/icons over any teal area */

/* ===================================================================
   Patterns — leaf-confetti brand texture (v0.3.2 usage model)
   Leaves are ATMOSPHERE, never a text bed. The scattered art carries
   near-black leaves (e.g. teal #0c3c3d), so text laid straight on it
   loses contrast. Pick ONE of three modes — never raw text-on-leaves.
   =================================================================== */

/* Raw leaf fill — decoration ONLY (bands, headers, corners; NO text). */
.mhf-pattern {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mhf-pattern--multicolor    { background-image: url("assets/patterns/pattern-leaves-multicolor.png"); }
.mhf-pattern--teal          { background-image: url("assets/patterns/pattern-leaves-teal.png"); }
.mhf-pattern--purple        { background-image: url("assets/patterns/pattern-leaves-purple.png"); }
.mhf-pattern--yellow        { background-image: url("assets/patterns/pattern-leaves-yellow.png"); }
.mhf-pattern--orange        { background-image: url("assets/patterns/pattern-leaves-orange.png"); }
.mhf-pattern--soft-neutral  { background-image: url("assets/patterns/pattern-leaves-soft-neutral.png"); }

/* Sparse SVG variants (v0.3.2) — pale, low-contrast, seamless tiles, no
   near-black leaves. Light enough to carry raw DARK text; also drop into
   frame / soft / texture. Self-contained: a light bed is baked in. Use
   standalone (no .mhf-pattern base needed): class="mhf-pattern--sparse-teal". */
.mhf-pattern--sparse-teal,
.mhf-pattern--sparse-multicolor,
.mhf-pattern--sparse-neutral {
  background-color: var(--mhf-surface);
  background-repeat: repeat;
  background-position: center;
  background-size: 320px 320px;
}
.mhf-pattern--sparse-teal       { background-image: url("assets/patterns/pattern-leaves-teal-sparse.svg");       --mhf-pat: url("assets/patterns/pattern-leaves-teal-sparse.svg"); }
.mhf-pattern--sparse-multicolor { background-image: url("assets/patterns/pattern-leaves-multicolor-sparse.svg"); --mhf-pat: url("assets/patterns/pattern-leaves-multicolor-sparse.svg"); }
.mhf-pattern--sparse-neutral    { background-image: url("assets/patterns/pattern-leaves-neutral-sparse.svg");    --mhf-pat: url("assets/patterns/pattern-leaves-neutral-sparse.svg"); }

/* Faded variants (v0.3.2) — the SAME approved leaf art, baked to ~40%
   strength so DARK text sits directly on top with NO plate and NO scrim.
   This is the DEFAULT way to put leaves behind text. Full-strength
   .mhf-pattern--<color> is the rare case (decorative bands, or inside a
   frame). Tiny files (13–39 KB). Dark text clears 8:1 on every one. */
.mhf-pattern--faded-teal,
.mhf-pattern--faded-multicolor,
.mhf-pattern--faded-purple,
.mhf-pattern--faded-yellow,
.mhf-pattern--faded-orange,
.mhf-pattern--faded-soft-neutral {
  background-color: var(--mhf-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mhf-pattern--faded-teal         { background-image: url("assets/patterns/pattern-leaves-teal-faded.png");         --mhf-pat: url("assets/patterns/pattern-leaves-teal-faded.png"); }
.mhf-pattern--faded-multicolor   { background-image: url("assets/patterns/pattern-leaves-multicolor-faded.png");   --mhf-pat: url("assets/patterns/pattern-leaves-multicolor-faded.png"); }
.mhf-pattern--faded-purple       { background-image: url("assets/patterns/pattern-leaves-purple-faded.png");       --mhf-pat: url("assets/patterns/pattern-leaves-purple-faded.png"); }
.mhf-pattern--faded-yellow       { background-image: url("assets/patterns/pattern-leaves-yellow-faded.png");       --mhf-pat: url("assets/patterns/pattern-leaves-yellow-faded.png"); }
.mhf-pattern--faded-orange       { background-image: url("assets/patterns/pattern-leaves-orange-faded.png");       --mhf-pat: url("assets/patterns/pattern-leaves-orange-faded.png"); }
.mhf-pattern--faded-soft-neutral { background-image: url("assets/patterns/pattern-leaves-soft-neutral-faded.png"); --mhf-pat: url("assets/patterns/pattern-leaves-soft-neutral-faded.png"); }

/* MODE 1 — FRAMED (DEFAULT whenever there is a headline).
   Pattern fills the section; ALL text sits on a solid plate on top.
   Leaves show only in the margin around the plate. */
.mhf-pattern-frame {
  padding: clamp(20px, 5vw, 56px);
  border-radius: var(--mhf-radius-lg);
  border: 1px solid var(--mhf-hairline);
}
.mhf-pattern-frame > .mhf-plate {
  background: var(--mhf-surface);          /* or --mhf-bg-light / soft-teal tint */
  border-radius: var(--mhf-radius-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

/* MODE 2 — SOFTENED (text directly over the pattern, made safe).
   A light scrim veils the leaves so full-contrast dark text reads on
   top — the WCAG "scrim" technique. Add on the SAME element as
   .mhf-pattern .mhf-pattern--<color>. Keep text DARK (never muted). */
.mhf-pattern-soft { position: relative; isolation: isolate; }
.mhf-pattern-soft::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--mhf-scrim, rgba(244, 246, 244, 0.78));
  border-radius: inherit; pointer-events: none;
}
.mhf-pattern-soft > * { position: relative; z-index: 1; }

/* MODE 3 — TEXTURE (faint watermark under a whole section).
   Leaves dropped to ~12% as barely-there texture on a light base.
   Set --mhf-pat to the leaf image; dark text reads normally on top. */
.mhf-pattern-texture {
  position: relative; isolation: isolate;
  background: var(--mhf-bg-light); overflow: hidden;
}
.mhf-pattern-texture::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--mhf-pat) center / cover no-repeat;
  opacity: var(--mhf-pat-opacity, 0.12);
}

/* Legacy alias — .mhf-pattern-wrap/.mhf-pattern-card == the FRAME model. */
.mhf-pattern-wrap {
  padding: 56px;
  border-radius: var(--mhf-radius-lg);
  border: 1px solid var(--mhf-hairline);
}
.mhf-pattern-wrap > .mhf-pattern-card {
  background: var(--mhf-surface);
  border-radius: var(--mhf-radius-lg);
  padding: 48px 40px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  max-width: 760px;
}

/* ===================================================================
   Anti-pattern reminders — these classes do NOT exist intentionally.
   Banned: pill-shaped translucent badges, backdrop-filter, fake live
   dots, WHITE TEXT ON BRIGHT TEAL, and raw text on full-strength leaves.
   See learned-rules.md and SKILL.md for enforcement.
   =================================================================== */