/* Firasa AI — shared theme for every /tools/ page.
   One source of truth for the purple banner, type and palette.
   Loaded AFTER tokens.css + components.css, BEFORE each page's own scoped CSS. */

/* ---------- palette ---------- */
[data-theme="light"] body.tool-page{
  --bg:#fbfafe;
  --bg-1:#ffffff;
  --bg-2:#f3f0f9;
  --bg-3:#e9e3f5;
  --line:#e2dcee;
  --line-strong:#cfc5e4;
  --fg:#241539;
  --fg-muted:#6b6182;
  --fg-dim:#8a80a0;
  --accent:#4a2377;
  --accent-soft:#61529f;
}
[data-theme="dark"] body.tool-page{
  --bg:#0e0a18;
  --bg-1:#171126;
  --bg-2:#1e1733;
  --bg-3:#2a2145;
  --line:#2c2344;
  --line-strong:#3d3160;
  --fg:#efeaf8;
  --fg-muted:#b0a6c8;
  --fg-dim:#8d82a8;
  --accent:#c9b3ec;
  --accent-soft:#a99ad6;
}

/* brand constants — identical in both themes.
   Note: --pine is intentionally NOT redefined here; the AI tool pages remap it
   for dark mode and the banner must not follow that remap. */
body.tool-page{
  --lemon:#f3e96d;
  --tool-radius:14px;
}

/* ---------- type ---------- */
body.tool-page{
  font-family:"IBM Plex Sans","Tajawal",system-ui,sans-serif;
  line-height:1.75;
}
html[dir="rtl"] body.tool-page{
  font-family:"IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif;
}
body.tool-page h1,
body.tool-page h2,
body.tool-page h3,
body.tool-page h4{
  font-family:"Alexandria",system-ui,sans-serif;
  line-height:1.35;
  letter-spacing:normal;
}

/* ---------- purple banner ---------- */
body.tool-page .page-head{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#4a2377,#61529f);
  color:#fff;
  padding:3.2rem 0 2.6rem;
}
body.tool-page .page-head .wrap{position:relative;z-index:2;}
body.tool-page .page-head h1{
  margin:0;
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  font-weight:800;
  color:#fff;
  text-wrap:balance;
}
body.tool-page .page-head p{
  color:#e5ddf5;
  max-width:640px;
  margin:.6rem 0 0;
  font-size:clamp(14.5px,1.1vw,16.5px);
  line-height:1.8;
}
body.tool-page .page-head .eyebrow{
  display:inline-block;
  margin-bottom:.9rem;
  font-size:.8rem;
  font-weight:600;
  color:#f0e8ff;
  background:rgba(186,105,222,.18);
  border:1px solid rgba(186,105,222,.45);
  border-radius:999px;
  padding:.35rem .85rem;
  letter-spacing:normal;
  text-transform:none;
  font-family:inherit;
}
body.tool-page .net{position:absolute;inset:0;z-index:1;opacity:.14;pointer-events:none;}
body.tool-page .net svg{width:100%;height:100%;display:block;}

body.tool-page .wrap{max-width:1120px;margin-inline:auto;padding-inline:22px;}
body.tool-page .page-body{padding:3rem 0;}
body.tool-page .tool-back{
  display:inline-block;
  margin-bottom:1rem;
  font-weight:600;
  font-size:.92rem;
  color:var(--accent-soft);
  font-family:inherit;
  letter-spacing:normal;
}
body.tool-page .tool-back:hover{color:var(--accent);}

/* ---------- shared panel + control look ---------- */
body.tool-page .tool-shell{max-width:760px;margin-inline:auto;}
@media(max-width:520px){
  body.tool-page .page-head{padding:2.4rem 0 2rem;}
}