/* ===================================================================
   ManasikOS — Base layer
   Reset · RTL · Typography ramp · Pattern surfaces · Shared layout
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-text);
  background: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  direction: rtl;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--gold-300); color: var(--ink-950); }

/* ---- LTR helper (English content blocks) ----------------------- */
[dir="ltr"], .ltr { direction: ltr; text-align: left; font-family: var(--font-latin); }

/* ---- Type ramp utilities --------------------------------------- */
.t-hero    { font-family: var(--font-display); font-weight: var(--t-hero-w);    font-size: var(--t-hero-size);    line-height: var(--t-hero-lh); letter-spacing: -0.5px; }
.t-display { font-family: var(--font-display); font-weight: var(--t-display-w); font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: -0.3px; }
.t-h1      { font-family: var(--font-display); font-weight: var(--t-h1-w);      font-size: var(--t-h1-size);      line-height: var(--t-h1-lh); }
.t-h2      { font-family: var(--font-display); font-weight: var(--t-h2-w);      font-size: var(--t-h2-size);      line-height: var(--t-h2-lh); }
.t-h3      { font-family: var(--font-display); font-weight: var(--t-h3-w);      font-size: var(--t-h3-size);      line-height: var(--t-h3-lh); }
.t-body-lg { font-weight: var(--t-body-lg-w); font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); }
.t-body    { font-weight: var(--t-body-w);    font-size: var(--t-body-size);    line-height: var(--t-body-lh); }
.t-body-sm { font-weight: var(--t-body-sm-w); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.t-label   { font-weight: var(--t-label-w);   font-size: var(--t-label-size);   line-height: var(--t-label-lh); }
.t-strong  { font-weight: var(--t-strong-w);  font-size: var(--t-strong-size);  line-height: var(--t-strong-lh); }
.t-caption { font-weight: var(--t-caption-w); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); }
.t-overline{ font-weight: var(--t-overline-w);font-size: var(--t-overline-size);line-height: var(--t-overline-lh); letter-spacing: 1.5px; text-transform: uppercase; }
.t-num-xl  { font-family: var(--font-display); font-weight: var(--t-num-xl-w); font-size: var(--t-num-xl-size); line-height: var(--t-num-xl-lh); }
.t-num-l   { font-family: var(--font-display); font-weight: var(--t-num-l-w);  font-size: var(--t-num-l-size);  line-height: var(--t-num-l-lh); }

/* ---- Color utilities ------------------------------------------- */
.c-gold   { color: var(--text-gold); }
.c-muted  { color: var(--text-secondary); }
.c-on-dark{ color: var(--text-on-dark); }
.c-on-dark-muted { color: var(--text-on-dark-muted); }
.c-danger { color: var(--status-danger); }
.c-success{ color: var(--status-success); }
.c-warning{ color: var(--status-warning); }

/* ---- Geometric pattern surfaces -------------------------------- */
.pattern { position: relative; isolation: isolate; }
.pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url('../img/pattern-star.svg');
  background-size: 120px 120px;
  opacity: 0.06;
  pointer-events: none;
}
.pattern-dark::before { opacity: 0.10; }
.pattern-faint::before { opacity: 0.04; }

/* ---- Gold hairline divider ------------------------------------- */
.rule-gold { height: 2px; width: 64px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); }

/* ---- Shared layout helpers ------------------------------------- */
.stack    { display: flex; flex-direction: column; }
.row      { display: flex; flex-direction: row; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.center   { display: flex; align-items: center; justify-content: center; }
.wrap     { flex-wrap: wrap; }
.grow     { flex: 1; }
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}

/* ---- Focus visibility (accessibility) -------------------------- */
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 6px; }

/* ---- Scrollbars on dark gallery -------------------------------- */
.gallery::-webkit-scrollbar { height: 10px; width: 10px; }
.gallery::-webkit-scrollbar-thumb { background: var(--green-700); border-radius: 999px; }
.gallery::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}