/* =====================================================
   FONT FACES
   ===================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Amiri Quran";
  src: url("fonts/AmiriQuran-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Nastaliq Urdu";
  src: url("fonts/NotoNastaliqUrdu-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =====================================================
   RESET
   ===================================================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* =====================================================
   COLOR SYSTEM
   ===================================================== */

/* Light mode (default) */
:root {
  --page-bg: #f4f3ef;                 /* warm off-white */
  --paper-bg: url("images/bg_light_mode_paper.png");
  --paper-ink: #222324;

  --accent: #2f6f55;
  --muted: #6b7280;
  --divider: rgba(0, 0, 0, 0.08);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0e0f10;               /* warm black */
    --paper-bg: url("images/bg_dark_mode_paper.png");
    --paper-ink: #D5B038;             /* gold ink */

    --accent: #D5B038;
    --muted: #c7c7c7;
    --divider: rgba(255, 255, 255, 0.15);
  }
}

/* =====================================================
   BODY
   ===================================================== */

body {
  min-height: 100vh;
  background-color: var(--page-bg);
  color: var(--paper-ink);
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =====================================================
   PAGE LAYOUT
   ===================================================== */

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 16px 44px;
}

/* =====================================================
   CARD (PAPER SURFACE)
   ===================================================== */

.card {
  background-image: var(--paper-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  border-radius: 18px;
  padding: 22px;
  margin-bottom: 22px;
}

/* =====================================================
   HERO
   ===================================================== */

.hero {
  text-align: center;
}

/* Ensure hero text is ALWAYS primary ink */
.hero h1,
.hero p,
.hero .subtitle,
.hero .muted {
  color: var(--paper-ink);
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */

h1 {
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 10px;
}

p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0.45em 0;
}

.subtitle {
  font-size: 0.95rem;
  color: var(--paper-ink);
}

.muted {
  color: var(--muted);
}

.label {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* =====================================================
   DIVIDER
   ===================================================== */

.divider {
  height: 1px;
  background: var(--divider);
  margin: 18px 0;
}

/* =====================================================
   ARABIC
   ===================================================== */

.arabic {
  font-family: "Amiri Quran", serif;
  direction: rtl;
  text-align: right;

  font-size: 1.1rem;
  line-height: 1.9;
  margin: 12px 0 6px;
}

/* =====================================================
   URDU (OPTICALLY BALANCED)
   ===================================================== */

.urdu {
  font-family: "Noto Nastaliq Urdu", serif;
  direction: rtl;
  text-align: right;

  font-size: 0.86rem;      /* intentionally smaller */
  line-height: 1.85;
  margin: 6px 0 4px;
}

/* =====================================================
   LINKS
   ===================================================== */

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* =====================================================
   FOOTER OVERRIDES
   ===================================================== */

.end {
  text-align: center;
}

.end .arabic {
  color: var(--paper-ink);
  text-align: center;   /* override RTL default */
  direction: rtl;
}

.end p,
.end .muted {
  color: var(--paper-ink);
  text-align: center;   /* override LTR default */
  direction: ltr;
}