/* WasfaOne — Global Styles (AR/EN) */

/* ====== Fonts (applied via body classes) ====== */
body.font-ar { font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
body.font-en { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

/* ====== Typography scale & rhythm ====== */
:root{
  --body-size: 16px;            /* 16–18px responsive handled by Tailwind too */
  --h1-size: 40px;              /* 36–44px */
  --h2-size: 30px;              /* 28–32px */
  --h3-size: 22px;              /* 22–24px */
  --lh-text: 1.8;
  --lh-head: 1.4;
  --letter-text: 0.2px;
  --color-primary: #ef4444;
  --color-accent-1: #10b981;
  --color-accent-2: #3b82f6;
}

/* Base */
html, body { scroll-behavior: smooth; }
body {
  font-size: var(--body-size);
  line-height: var(--lh-text);
  letter-spacing: var(--letter-text);
}

/* Headings */
h1 { font-size: var(--h1-size); line-height: var(--lh-head); }
h2 { font-size: var(--h2-size); line-height: var(--lh-head); }
h3 { font-size: var(--h3-size); line-height: var(--lh-head); }

/* Util */
.feature-card { border-radius: 1rem; padding: 1rem; background: rgba(255,255,255,0.7); backdrop-filter: blur(2px); }
button, .btn {
  transition: transform .15s ease, box-shadow .15s ease;
}
button:hover, .btn:hover { transform: scale(1.02); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }

/* Tables */
.th { text-align: start; padding: .75rem 1rem; font-weight: 700; }
td { padding: .65rem 1rem; }

/* Tabs */
.tab-btn{
  background: #e2e8f0; color:#0f172a; padding:.5rem .9rem; border-radius: .75rem; font-weight: 700;
}
.tab-btn.active{ background: var(--color-primary); color: #fff; }

/* Inputs */
.inp{ width:100%; padding:.6rem .8rem; border:1px solid rgba(100,116,139,.35); border-radius:.65rem; background: white; color:#0f172a; }
.lbl{ display:block; margin-bottom:.35rem; font-size:.9rem; font-weight:600; color:#334155; }
.dark .inp{ background:#0f172a; color:#e2e8f0; border-color: rgba(148,163,184,.35); }

/* Cards */
.card{ background:white; border-radius:1rem; padding:1rem; box-shadow: 0 10px 20px rgba(0,0,0,.04); }
.dark .card{ background:#0f172a; }

/* Image preview frame */
.img-frame{ position:relative; border-radius:1rem; overflow:hidden; border:1px solid rgba(148,163,184,.35); }
.img-frame img{ display:block; width:100%; height:180px; object-fit:cover; }

/* Primary color helpers */
.text-primary{ color: var(--color-primary); }
.bg-primary{ background: var(--color-primary); }

/* RTL/LTR helpers (dir handled in JS) */
.rtl *{ letter-spacing: 0.1px; }
.ltr *{ letter-spacing: 0.1px; }

/* Small utilities */
.badge{ display:inline-block; font-size:.75rem; padding:.2rem .5rem; border-radius:.5rem; background:#f1f5f9; color:#0f172a; }
.dark .badge{ background:#0b1220; color:#e2e8f0; }

/* JSON pre */
.prejson{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap; background:#0b1220; color:#e2e8f0; border-radius:.75rem; padding:1rem; font-size:.85rem;
}

/* Link underline style */
a.underline-offset { text-underline-offset: 3px; }