/* ═══════════════════════════════════════════════════════════════════════════
   EvoHamza — shared design tokens + page shell.
   Linked by every non-SPA page (membership, extension-guide, contact, legal,
   reset-password). The SPA (index.html) carries the same token block inline
   because it must render without a second network round-trip; keep the two
   :root blocks in sync when a token changes.
   Load this BEFORE a page's own <style> so page-specific rules still win.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Palette — the EvoHamza identity: crimson + teal on near-black */
  --bg:#080812;--bg2:#0d0d1e;--bg3:#111827;
  --border:rgba(233,69,96,0.15);
  --accent:#e94560;--accent2:#4ecca3;
  --text:#e8eef7;--text2:#a5b3c6;--text3:#8595ab;
  --card:color-mix(in srgb,var(--bg3) 80%,transparent);
  --card-b:#243044;
  --glow:rgba(233,69,96,0.2);
  /* Semantic surfaces */
  --surface:color-mix(in srgb,var(--bg3) 78%,transparent);
  --surface-2:color-mix(in srgb,var(--bg2) 88%,transparent);
  --line:rgba(255,255,255,0.07);
  --line-2:rgba(255,255,255,0.13);
  --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 45%,transparent);
  --ok:#4ecca3;--warn:#f59e0b;--danger:#f87171;--gold:#f59e0b;
  --pro:#a78bfa;--pro-bg:rgba(167,139,250,0.13);--pro-line:rgba(167,139,250,0.34);
  /* Spacing (4px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  /* Radius */
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;
  /* Type */
  --fs-display:1.45rem;--fs-h1:1.15rem;--fs-h2:1rem;--fs-h3:.875rem;
  --fs-body:.84rem;--fs-sm:.78rem;--fs-xs:.72rem;--fs-2xs:.68rem;
  --lh-tight:1.25;--lh:1.55;
  /* Elevation & motion */
  --sh-1:0 1px 2px rgba(0,0,0,.35);--sh-2:0 6px 18px rgba(0,0,0,.38);--sh-3:0 18px 48px rgba(0,0,0,.5);
  --dur:.16s;--dur-2:.24s;--ease:cubic-bezier(.22,.61,.36,1);
  --ctl-h:34px;--page-pad:24px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,::before,::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
     font-size:var(--fs-body);line-height:var(--lh);color:var(--text);background:var(--bg);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea,optgroup{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;color:inherit}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;appearance:button;background:none;border:0}
button:not(:disabled){cursor:pointer}
img,svg,video,canvas{vertical-align:middle}
img{max-width:100%}
a{color:var(--accent2);text-decoration:none}
label{display:inline-block}
table{border-collapse:collapse}
th,td,thead,tbody,tfoot,tr{border-color:inherit;border-style:solid;border-width:0}
hr{margin:var(--s4) 0;border:0;border-top:1px solid var(--line);opacity:1;color:inherit}
h1,h2,h3,h4,h5,h6{line-height:var(--lh-tight)}
strong,b{font-weight:700}
[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}
code,pre,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.9em}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--accent) 45%,transparent)}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:var(--r-xs)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--card-b);border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text3);background-clip:padding-box}
*{scrollbar-width:thin;scrollbar-color:var(--card-b) transparent}

/* ── Shared page header (same shell as the app bar) ──────────────────────── */
.ev-header{background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 96%,transparent),color-mix(in srgb,var(--bg3) 92%,transparent));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:var(--s2) var(--page-pad);display:flex;gap:var(--s4);align-items:center;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:900;min-height:58px}
.ev-header::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-line),color-mix(in srgb,var(--accent2) 35%,transparent),transparent);pointer-events:none}
.ev-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;color:inherit}
.ev-brand img{height:36px;width:36px;object-fit:contain;border-radius:50%;flex-shrink:0}
.ev-brand-name{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.015em;line-height:1.1;
  background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.ev-brand-sub{display:block;font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-top:1px}
.ev-header-actions{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.ev-back{padding:0 14px;height:var(--ctl-h);display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-sm);
  background:rgba(255,255,255,0.05);border:1px solid var(--line-2);color:var(--text2);
  font-size:var(--fs-sm);font-weight:600;transition:background var(--dur),color var(--dur),border-color var(--dur);text-decoration:none}
.ev-back:hover{background:rgba(255,255,255,0.09);color:var(--text)}
.ev-cta{padding:0 14px;height:var(--ctl-h);display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;font-size:var(--fs-sm);font-weight:700;
  text-decoration:none;box-shadow:0 2px 10px rgba(124,58,237,0.28);transition:filter var(--dur),transform var(--dur)}
.ev-cta:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff}

/* ── Shared footer ───────────────────────────────────────────────────────── */
.ev-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:var(--s10);padding:var(--s8) var(--page-pad) var(--s5)}
.ev-footer-inner{max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--s8);justify-content:space-between}
.ev-footer h4{font-size:var(--fs-2xs);font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s3)}
.ev-footer a{display:block;font-size:var(--fs-sm);color:var(--text2);margin-bottom:6px;transition:color var(--dur)}
.ev-footer a:hover{color:var(--accent)}
.ev-footer-bottom{max-width:960px;margin:var(--s6) auto 0;padding-top:var(--s4);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);font-size:var(--fs-xs);color:var(--text3)}

/* ── Shared primitives ───────────────────────────────────────────────────── */
.ev-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.ev-brand-sub{color:var(--text2)}
/* Inline text links keep a 24px hit area without changing the type size. */
footer a,.footer a,.ev-footer a,.links a,.dl-meta a{display:inline-flex;align-items:center;min-height:24px}
.ev-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(255,255,255,0.05);color:var(--text2);font-size:var(--fs-2xs);font-weight:700}

@media(prefers-reduced-motion:reduce){
  *,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media(max-width:768px){
  :root{--page-pad:14px;--ctl-h:36px}
  .ev-brand-sub{display:none}
  .ev-header{gap:var(--s2)}
}