/* ============================================================
   mAind · Brand CSS  (production-ready, drop-in)
   ------------------------------------------------------------
   Import this file and use the tokens + classes. Do not rebuild
   the brand from scratch. Fonts load from ../fonts/ by default.
   Hard rules: zero em-dash in content, Hebrew is RTL.
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@font-face{font-family:'Lilita One';font-weight:400;font-style:normal;font-display:swap;src:local('Lilita One'),url('../fonts/LilitaOne-Regular.ttf') format('truetype');}
@font-face{font-family:'Gagalin';font-weight:400;font-style:normal;font-display:swap;src:local('Gagalin'),url('../fonts/Gagalin-TT.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:local('Poppins'),local('Poppins Regular'),url('../fonts/Poppins-Regular.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:local('Poppins Medium'),url('../fonts/Poppins-Medium.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:local('Poppins SemiBold'),url('../fonts/Poppins-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;font-display:swap;src:local('Poppins Bold'),url('../fonts/Poppins-Bold.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:800;font-style:normal;font-display:swap;src:local('Poppins ExtraBold'),url('../fonts/Poppins-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:900;font-style:normal;font-display:swap;src:local('Poppins Black'),url('../fonts/Poppins-Black.ttf') format('truetype');}
@font-face{font-family:'Rubik';font-weight:400;font-style:normal;font-display:swap;src:local('Rubik'),local('Rubik Regular'),url('../fonts/Rubik-400.ttf') format('truetype');}
@font-face{font-family:'Rubik';font-weight:500;font-style:normal;font-display:swap;src:local('Rubik Medium'),url('../fonts/Rubik-500.ttf') format('truetype');}
@font-face{font-family:'Rubik';font-weight:700;font-style:normal;font-display:swap;src:local('Rubik Bold'),local('Rubik'),url('../fonts/Rubik-700.ttf') format('truetype');}
@font-face{font-family:'Rubik';font-weight:900;font-style:normal;font-display:swap;src:local('Rubik Black'),url('../fonts/Rubik-900.ttf') format('truetype');}

/* ---------- 2. TOKENS ---------- */
:root{
  /* color */
  --maind-ink:#10100F;
  --maind-paper:#FAFAF7;
  --maind-pink:#ef004e;
  --maind-orange:#ff8116;
  --maind-gray:#65686f;
  --maind-white:#ffffff;
  --maind-gradient:linear-gradient(135deg,#ef004e,#ff8116);
  --maind-gradient-angle:135deg;

  /* font families */
  --maind-font-logo:'Lilita One',system-ui,sans-serif;
  --maind-font-display:'Gagalin',system-ui,sans-serif;   /* EN H1 */
  --maind-font-body:'Poppins',system-ui,sans-serif;       /* EN headings H2-H4 + body */
  --maind-font-he:'Rubik','Poppins',system-ui,sans-serif; /* Hebrew everything */

  /* type scale (reference px) */
  --maind-h1:52px;  --maind-h2:32px;  --maind-h3:22px;  --maind-h4:15px;
  --maind-body:16px; --maind-small:13px;

  /* radius */
  --maind-radius-button:10px;   /* DEFAULT corner */
  --maind-radius-pill:30px;     /* ALT corner (opt-in via .btn--pill) */
  --maind-radius-card:18px;

  /* shadow */
  --maind-shadow-soft:0 8px 20px rgba(16,16,15,.22);
  --maind-shadow-soft-dark:0 8px 22px rgba(0,0,0,.40);
  --maind-h1-shadow:1.8px 1.8px 0 rgba(239,0,78,.30);       /* on light */
  --maind-h1-shadow-dark:1.8px 1.8px 0 #ef004e;             /* on black */
  --maind-h1-shadow-grad:2px 2px 0 rgba(101,104,111,.85);   /* on gradient (gray) */

  /* spacing step (8pt) */
  --maind-space:8px;
}

/* ---------- 3. BASE ---------- */
.maind, .maind-scope{
  font-family:var(--maind-font-body);
  color:var(--maind-ink);
  background:var(--maind-paper);
  -webkit-font-smoothing:antialiased;
}
[dir="rtl"], .maind [lang="he"], .maind-he{font-family:var(--maind-font-he);direction:rtl;text-align:right;}

/* ---------- 4. LOGO (locked construction) ---------- */
/* markup:  <span class="maind-logo">m<span class="ai">A</span><span class="ai i">i</span>nd</span> */
.maind-logo{font-family:var(--maind-font-logo);letter-spacing:-0.02em;line-height:1;color:var(--maind-ink);
  -webkit-text-stroke:0.036em var(--maind-ink);display:inline-block;font-size:40px;}
.maind-logo .ai{background:var(--maind-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:0.027em var(--maind-ink);}
.maind-logo .i{font-family:var(--maind-font-body);font-weight:800;}
/* on dark / on gradient: m,n,d turn white (no stroke), Ai keeps gradient + 1px white stroke */
.maind-logo--on-dark,.maind-logo--on-gradient{color:var(--maind-white);-webkit-text-stroke:0;}
.maind-logo--on-dark .ai,.maind-logo--on-gradient .ai{-webkit-text-stroke:0.014em var(--maind-white);}
/* on gradient background the Ai may instead be solid ink for contrast: add .maind-logo--ink-ai */
.maind-logo--ink-ai .ai{background:none;-webkit-background-clip:initial;color:var(--maind-ink);-webkit-text-stroke:0.014em var(--maind-white);}

/* ---------- 5. HEADINGS ---------- */
.maind h1,.maind .h1{font-family:var(--maind-font-display);font-weight:400;font-size:var(--maind-h1);
  line-height:1.05;letter-spacing:.5px;text-shadow:var(--maind-h1-shadow);margin:0 0 .27em;}
.maind h2,.maind .h2{font-family:var(--maind-font-body);font-weight:800;font-size:var(--maind-h2);line-height:1.1;margin:0 0 .35em;}
.maind h3,.maind .h3{font-family:var(--maind-font-body);font-weight:600;font-size:var(--maind-h3);line-height:1.2;margin:0 0 .45em;}
.maind h4,.maind .h4{font-family:var(--maind-font-body);font-weight:700;font-size:var(--maind-h4);
  letter-spacing:2px;text-transform:uppercase;color:var(--maind-gray);margin:0 0 .6em;}
.maind p,.maind .body{font-family:var(--maind-font-body);font-weight:400;font-size:var(--maind-body);line-height:1.6;}
.maind small,.maind .small{font-size:var(--maind-small);color:var(--maind-gray);}

/* Hebrew heading set (Rubik). Use on RTL containers or .maind-he elements. */
.maind-he h1,.maind-he .h1,.maind [lang="he"].h1{font-family:var(--maind-font-he);font-weight:900;font-size:46px;line-height:1.1;text-shadow:var(--maind-h1-shadow);}
.maind-he h2,.maind-he .h2{font-family:var(--maind-font-he);font-weight:900;font-size:30px;line-height:1.15;}
.maind-he h3,.maind-he .h3{font-family:var(--maind-font-he);font-weight:700;font-size:21px;}
.maind-he h4,.maind-he .h4{font-family:var(--maind-font-he);font-weight:700;font-size:15px;letter-spacing:1px;text-transform:none;}
.maind-he p,.maind-he .body{font-family:var(--maind-font-he);font-weight:500;font-size:15px;line-height:1.7;}

/* background-aware H1 shadow */
.maind--on-dark h1,.maind--on-dark .h1{color:#fff;text-shadow:var(--maind-h1-shadow-dark);}
.maind--on-gradient h1,.maind--on-gradient .h1{color:#fff;text-shadow:var(--maind-h1-shadow-grad);}
.maind--on-dark h2,.maind--on-dark h3,.maind--on-dark p,
.maind--on-gradient h2,.maind--on-gradient h3,.maind--on-gradient p{color:#fff;}

/* ---------- 6. BUTTONS ---------- */
.btn{font-family:var(--maind-font-body);font-weight:600;font-size:15px;padding:13px 26px;border:none;
  border-radius:var(--maind-radius-button);cursor:pointer;display:inline-block;line-height:1;white-space:nowrap;
  text-decoration:none;-webkit-text-fill-color:currentColor;background-clip:border-box;
  transition:transform .12s ease, box-shadow .12s ease;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn[dir="rtl"],.btn--he{font-family:var(--maind-font-he);font-weight:700;direction:rtl;}

/* variants */
.btn--gradient{background:var(--maind-gradient);color:#fff;}                                   /* PRIMARY */
.btn--gradient-bordered{background:var(--maind-gradient);color:#fff;border:1px solid var(--maind-ink);}
.btn--black-white{background:var(--maind-ink);color:#fff;}
.btn--black-pink{background:var(--maind-ink);color:var(--maind-pink);}
.btn--black-gradient{background:var(--maind-ink);}
.btn--black-gradient > span{background:var(--maind-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;}
.btn--white{background:#fff;color:var(--maind-ink);}                                            /* primary on gradient bg */
.btn--outline{background:transparent;color:var(--maind-ink);border:1.5px solid var(--maind-ink);}
.btn--outline-white{background:transparent;color:#fff;border:1.5px solid #fff;}

/* modifiers */
.btn--pill{border-radius:var(--maind-radius-pill);}            /* opt-in rounded */
.btn--shadow{box-shadow:var(--maind-shadow-soft);}            /* opt-in soft shadow */
.btn--shadow-dark{box-shadow:var(--maind-shadow-soft-dark);} /* soft shadow on dark bg */
.btn--block{display:block;width:100%;text-align:center;}

/* ---------- 7. LINKS (style 2: gradient text, always underlined) ---------- */
/* :not(.btn) so the link style never hijacks button anchors (.btn is often an <a>) */
.maind a:not(.btn), .maind-link{
  background:var(--maind-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-weight:600;text-decoration:underline;text-decoration-color:var(--maind-orange);text-underline-offset:2px;}
/* on gradient background a gradient link is invisible -> white underlined */
.maind--on-gradient a:not(.btn),.maind-link--on-gradient{
  background:none;-webkit-text-fill-color:initial;color:#fff;text-decoration:underline;text-decoration-color:#fff;}

/* ---------- 8. SURFACES ---------- */
.maind-card{background:#fff;border:1px solid #ececE5;border-radius:var(--maind-radius-card);padding:30px 32px;}
.maind-surface--ink{background:var(--maind-ink);color:#fff;}
.maind-surface--gradient{background:var(--maind-gradient);color:#fff;}
.maind-surface--paper{background:var(--maind-paper);color:var(--maind-ink);}

/* ---------- 9. GRADIENT TEXT UTILITY ---------- */
.maind-gradient-text{background:var(--maind-gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}