@import url("brand/fonts.css");

/* IBAL | JTHOOR — tokens verified against ibalbooks.com, 2026-10-10. */
:root {
  --plum: #5b1a6b;
  --purple: #8a2e9c;
  --plum-deep: #2e0a3c;
  --plum-dark: #3a0e4a;
  --gold: #ffb23e;
  --gold-deep: #e0900f;
  --pink: #e8479b;
  --lilac: #b94fcf;
  --ink: #221029;
  --muted: #7a6b85;
  --bg: #fcfaff;
  --cream: #fbf5ff;
  --line: #efe6f4;
  --brand-gradient: linear-gradient(135deg, #5b1a6b, #8a2e9c);
  --gold-gradient: linear-gradient(135deg, #ffb23e, #e0900f);
  --hero-gradient: linear-gradient(160deg, #2e0a3c, #3a0e4a 50%, #1a0430);
  --font-ui: "Tajawal", system-ui, sans-serif;
  --shadow: 0 12px 30px rgba(46, 10, 60, .08);
}

html { color-scheme: light; }
body, button, input, select, textarea { font-family: var(--font-ui); }
body { background: var(--bg); color: var(--ink); }
a { color: var(--plum); }
::selection { background: #ead3f0; color: var(--plum-deep); }
.app-header {
  background: var(--hero-gradient);
  color: white;
  border-bottom: 1px solid #b94fcf40;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: white;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-lockup img { width: 46px; height: 46px; object-fit: contain; }
.brand-lockup .brand-name { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: .3px; }
.brand-lockup .brand-caption { display: block; font-size: 12px; font-weight: 500; color: #e1cfe9; margin-top: 4px; }
.app-header a { color: inherit; }
.primary { background: var(--brand-gradient); border-color: var(--plum); color: white; font-weight: 700; }
.primary:hover:not(:disabled) { background: var(--plum); }
button, .upload, input, select, textarea { border-color: var(--line); }
button { transition: background-color .15s, box-shadow .15s; }
button:hover:not(:disabled):not(.primary) { box-shadow: 0 0 0 2px #b94fcf25; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label.upload:focus-within {
  outline: 3px solid var(--purple); outline-offset: 3px;
}
.app-header a:focus-visible { outline-color: var(--gold); }
.notice { background: #fff6e7; color: #67420b; border-color: var(--gold); }
.muted, .subtle { color: #706078; }
.editor-dialog { border-color: var(--line); box-shadow: 0 30px 70px #2e0a3c33; }
.editor-dialog::backdrop { background: #2e0a3c80; }
.dialogbar { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dialogbar h2 { color: var(--plum); }
.activity-page { background: radial-gradient(ellipse at top right, #f1e5f6, transparent 65%), var(--bg); }
.activity-page .app-header { border-radius: 16px; padding: 12px 14px; min-height: 74px; gap: 12px; }
.activity-page .brand-lockup img { width: 36px; height: 36px; }
.activity-page .brand-name { font-size: 13px; }
.activity-page .brand-caption { font-size: 11px; }
.activity-page #back { font-size: 12px; }
.activity-page section { box-shadow: var(--shadow); border-color: var(--line); }
.activity-page #title { color: var(--plum); }
.activity-page #start { background: var(--gold-gradient); color: #3a2400; border-color: var(--gold-deep); }
.activity-page footer { color: #706078; text-align: center; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
@media (max-width: 420px) {
  .activity-page .app-header { padding: 10px; gap: 8px; }
  .brand-lockup { gap: 8px; }
}