/* ============================================================
   NURANI AaaS — Sovereign Green + Gold Design System
   Emerald #064E3B (brand primary) + Arabic Gold #D4AF37 (accent)
   ============================================================ */
:root {
  /* Emerald (Sovereign Green) */
  --color-emerald-50:#ECFDF5; --color-emerald-100:#D1FAE5; --color-emerald-500:#10B981;
  --color-emerald-700:#047857; --color-emerald-800:#065F46; --color-emerald-900:#064E3B;
  --color-emerald-950:#022C22;
  /* Gold (Arabic Gold) */
  --color-gold-300:#F4D03F; --color-gold-400:#E8C547; --color-gold-500:#D4AF37;
  --color-gold-600:#B8860B; --color-gold-700:#996515;
  /* Ink */
  --color-ink-50:#FAFAF9; --color-ink-100:#F5F5F4; --color-ink-200:#E7E5E4;
  --color-ink-400:#A8A29E; --color-ink-600:#57534E; --color-ink-900:#1C1917;

  --surface-bg:var(--color-ink-50);
  --surface-card:#FFFFFF;
  --text-primary:var(--color-ink-900);
  --text-secondary:var(--color-ink-600);
  --text-brand:var(--color-emerald-900);
  --text-accent:var(--color-gold-700);
  --brand-primary:var(--color-emerald-900);
  --brand-accent:var(--color-gold-500);

  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

body { margin:0; -webkit-font-smoothing:antialiased; }

.font-display { font-family:'Cormorant Garamond',serif; }
.font-arabic { font-family:'Amiri',serif; }

/* Sovereign gradient + pattern */
.sovereign-hero {
  background:
    radial-gradient(ellipse at top right, rgba(212,175,55,0.12), transparent 55%),
    linear-gradient(160deg, var(--color-emerald-950) 0%, var(--color-emerald-900) 55%, var(--color-emerald-800) 100%);
}
.gold-rule { height:2px; background:linear-gradient(90deg,transparent,var(--color-gold-500),transparent); }
.gold-text { color:var(--color-gold-500); }
.emerald-bg { background:var(--color-emerald-900); }

/* Geometric subtle pattern (no human figure — doctrine compliant) */
.pattern-geo {
  background-image:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(212,175,55,0.05) 0 1px, transparent 1px 22px);
}

.card {
  background:var(--surface-card);
  border:1px solid var(--color-ink-200);
  border-radius:16px;
}
.card-hover { transition:transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform:translateY(-3px); box-shadow:0 12px 30px -12px rgba(6,78,59,0.25); }

.btn-primary {
  background:var(--color-emerald-900); color:#fff;
  border-radius:12px; font-weight:600; transition:background .15s;
}
.btn-primary:hover { background:var(--color-emerald-800); }
.btn-gold {
  background:var(--color-gold-500); color:var(--color-emerald-950);
  border-radius:12px; font-weight:700; transition:background .15s;
}
.btn-gold:hover { background:var(--color-gold-600); }

.badge-core { background:var(--color-emerald-100); color:var(--color-emerald-800); }
.badge-enabler { background:#FEF3C7; color:var(--color-gold-700); }
.badge-system { background:var(--color-ink-100); color:var(--color-ink-600); }

.nav-item { cursor:pointer; border-radius:10px; transition:background .12s; }
.nav-item:hover { background:rgba(255,255,255,0.08); }
.nav-item.active { background:rgba(212,175,55,0.15); color:var(--color-gold-300); }

.agent-output {
  white-space:pre-wrap; font-size:14px; line-height:1.6;
  background:var(--color-emerald-950); color:#D1FAE5;
  border-left:3px solid var(--color-gold-500);
  border-radius:10px; padding:16px;
}

.progress-bar { background:var(--color-ink-200); border-radius:99px; overflow:hidden; height:8px; }
.progress-fill { background:linear-gradient(90deg,var(--color-emerald-700),var(--color-gold-500)); height:100%; }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--color-ink-300); border-radius:8px; }

.fade-in { animation:fadeIn .35s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }