/* ==========================================================
   Ittihad Society brand system · v1
   Palette: "Nablus Stone & Olive"
   Fonts: Readex Pro — SELF-HOSTED at /assets/css/fonts.css
          (an external Google Fonts <link> is blocked by the server-level
           Content-Security-Policy `style-src 'self'`, which silently dropped
           the brand font). See assets/fonts/.
   ========================================================== */
:root{
  /* v2 "Stone & Thread" palette — shared with the public site (site.css) */
  --olive-900:#15291F; --olive-700:#2F5D46; --olive-500:#3E7A5C; --olive-100:#DCE6DD;
  --stone-50:#F7F9F6;  --stone-100:#EDF1EA; --stone-300:#D5DDD3;
  --pomegranate-700:#861B25; --pomegranate-500:#A3242F; --pomegranate-100:#F8E7E8;
  --saffron-600:#7A5A12; --saffron-500:#D9B35B; --saffron-100:#F6EDD6;
  --ink:#17241C; --ink-60:#4A564E;
  --bg:var(--stone-50); --surface:#fff; --text:var(--ink); --muted:var(--ink-60);
  --primary:var(--olive-700); --primary-hover:#1E3B2C; --accent:var(--pomegranate-500); --gold:var(--saffron-500);
  --font:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --shadow:0 1px 0 rgba(23,36,28,.04),0 14px 32px -22px rgba(23,36,28,.35);
  /* Tatreez motif as pure CSS gradients.
     The original was an inline SVG data-URI, which a server-level
     Content-Security-Policy of "default-src https:" blocks, because `data:` is
     not `https:`. Gradients need no external or inline resource, so the pattern
     renders under any policy and costs nothing to download. */
  --tatreez:
    repeating-linear-gradient(45deg,  transparent 0 5px, rgba(201,161,74,.35) 5px 7px, transparent 7px 12px),
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(201,161,74,.28) 5px 7px, transparent 7px 12px);
}

/* ---------- Buttons ---------- */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--h);padding:0 1.5em;
  font:600 1rem/1 var(--font);border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s,transform .15s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn svg{width:1.25em;height:1.25em;flex:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
[dir="rtl"] .btn .i-dir{transform:scaleX(-1)}

.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow)}
.btn-donate{background:var(--pomegranate-500);color:#fff;position:relative;overflow:hidden}
.btn-donate:hover{background:var(--pomegranate-700);box-shadow:0 10px 24px -10px rgba(178,58,72,.7)}
.btn-donate::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn-donate:hover::after{transform:translateX(120%)}
.btn-gold{background:var(--saffron-500);color:var(--olive-900)}
.btn-gold:hover{background:var(--saffron-600);color:#fff}
.btn-outline{background:transparent;color:var(--primary);border-color:currentColor}
.btn-outline:hover{background:var(--olive-100);color:var(--olive-900)}
.btn-ghost{background:transparent;color:var(--primary);padding:0 .5em}
.btn-ghost:hover{text-decoration:underline;text-underline-offset:4px}
.btn-on-dark{background:var(--stone-50);color:var(--olive-900)}
.btn-on-dark:hover{background:#fff}
.btn-sm{--h:38px;font-size:.9rem;padding:0 1.1em}
.btn-lg{--h:58px;font-size:1.1rem;padding:0 2em}
.btn-icon{padding:0;width:var(--h)}
.btn[aria-busy="true"]{color:transparent!important;pointer-events:none;position:relative}
.btn[aria-busy="true"]::before{content:"";position:absolute;width:1.2em;height:1.2em;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* ---------- Brand bits ---------- */
.tatreez-rule{height:12px;background:var(--tatreez) repeat-x center/24px 24px;border:0;margin:2rem 0}
.icon-badge{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--olive-100);color:var(--olive-700)}
.icon-badge svg{width:28px;height:28px}
.icon-badge.is-red{background:var(--pomegranate-100);color:var(--pomegranate-700)}
.icon-badge.is-gold{background:var(--saffron-100);color:var(--saffron-600)}
.stat-chip{display:inline-flex;align-items:baseline;gap:.4em;padding:.4em .9em;border-radius:var(--r-pill);background:var(--saffron-100);color:var(--olive-900);font:500 .9rem var(--font)}
@media (prefers-reduced-motion:reduce){.btn,.btn-donate::after{transition:none}}