/* ============================================================
   Design tokens - منصة تبرعات عراقية
   لوحة الألوان مستوحاة من ليل دجلة (تيل عميق) وذهب الدينار،
   بعيداً عن قالب "cream + terracotta" الشائع.
   ============================================================ */
:root{
  --ink:#0E1B23;
  --ink-2:#132A34;
  --ink-3:#1A3540;
  --sand:#EDE3D0;
  --gold:#C9A227;
  --gold-2:#E8C765;
  --teal:#1F6F78;
  --coral:#E2543B;
  --text:#F5F1E8;
  --muted:#9FB2B8;
  --danger:#E2543B;
  --success:#3FA796;
  --radius:14px;
  --font-display:'Changa', sans-serif;
  --font-body:'Tajawal', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(31,111,120,.30), transparent 60%),
    radial-gradient(50% 40% at 10% 100%, rgba(201,162,39,.16), transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
}

h1,h2,h3{ font-family:var(--font-display); margin:0; }

a{ color:var(--gold-2); }

.container{ max-width:960px; margin:0 auto; padding:24px 16px; }

.card{
  background:var(--ink-2);
  border:1px solid rgba(232,199,101,.15);
  border-radius:var(--radius);
  padding:22px;
}

label{ display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }

input, textarea, select{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:11px 13px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  outline:none;
  transition:border-color .15s;
}
input:focus, textarea:focus, select:focus{ border-color:var(--gold-2); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:12px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  padding:12px 20px; transition:transform .1s, opacity .15s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary{ background:linear-gradient(90deg,var(--coral),#f07a55); color:#fff; }
.btn-secondary{ background:var(--teal); color:#fff; }
.btn-ghost{ background:rgba(232,199,101,.08); color:var(--gold-2); border:1px solid rgba(232,199,101,.3); }

.status-msg{ margin-top:14px; font-size:13px; padding:10px 12px; border-radius:8px; display:none; }
.status-msg.show{ display:block; }
.status-msg.ok{ background:rgba(31,111,120,.25); color:#bfe8ec; }
.status-msg.err{ background:rgba(226,84,59,.2); color:#ffc9bc; }

.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid rgba(232,199,101,.1);
}
.navbar .brand{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--gold-2); text-decoration:none; }

.muted{ color:var(--muted); }
.text-center{ text-align:center; }